diff --git a/app/controllers/projects_controller.ts b/app/controllers/projects_controller.ts
deleted file mode 100644
index 21e20df..0000000
--- a/app/controllers/projects_controller.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-// app/controllers/projects_controller.ts
-import Project from '#models/project';
-import type { HttpContext } from '@adonisjs/core/http';
-import { createProjectValidator, updateProjectValidator } from '#validators/project';
-
-export default class ProjectsController {
-    // GET /settings/projects
-    public async index({ inertia, auth }: HttpContext) {
-        const projects = await Project.all();
-        // return inertia.render('Admin/Project/Index', { projects });
-        return inertia.render('Admin/Project/Index', {
-            projects: projects,
-            can: {
-                edit: await auth.user?.can(['settings']),
-                create: await auth.user?.can(['settings']),
-            },
-        });
-    }
-
-    // GET /settings/projects/create
-    public async create({ inertia }: HttpContext) {
-        return inertia.render('Admin/Project/Create');
-    }
-
-    // POST /settings/projects
-    public async store({ request, response, session }: HttpContext) {
-        // Validate the request data
-        const data = await request.validateUsing(createProjectValidator);
-
-        await Project.create(data);
-
-        session.flash('success', 'Project created successfully');
-        return response.redirect().toRoute('settings.project.index');
-    }
-
-    // GET /settings/projects/:id/edit
-    public async edit({ params, inertia }: HttpContext) {
-        const project = await Project.findOrFail(params.id);
-        return inertia.render('Admin/Project/Edit', { project });
-    }
-
-    // PUT /settings/projects/:id
-    public async update({ params, request, response, session }: HttpContext) {
-        const project = await Project.findOrFail(params.id);
-        
-        // Validate the request data
-        const data = await request.validateUsing(updateProjectValidator);
-
-        await project.merge(data).save();
-
-        session.flash('success', 'Project updated successfully');
-        return response.redirect().toRoute('settings.project.index');
-    }
-}
diff --git a/app/validators/project.ts b/app/validators/project.ts
deleted file mode 100644
index bad6c7c..0000000
--- a/app/validators/project.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-// app/validators/project.ts
-import vine from '@vinejs/vine';
-
-export const createProjectValidator = vine.compile(
-    vine.object({
-        label: vine.string().trim().minLength(1).maxLength(50),
-        name: vine
-            .string()
-            .trim()
-            .minLength(3)
-            .maxLength(255)
-            .regex(/^[a-z0-9-]+$/),
-        description: vine.string().trim().maxLength(255).minLength(5).optional(),
-    }),
-);
-
-export const updateProjectValidator = vine.compile(
-    vine.object({
-        // label is NOT included since it's readonly
-        name: vine
-            .string()
-            .trim()
-            .minLength(3)
-            .maxLength(255)
-            .regex(/^[a-z0-9-]+$/),
-         description: vine.string().trim().maxLength(255).minLength(5).optional(),
-    }),
-);
diff --git a/resources/js/Components/TablePersons.vue b/resources/js/Components/TablePersons.vue
index c119d8c..3dd6d3b 100644
--- a/resources/js/Components/TablePersons.vue
+++ b/resources/js/Components/TablePersons.vue
@@ -2,8 +2,8 @@
 import { computed, ref, watch } from 'vue';
 import { mdiTrashCan } from '@mdi/js';
 import { mdiDragVariant, mdiChevronLeft, mdiChevronRight } from '@mdi/js';
-import { mdiAccount, mdiDomain } from '@mdi/js';
 import BaseIcon from '@/Components/BaseIcon.vue';
+import BaseButtons from '@/Components/BaseButtons.vue';
 import BaseButton from '@/Components/BaseButton.vue';
 import { Person } from '@/Dataset';
 import Draggable from 'vuedraggable';
@@ -21,6 +21,25 @@ interface Props {
     canReorder?: boolean;
 }
 
+// const props = defineProps({
+//     checkable: Boolean,
+//     persons: {
+//         type: Array<Person>,
+//         default: () => [],
+//     },
+//     relation: {
+//         type: String,
+//         required: true,
+//     },
+//     contributortypes: {
+//         type: Object,
+//         default: () => ({}),
+//     },
+//     errors: {
+//         type: Object,
+//         default: () => ({}),
+//     },
+// });
 const props = withDefaults(defineProps<Props>(), {
     checkable: false,
     persons: () => [],
@@ -44,18 +63,15 @@ const perPage = ref(5);
 const currentPage = ref(0);
 const dragEnabled = ref(props.canReorder);
 
-// Name type options
-const nameTypeOptions = {
-    'Personal': 'Personal',
-    'Organizational': 'Org'
-};
-
 // Computed properties
 const items = computed({
     get() {
         return props.persons;
     },
+    // setter
     set(value) {
+        // Note: we are using destructuring assignment syntax here.
+
         props.persons.length = 0;
         props.persons.push(...value);
     },
@@ -106,19 +122,19 @@ const pagesList = computed(() => {
     return pages;
 });
 
+// const removeAuthor = (key: number) => {
+//     items.value.splice(key, 1);
+// };
 // Methods
 const removeAuthor = (index: number) => {
     const actualIndex = perPage.value * currentPage.value + index;
     const person = items.value[actualIndex];
 
-    const displayName = person.name_type === 'Organizational' 
-        ? person.last_name || person.email 
-        : `${person.first_name || ''} ${person.last_name || person.email}`.trim();
-
-    if (confirm(`Are you sure you want to remove ${displayName}?`)) {
+    if (confirm(`Are you sure you want to remove ${person.first_name || ''} ${person.last_name || person.email}?`)) {
         items.value.splice(actualIndex, 1);
         emit('remove-person', actualIndex, person);
 
+        // Adjust current page if needed
         if (itemsPaginated.value.length === 0 && currentPage.value > 0) {
             currentPage.value--;
         }
@@ -128,12 +144,6 @@ const removeAuthor = (index: number) => {
 const updatePerson = (index: number, field: keyof Person, value: any) => {
     const actualIndex = perPage.value * currentPage.value + index;
     const person = items.value[actualIndex];
-    
-    // Handle name_type change - clear first_name if switching to Organizational
-    if (field === 'name_type' && value === 'Organizational') {
-        person.first_name = '';
-    }
-    
     (person as any)[field] = value;
     emit('person-updated', actualIndex, person);
 };
@@ -160,6 +170,7 @@ const handleDragEnd = (evt: any) => {
 watch(
     () => props.persons.length,
     () => {
+        // Reset to first page if current page is out of bounds
         if (currentPage.value >= numPages.value && numPages.value > 0) {
             currentPage.value = numPages.value - 1;
         }
@@ -178,16 +189,18 @@ const perPageOptions = [
 <template>
     <div class="card">
         <!-- Table Controls -->
-        <div v-if="hasMultiplePages" class="flex justify-between items-center px-4 py-2.5 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800/50">
+        <div v-if="hasMultiplePages" class="flex justify-between items-center p-3 border-b border-gray-200 dark:border-slate-700">
             <div class="flex items-center gap-2">
-                <span class="text-xs text-gray-600 dark:text-gray-400">
-                    {{ currentPage * perPage + 1 }}-{{ Math.min((currentPage + 1) * perPage, items.length) }} of {{ items.length }}
+                <span class="text-sm text-gray-600 dark:text-gray-400">
+                    Showing {{ currentPage * perPage + 1 }} to
+                    {{ Math.min((currentPage + 1) * perPage, items.length) }}
+                    of {{ items.length }} entries
                 </span>
             </div>
             <select
                 v-model="perPage"
                 @change="currentPage = 0"
-                class="px-2 py-1 text-xs border rounded dark:bg-slate-800 dark:border-slate-600 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                class="px-3 py-1 text-sm border rounded-md dark:bg-slate-800 dark:border-slate-600"
             >
                 <option v-for="option in perPageOptions" :key="option.value" :value="option.value">
                     {{ option.label }}
@@ -197,22 +210,22 @@ const perPageOptions = [
 
         <!-- Table -->
         <div class="overflow-x-auto">
-            <table class="w-full table-compact">
+            <table class="w-full">
                 <thead>
-                    <tr class="bg-gray-50 dark:bg-slate-800/50 border-b border-gray-200 dark:border-slate-700">
-                        <th v-if="canReorder" class="w-8 px-2 py-2" />
-                        <th scope="col" class="text-left px-2 py-2 text-xs font-semibold text-gray-600 dark:text-gray-300 w-10">#</th>
-                        <th class="text-left px-2 py-2 text-[10px] font-semibold text-gray-600 dark:text-gray-300 w-40">Type</th>
-                        <th class="text-left px-2 py-2 text-xs font-semibold text-gray-600 dark:text-gray-300 min-w-[120px]">First Name</th>
-                        <th class="text-left px-2 py-2 text-xs font-semibold text-gray-600 dark:text-gray-300 min-w-[160px]">Last Name / Org</th>
-                        <th class="text-left px-2 py-2 text-xs font-semibold text-gray-600 dark:text-gray-300 min-w-[140px]">ORCID</th>
-                        <th class="text-left px-2 py-2 text-xs font-semibold text-gray-600 dark:text-gray-300 min-w-[160px]">Email</th>
-                        <th v-if="showContributorTypes" scope="col" class="text-left px-2 py-2 text-xs font-semibold text-gray-600 dark:text-gray-300 w-32">Role</th>
-                        <th v-if="canDelete" class="w-16 px-2 py-2 text-xs font-semibold text-gray-600 dark:text-gray-300">Actions</th>
+                    <tr class="border-b border-gray-200 dark:border-slate-700">
+                        <th v-if="canReorder" class="w-10 p-3" />
+                        <th scope="col" class="text-left p-3">#</th>
+                        <th scope="col">Id</th>
+                        <th>First Name</th>
+                        <th>Last Name / Organization</th>
+                        <th>Orcid</th>
+                        <th>Email</th>
+                        <th v-if="showContributorTypes" scope="col" class="text-left p-3">Type</th>
+                        <th v-if="canDelete" class="w-20 p-3">Actions</th>
                     </tr>
                 </thead>
-
-                <!-- Draggable tbody for non-paginated view -->
+                <!-- <tbody> -->
+                <!-- <tr v-for="(client, index) in itemsPaginated" :key="client.id"> -->
                 <draggable
                     v-if="canReorder && !hasMultiplePages"
                     tag="tbody"
@@ -223,167 +236,114 @@ const perPageOptions = [
                     handle=".drag-handle"
                 >
                     <template #item="{ index, element }">
-                        <tr class="border-b border-gray-100 dark:border-slate-800 hover:bg-blue-50 dark:hover:bg-slate-800/70 transition-colors">
-                            <td v-if="canReorder" class="px-2 py-2">
-                                <div class="drag-handle cursor-move text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
-                                    <BaseIcon :path="mdiDragVariant" :size="18" />
+                        <tr class="border-b border-gray-100 dark:border-slate-800 hover:bg-gray-50 dark:hover:bg-slate-800">
+                            <td class="p-3">
+                                <div class="drag-handle cursor-move text-gray-400 hover:text-gray-600">
+                                    <BaseIcon :path="mdiDragVariant" />
                                 </div>
                             </td>
-                            <td class="px-2 py-2 text-xs text-gray-600 dark:text-gray-400">{{ index + 1 }}</td>
+                            <td class="p-3">{{ index + 1 }}</td>
+                            <td data-label="Id" class="p-3 text-sm text-gray-600">{{ element.id || '-' }}</td>
 
-                            <!-- Name Type Selector -->
-                            <td class="px-2 py-2">
-                                <div class="flex items-center gap-1.5">
-                                    <BaseIcon 
-                                        :path="element.name_type === 'Organizational' ? mdiDomain : mdiAccount" 
-                                        :size="16"
-                                        :class="element.name_type === 'Organizational' ? 'text-purple-500' : 'text-blue-500'"
-                                        :title="element.name_type"
-                                    />
-                                    <FormControl
-                                        required
-                                        v-model="element.name_type"
-                                        type="select"
-                                        :options="nameTypeOptions"
-                                        :is-read-only="element.status == true"
-                                        class="text-[8px] compact-select-mini flex-1"
-                                    />
-                                </div>
-                                <div class="text-red-500 text-[8px] mt-0.5" v-if="errors && Array.isArray(errors[`${relation}.${index}.name_type`])">
-                                    {{ errors[`${relation}.${index}.name_type`][0] }}
-                                </div>
-                            </td>
-
-                            <!-- First Name - Only shown for Personal type -->
-                            <td class="px-2 py-2">
+                            <!-- First Name - Hidden for Organizational -->
+                            <td class="p-3" data-label="First Name" v-if="element.name_type !== 'Organizational'">
                                 <FormControl
-                                    v-if="element.name_type !== 'Organizational'"
                                     required
                                     v-model="element.first_name"
                                     type="text"
                                     :is-read-only="element.status == true"
-                                    placeholder="First name"
-                                    class="text-xs compact-input"
+                                    placeholder="[FIRST NAME]"
                                 />
-                                <span v-else class="text-gray-400 text-xs italic">—</span>
-                                <div class="text-red-500 text-xs mt-0.5" v-if="errors && Array.isArray(errors[`${relation}.${index}.first_name`])">
-                                    {{ errors[`${relation}.${index}.first_name`][0] }}
+                                <div class="text-red-400 text-sm" v-if="errors && Array.isArray(errors[`${relation}.${index}.first_name`])">
+                                    {{ errors[`${relation}.${index}.first_name`].join(', ') }}
                                 </div>
                             </td>
+                            <td v-else></td>
+                            <!-- Empty cell for organizational entries -->
 
                             <!-- Last Name / Organization Name -->
-                            <td class="px-2 py-2">
+                            <td :data-label="element.name_type === 'Organizational' ? 'Organization Name' : 'Last Name'">
                                 <FormControl
                                     required
                                     v-model="element.last_name"
                                     type="text"
                                     :is-read-only="element.status == true"
-                                    :placeholder="element.name_type === 'Organizational' ? 'Organization' : 'Last name'"
-                                    class="text-xs compact-input"
+                                    :placeholder="element.name_type === 'Organizational' ? '[ORGANIZATION NAME]' : '[LAST NAME]'"
                                 />
-                                <div class="text-red-500 text-xs mt-0.5" v-if="errors && Array.isArray(errors[`${relation}.${index}.last_name`])">
-                                    {{ errors[`${relation}.${index}.last_name`][0] }}
+                                <div class="text-red-400 text-sm" v-if="errors && Array.isArray(errors[`${relation}.${index}.last_name`])">
+                                    {{ errors[`${relation}.${index}.last_name`].join(', ') }}
                                 </div>
                             </td>
 
                             <!-- Orcid -->
-                            <td class="px-2 py-2">
+                            <td data-label="Orcid">
                                 <FormControl
                                     v-model="element.identifier_orcid"
                                     type="text"
-                                    :is-read-only="element.status == true"
-                                    placeholder="0000-0000-0000-0000"
-                                    class="text-xs compact-input font-mono"
+                                    :is-read-only="element.status == true"                                   
                                 />
-                                <div class="text-red-500 text-xs mt-0.5" v-if="errors && Array.isArray(errors[`${relation}.${index}.identifier_orcid`])">
-                                    {{ errors[`${relation}.${index}.identifier_orcid`][0] }}
+                                <div class="text-red-400 text-sm" v-if="errors && Array.isArray(errors[`${relation}.${index}.identifier_orcid`])">
+                                    {{ errors[`${relation}.${index}.identifier_orcid`].join(', ') }}
                                 </div>
                             </td>
 
                             <!-- Email -->
-                            <td class="px-2 py-2">
+                            <td data-label="Email">
                                 <FormControl
                                     required
                                     v-model="element.email"
-                                    type="email"
+                                    type="text"
                                     :is-read-only="element.status == true"
-                                    placeholder="email@example.com"
-                                    class="text-xs compact-input"
+                                    placeholder="[EMAIL]"
                                 />
-                                <div class="text-red-500 text-xs mt-0.5" v-if="errors && Array.isArray(errors[`${relation}.${index}.email`])">
-                                    {{ errors[`${relation}.${index}.email`][0] }}
+                                <div class="text-red-400 text-sm" v-if="errors && Array.isArray(errors[`${relation}.${index}.email`])">
+                                    {{ errors[`${relation}.${index}.email`].join(', ') }}
                                 </div>
                             </td>
 
                             <!-- Contributor Type -->
-                            <td v-if="Object.keys(contributortypes).length" class="px-2 py-2">
+                            <td v-if="Object.keys(contributortypes).length">
                                 <FormControl
                                     required
                                     v-model="element.pivot_contributor_type"
                                     type="select"
                                     :options="contributortypes"
-                                    placeholder="Role"
-                                    class="text-xs compact-select"
-                                />
-                                <div
-                                    class="text-red-500 text-xs mt-0.5"
-                                    v-if="errors && Array.isArray(errors[`${relation}.${index}.pivot_contributor_type`])"
+                                    placeholder="[relation type]"
                                 >
-                                    {{ errors[`${relation}.${index}.pivot_contributor_type`][0] }}
-                                </div>
+                                    <div
+                                        class="text-red-400 text-sm"
+                                        v-if="errors && Array.isArray(errors[`${relation}.${index}.pivot_contributor_type`])"
+                                    >
+                                        {{ errors[`${relation}.${index}.pivot_contributor_type`].join(', ') }}
+                                    </div>
+                                </FormControl>
                             </td>
 
                             <!-- Actions -->
-                            <td class="px-2 py-2 whitespace-nowrap">
-                                <BaseButton 
-                                    color="danger" 
-                                    :icon="mdiTrashCan" 
-                                    small 
-                                    @click.prevent="removeAuthor(index)"
-                                    class="compact-button"
-                                />
+                            <td class="before:hidden lg:w-1 whitespace-nowrap">
+                                <BaseButtons type="justify-start lg:justify-end" no-wrap>
+                                    <BaseButton color="danger" :icon="mdiTrashCan" small @click.prevent="removeAuthor(index)" />
+                                </BaseButtons>
                             </td>
                         </tr>
                     </template>
                 </draggable>
-
+                <!-- </tbody> -->
                 <!-- Non-draggable tbody for paginated view -->
                 <tbody v-else>
                     <tr
                         v-for="(element, index) in itemsPaginated"
                         :key="element.id || index"
-                        class="border-b border-gray-100 dark:border-slate-800 hover:bg-blue-50 dark:hover:bg-slate-800/70 transition-colors"
+                        class="border-b border-gray-100 dark:border-slate-800 hover:bg-gray-50 dark:hover:bg-slate-800"
                     >
-                        <td   v-if="canReorder" class="px-2 py-2 text-gray-400">
-                            <BaseIcon :path="mdiDragVariant" :size="18" />
+                        <td v-if="canReorder" class="p-3 text-gray-400">
+                            <BaseIcon :path="mdiDragVariant" />
                         </td>
-                        <td class="px-2 py-2 text-xs text-gray-600 dark:text-gray-400">{{ currentPage * perPage + index + 1 }}</td>
+                        <td class="p-3">{{ currentPage * perPage + index + 1 }}</td>
+                        <td class="p-3 text-sm text-gray-600">{{ element.id || '-' }}</td>
 
-                        <!-- Name Type Selector -->
-                        <td class="px-2 py-2">
-                            <BaseIcon 
-                                        :path="element.name_type === 'Organizational' ? mdiDomain : mdiAccount" 
-                                        :size="16"
-                                        :class="element.name_type === 'Organizational' ? 'text-purple-500' : 'text-blue-500'"
-                                        :title="element.name_type"
-                                    />
-                            <FormControl
-                                required
-                                :model-value="element.name_type"                              
-                                @update:model-value="updatePerson(index, 'name_type', $event)"
-                                type="select"
-                                :options="nameTypeOptions"
-                                :is-read-only="element.status || !canEdit"
-                                class="text-xs compact-select"
-                                :error="getFieldError(index, 'name_type')"
-                            />
-                            <div v-if="getFieldError(index, 'name_type')" class="text-red-500 text-xs mt-0.5">
-                                {{ getFieldError(index, 'name_type') }}
-                            </div>
-                        </td>
-
-                        <!-- First Name -->
-                        <td class="px-2 py-2">
+                        <!-- Same field structure as draggable version -->
+                        <td class="p-3">
                             <FormControl
                                 v-if="element.name_type !== 'Organizational'"
                                 required
@@ -391,68 +351,59 @@ const perPageOptions = [
                                 @update:model-value="updatePerson(index, 'first_name', $event)"
                                 type="text"
                                 :is-read-only="element.status || !canEdit"
-                                placeholder="First name"
-                                class="text-xs compact-input"
+                                placeholder="[FIRST NAME]"
                                 :error="getFieldError(index, 'first_name')"
                             />
-                            <span v-else class="text-gray-400 text-xs italic">—</span>
-                            <div v-if="getFieldError(index, 'first_name')" class="text-red-500 text-xs mt-0.5">
+                            <span v-else class="text-gray-400">-</span>
+                            <div v-if="getFieldError(index, 'first_name')" class="text-red-400 text-sm">
                                 {{ getFieldError(index, 'first_name') }}
                             </div>
                         </td>
 
-                        <!-- Last Name / Organization -->
-                        <td class="px-2 py-2">
+                        <td class="p-3">
                             <FormControl
                                 required
                                 :model-value="element.last_name"
                                 @update:model-value="updatePerson(index, 'last_name', $event)"
                                 type="text"
                                 :is-read-only="element.status || !canEdit"
-                                :placeholder="element.name_type === 'Organizational' ? 'Organization' : 'Last name'"
-                                class="text-xs compact-input"
+                                :placeholder="element.name_type === 'Organizational' ? '[ORGANIZATION NAME]' : '[LAST NAME]'"
                                 :error="getFieldError(index, 'last_name')"
                             />
-                            <div v-if="getFieldError(index, 'last_name')" class="text-red-500 text-xs mt-0.5">
+                            <div v-if="getFieldError(index, 'last_name')" class="text-red-400 text-sm">
                                 {{ getFieldError(index, 'last_name') }}
                             </div>
                         </td>
 
-                        <!-- Orcid -->
-                        <td class="px-2 py-2">
+                        <td class="p-3">
                             <FormControl
                                 :model-value="element.identifier_orcid"
                                 @update:model-value="updatePerson(index, 'identifier_orcid', $event)"
                                 type="text"
-                                :is-read-only="element.status || !canEdit"
-                                placeholder="0000-0000-0000-0000"
-                                class="text-xs compact-input font-mono"
+                                :is-read-only="element.status || !canEdit"                              
                                 :error="getFieldError(index, 'identifier_orcid')"
                             />
-                            <div v-if="getFieldError(index, 'identifier_orcid')" class="text-red-500 text-xs mt-0.5">
+                            <div v-if="getFieldError(index, 'identifier_orcid')" class="text-red-400 text-sm">
                                 {{ getFieldError(index, 'identifier_orcid') }}
                             </div>
                         </td>
 
-                        <!-- Email -->
-                        <td class="px-2 py-2">
+                        <td class="p-3">
                             <FormControl
                                 required
                                 :model-value="element.email"
                                 @update:model-value="updatePerson(index, 'email', $event)"
                                 type="email"
                                 :is-read-only="element.status || !canEdit"
-                                placeholder="email@example.com"
-                                class="text-xs compact-input"
+                                placeholder="[EMAIL]"
                                 :error="getFieldError(index, 'email')"
                             />
-                            <div v-if="getFieldError(index, 'email')" class="text-red-500 text-xs mt-0.5">
+                            <div v-if="getFieldError(index, 'email')" class="text-red-400 text-sm">
                                 {{ getFieldError(index, 'email') }}
                             </div>
                         </td>
 
-                        <!-- Contributor Type -->
-                        <td v-if="showContributorTypes" class="px-2 py-2">
+                        <td v-if="showContributorTypes" class="p-3">
                             <FormControl
                                 required
                                 :model-value="element.pivot_contributor_type"
@@ -460,39 +411,15 @@ const perPageOptions = [
                                 type="select"
                                 :options="contributortypes"
                                 :is-read-only="element.status || !canEdit"
-                                placeholder="Role"
-                                class="text-xs compact-select"
+                                placeholder="[Select type]"
                                 :error="getFieldError(index, 'pivot_contributor_type')"
-                            />
-                            <div v-if="getFieldError(index, 'pivot_contributor_type')" class="text-red-500 text-xs mt-0.5">
+                            />                          
+                             <div v-if="getFieldError(index, 'pivot_contributor_type')" class="text-red-400 text-sm">
                                 {{ getFieldError(index, 'pivot_contributor_type') }}
                             </div>
                         </td>
 
-                        <!-- Actions -->
-                        <td v-if="canDelete" class="px-2 py-2 whitespace-nowrap">
-                            <BaseButton
-                                color="danger"
-                                :icon="mdiTrashCan"
-                                small
-                                @click="removeAuthor(index)"
-                                :disabled="element.status || !canEdit"
-                                title="Remove person"
-                                class="compact-button"
-                            />
-                        </td>
-                    </tr>
-
-                    <!-- Empty State -->
-                    <!-- <tr v-if="items.length === 0">
-                        <td :colspan="showContributorTypes ? 9 : 8" class="text-center py-12 text-gray-400">
-                            <div class="flex flex-col items-center gap-2">
-                                <BaseIcon :path="mdiBookOpenPageVariant" :size="32" class="text-gray-300" />
-                                <span class="text-sm">No persons added yet</span>
-                            </div>
-                        </td>
-                    </tr>
-                </tbody>-if="canDelete" class="p-3">
+                        <td v-if="canDelete" class="p-3">
                             <BaseButtons type="justify-start lg:justify-end" no-wrap>
                                 <BaseButton
                                     color="danger"
@@ -506,12 +433,10 @@ const perPageOptions = [
                         </td>
                     </tr>
 
-                   
+                    <!-- Empty State -->
                     <tr v-if="items.length === 0">
-                        <td :colspan="showContributorTypes ? 10 : 9" class="text-center p-8 text-gray-500">
-                            No persons added yet
-                        </td>
-                    </tr> -->
+                        <td :colspan="canReorder ? 8 : 7" class="text-center p-8 text-gray-500">No persons added yet</td>
+                    </tr>
                 </tbody>
             </table>
         </div>
@@ -542,9 +467,7 @@ const perPageOptions = [
                 />
             </div>
 
-            <span class="text-sm text-gray-600 dark:text-gray-400">
-                Page {{ currentPageHuman }} of {{ numPages }}
-            </span>
+            <span class="text-sm text-gray-600 dark:text-gray-400"> Page {{ currentPageHuman }} of {{ numPages }} </span>
         </div>
     </div>
 </template>
@@ -558,6 +481,7 @@ const perPageOptions = [
     @apply bg-white dark:bg-slate-900 rounded-lg shadow-sm;
 }
 
+/* Improve table responsiveness */
 @media (max-width: 768px) {
     table {
         font-size: 0.875rem;
@@ -568,4 +492,4 @@ const perPageOptions = [
         padding: 0.5rem !important;
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/resources/js/Layouts/LayoutAuthenticated.vue b/resources/js/Layouts/LayoutAuthenticated.vue
index c077c7b..15a117c 100644
--- a/resources/js/Layouts/LayoutAuthenticated.vue
+++ b/resources/js/Layouts/LayoutAuthenticated.vue
@@ -14,11 +14,11 @@ const props = defineProps({
     showAsideMenu: {
       type: Boolean,
       default: true // Set default value to true
-    },
-    hasProgressBar: {
-      type: Boolean,
-      default: false // New prop to indicate if progress bar is shown
     }
+	// user: {
+	// 	type: Object,
+	// 	default: () => ({}),
+	// }
 });
 </script>
 
@@ -29,18 +29,9 @@ const props = defineProps({
     }">
         <div :class="{ 
             'ml-60 lg:ml-0': layoutService.isAsideMobileExpanded,
-            'xl:pl-60': props.showAsideMenu==true,
-            'pt-14': !props.hasProgressBar,
-            'pt-24': props.hasProgressBar // Increased padding when progress bar is present (pt-14 + height of progress bar)
-        }"
-            class="min-h-screen w-screen transition-position lg:w-auto bg-gray-50 dark:bg-slate-800 dark:text-slate-100">
-            <NavBar 
-                :class="{ 
-                    'ml-60 lg:ml-0': layoutService.isAsideMobileExpanded,
-                    'top-10': props.hasProgressBar // Push NavBar down when progress bar is present
-                }" 
-                :showBurger="props.showAsideMenu" 
-            />
+            'xl:pl-60': props.showAsideMenu==true }"
+            class="pt-14  min-h-screen w-screen transition-position lg:w-auto bg-gray-50 dark:bg-slate-800 dark:text-slate-100">
+            <NavBar :class="{ 'ml-60 lg:ml-0': layoutService.isAsideMobileExpanded }" :showBurger="props.showAsideMenu" />
             <!-- Conditionally render AsideMenu based on showAsideMenu prop -->
             <template v-if="showAsideMenu">
                 <AsideMenu />
diff --git a/resources/js/Pages/Admin/License/Index.vue b/resources/js/Pages/Admin/License/Index.vue
index b871260..73192dc 100644
--- a/resources/js/Pages/Admin/License/Index.vue
+++ b/resources/js/Pages/Admin/License/Index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { Head, usePage } from '@inertiajs/vue3';
-import { mdiLicense, mdiCheckCircle, mdiCloseCircle, mdiAlertBoxOutline } from '@mdi/js';
+import { usePage } from '@inertiajs/vue3';
+import { mdiAccountKey, mdiSquareEditOutline, mdiAlertBoxOutline } from '@mdi/js';
 import { computed, ComputedRef } from 'vue';
 import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
 import SectionMain from '@/Components/SectionMain.vue';
@@ -9,150 +9,107 @@ import BaseButton from '@/Components/BaseButton.vue';
 import CardBox from '@/Components/CardBox.vue';
 import BaseButtons from '@/Components/BaseButtons.vue';
 import NotificationBar from '@/Components/NotificationBar.vue';
+// import Pagination from '@/Components/Admin/Pagination.vue';
+// import Sort from '@/Components/Admin/Sort.vue';
 import { stardust } from '@eidellev/adonis-stardust/client';
+// import CardBoxModal from '@/Components/CardBoxModal.vue';
 
-interface License {
-    id: number;
-    name: string;
-    sort_order: number;
-    active: boolean;
-}
+// const isModalDangerActive = ref(false);
+// const deleteId = ref();
 
-const props = defineProps({
+defineProps({
     licenses: {
-        type: Array<License>,
-        default: () => [],
+        type: Object,
+        default: () => ({}),
     },
+    // filters: {
+    //     type: Object,
+    //     default: () => ({}),
+    // },
     can: {
         type: Object,
         default: () => ({}),
     },
 });
 
-const flash: ComputedRef<any> = computed(() => usePage().props.flash);
+const flash: ComputedRef<any> = computed(() => {
+    // let test = usePage();
+    // console.log(test);
+    return usePage().props.flash;
+});
 
-const licenseCount = computed(() => props.licenses.length);
 
-const getLicenseColor = (index: number) => {
-    const colors = [
-        'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-300',
-        'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
-        'bg-violet-100 text-violet-800 dark:bg-violet-900 dark:text-violet-300',
-        'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300',
-        'bg-rose-100 text-rose-800 dark:bg-rose-900 dark:text-rose-300',
-        'bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-300',
-    ];
-    return colors[index % colors.length];
-};
 </script>
 
 <template>
+
     <LayoutAuthenticated>
+
         <Head title="Licenses" />
         <SectionMain>
-            <SectionTitleLineWithButton :icon="mdiLicense" title="Licenses" main>
-                <div class="flex items-center gap-3">
-                    <span class="text-sm text-gray-500 dark:text-gray-400 font-medium">
-                        {{ licenseCount }} {{ licenseCount === 1 ? 'license' : 'licenses' }}
-                    </span>
-                </div>
+            <SectionTitleLineWithButton :icon="mdiAccountKey" title="Licenses" main>
+                <!-- <BaseButton
+                    v-if="can.create"
+                    :route-name="stardust.route('settings.role.create')"
+                    :icon="mdiPlus"
+                    label="Add"
+                    color="info"
+                    rounded-full
+                    small
+                /> -->
             </SectionTitleLineWithButton>
-
             <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
                 {{ flash.message }}
             </NotificationBar>
-
             <CardBox class="mb-6" has-table>
+            </CardBox>
+            <CardBox class="mb-6" has-form-data>
                 <table>
                     <thead>
                         <tr>
-                            <th>Name</th>
-                            <th>Sort Order</th>
-                            <th>Status</th>
+                            <th>
+                                <!-- <Sort label="Name" attribute="name" /> -->
+                                Name
+                            </th>
+                            <th>
+                                <!-- <Sort label="Sort Order" attribute="sort_order" /> -->
+                                Sort Order
+                            </th>
                             <th v-if="can.edit">Actions</th>
+
                         </tr>
                     </thead>
 
                     <tbody>
-                        <tr v-if="licenses.length === 0">
-                            <td colspan="4" class="text-center py-12">
-                                <div class="flex flex-col items-center justify-center text-gray-500 dark:text-gray-400">
-                                    <p class="text-lg font-medium mb-2">No licenses found</p>
-                                    <p class="text-sm">Licenses will appear here once configured</p>
-                                </div>
-                            </td>
-                        </tr>
-                        <tr
-                            v-for="(license, index) in licenses"
-                            :key="license.id"
-                            class="hover:bg-gray-50 dark:hover:bg-slate-800 transition-colors"
-                        >
+                        <tr v-for="license in licenses" :key="license.id">
                             <td data-label="Name">
-                                <span
-                                    class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium transition-all hover:shadow-md"
-                                    :class="getLicenseColor(index)"
+                                <!-- <Link
+                                    :href="stardust.route('settings.role.show', [role.id])"
+                                    class="no-underline hover:underline text-cyan-600 dark:text-cyan-400"
                                 >
                                     {{ license.name }}
-                                </span>
+                                </Link> -->
+                                {{ license.name }}
                             </td>
-                            <td data-label="Sort Order">
-                                <span
-                                    class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 dark:bg-slate-700 text-gray-700 dark:text-gray-300 font-semibold text-sm"
-                                >
-                                    {{ license.sort_order }}
-                                </span>
-                            </td>
-                            <td data-label="Status">
-                                <span
-                                    v-if="license.active"
-                                    class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300"
-                                >
-                                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                                        <path
-                                            fill-rule="evenodd"
-                                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                                            clip-rule="evenodd"
-                                        />
-                                    </svg>
-                                    Active
-                                </span>
-                                <span
-                                    v-else
-                                    class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300"
-                                >
-                                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                                        <path
-                                            fill-rule="evenodd"
-                                            d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-                                            clip-rule="evenodd"
-                                        />
-                                    </svg>
-                                    Inactive
-                                </span>
+                            <td data-label="Description">
+                                {{ license.sort_order }}
                             </td>
+
                             <td v-if="can.edit" class="before:hidden lg:w-1 whitespace-nowrap">
                                 <BaseButtons type="justify-start lg:justify-end" no-wrap>
-                                    <BaseButton
-                                        v-if="license.active"
+                                    <BaseButton v-if="license.active"
                                         :route-name="stardust.route('settings.license.down', [license.id])"
-                                        color="warning"
-                                        :icon="mdiCloseCircle"
-                                        label="Deactivate"
-                                        small
-                                    />
-                                    <BaseButton
-                                        v-else
-                                        :route-name="stardust.route('settings.license.up', [license.id])"
-                                        color="success"
-                                        :icon="mdiCheckCircle"
-                                        label="Activate"
-                                        small
-                                    />
+                                        color="warning" :icon="mdiSquareEditOutline" label="deactivate" small />
+                                    <BaseButton v-else :route-name="stardust.route('settings.license.up', [license.id])"
+                                        color="success" :icon="mdiSquareEditOutline" label="activate" small />
                                 </BaseButtons>
                             </td>
                         </tr>
                     </tbody>
                 </table>
+                <!-- <div class="py-4">
+					<Pagination v-bind:data="roles.meta" />
+				</div> -->
             </CardBox>
         </SectionMain>
     </LayoutAuthenticated>
diff --git a/resources/js/Pages/Admin/Project/Create.vue b/resources/js/Pages/Admin/Project/Create.vue
deleted file mode 100644
index 688e0ee..0000000
--- a/resources/js/Pages/Admin/Project/Create.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<script lang="ts" setup>
-import { Head, useForm } from '@inertiajs/vue3';
-import { mdiFolderPlus, mdiArrowLeftBoldOutline, mdiFormTextarea, mdiContentSave } from '@mdi/js';
-import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
-import SectionMain from '@/Components/SectionMain.vue';
-import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
-import CardBox from '@/Components/CardBox.vue';
-import FormField from '@/Components/FormField.vue';
-import FormControl from '@/Components/FormControl.vue';
-import BaseButton from '@/Components/BaseButton.vue';
-import BaseButtons from '@/Components/BaseButtons.vue';
-import { stardust } from '@eidellev/adonis-stardust/client';
-
-const form = useForm({
-    label: '',
-    name: '',
-    description: '',
-});
-
-const submit = async () => {
-    await form.post(stardust.route('settings.project.store'));
-};
-</script>
-
-<template>
-    <LayoutAuthenticated>
-        <Head title="Create New Project" />
-        <SectionMain>
-            <SectionTitleLineWithButton :icon="mdiFolderPlus" title="Create New Project" main>
-                <BaseButton
-                    :route-name="stardust.route('settings.project.index')"
-                    :icon="mdiArrowLeftBoldOutline"
-                    label="Back"
-                    color="white"
-                    rounded-full
-                    small
-                />
-            </SectionTitleLineWithButton>
-
-            <CardBox form @submit.prevent="submit()" class="shadow-lg">
-                <div class="grid grid-cols-1 gap-6">
-                    <FormField label="Label" help="Required. Displayed project label" :class="{ 'text-red-400': form.errors.label }">
-                        <FormControl
-                            v-model="form.label"
-                            type="text"
-                            placeholder="e.g., my-awesome-project"                           
-                            required
-                            :error="form.errors.label"
-                            class="transition-all focus:ring-2 focus:ring-blue-500"
-                        >
-                            <div class="text-red-400 text-sm mt-1" v-if="form.errors.label">
-                                {{ form.errors.label }}
-                            </div>
-                        </FormControl>
-                    </FormField>
-
-                    <FormField
-                        label="Name"
-                        help="Required. Project identifier (slug, lowercase, no spaces)"
-                        :class="{ 'text-red-400': form.errors.name }"
-                    >
-                        <FormControl
-                            v-model="form.name"
-                            type="text"
-                            placeholder="Enter a descriptive titel..."
-                            required
-                            :error="form.errors.name"
-                            class="font-mono transition-all focus:ring-2 focus:ring-blue-500"
-                        >
-                            <div class="text-red-400 text-sm mt-1" v-if="form.errors.name">
-                                {{ form.errors.name }}
-                            </div>
-                        </FormControl>
-                    </FormField>
-
-                    <FormField
-                        label="Description"
-                        help="Optional. Detailed description of the project"
-                        :class="{ 'text-red-400': form.errors.description }"
-                    >
-                        <FormControl
-                            v-model="form.description"
-                            :icon="mdiFormTextarea"
-                            name="description"
-                            type="textarea"
-                            placeholder="Describe what this project is about..."
-                            :error="form.errors.description"
-                            class="transition-all focus:ring-2 focus:ring-blue-500"
-                        >
-                            <div class="text-red-400 text-sm mt-1" v-if="form.errors.description">
-                                {{ form.errors.description }}
-                            </div>
-                        </FormControl>
-                    </FormField>
-                </div>
-
-                <template #footer>
-                    <BaseButtons class="justify-between">
-                        <BaseButton :route-name="stardust.route('settings.project.index')" label="Cancel" color="white" outline />
-                        <BaseButton
-                            type="submit"
-                            color="info"
-                            :icon="mdiContentSave"
-                            label="Create Project"
-                            :class="{ 'opacity-25': form.processing }"
-                            :disabled="form.processing"
-                            class="transition-all hover:shadow-lg"
-                        />
-                    </BaseButtons>
-                </template>
-            </CardBox>
-
-            <!-- Helper Card -->
-            <CardBox
-                class="mt-6 bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-slate-800 dark:to-slate-900 border-l-4 border-blue-500"
-            >
-                <div class="flex items-start gap-4">
-                    <div class="flex-shrink-0">
-                        <div class="w-10 h-10 rounded-full bg-blue-500 dark:bg-blue-600 flex items-center justify-center">
-                            <span class="text-white text-lg">💡</span>
-                        </div>
-                    </div>
-                    <div class="flex-1">
-                        <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">Quick Tips</h3>
-                        <ul class="text-sm text-gray-700 dark:text-gray-300 space-y-1">
-                            <li>• <strong>Label</strong> is a technical identifier (use lowercase and hyphens) </li>
-                            <li>• <strong>Name</strong> is what users will see in the interface - short title</li>
-                            <li>• <strong>Description</strong> helps team members understand the project's purpose</li>
-                        </ul>
-                    </div>
-                </div>
-            </CardBox>
-        </SectionMain>
-    </LayoutAuthenticated>
-</template>
diff --git a/resources/js/Pages/Admin/Project/Edit.vue b/resources/js/Pages/Admin/Project/Edit.vue
deleted file mode 100644
index 4fceaf1..0000000
--- a/resources/js/Pages/Admin/Project/Edit.vue
+++ /dev/null
@@ -1,154 +0,0 @@
-<script lang="ts" setup>
-import { Head, useForm } from '@inertiajs/vue3';
-import { mdiFolderEdit, mdiArrowLeftBoldOutline, mdiFormTextarea, mdiContentSave } from '@mdi/js';
-import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
-import SectionMain from '@/Components/SectionMain.vue';
-import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
-import CardBox from '@/Components/CardBox.vue';
-import FormField from '@/Components/FormField.vue';
-import FormControl from '@/Components/FormControl.vue';
-import BaseButton from '@/Components/BaseButton.vue';
-import BaseButtons from '@/Components/BaseButtons.vue';
-import { stardust } from '@eidellev/adonis-stardust/client';
-
-const props = defineProps({
-    project: {
-        type: Object,
-        required: true,
-    },
-});
-
-const form = useForm({
-    label: props.project.label,
-    name: props.project.name,
-    description: props.project.description,
-});
-
-const submit = async () => {
-    await form.put(stardust.route('settings.project.update', [props.project.id]));
-};
-</script>
-
-<template>
-    <LayoutAuthenticated>
-        <Head :title="`Edit ${project.label}`" />
-        <SectionMain>
-            <SectionTitleLineWithButton :icon="mdiFolderEdit" :title="`Edit: ${project.label}`" main>
-                <BaseButton
-                    :route-name="stardust.route('settings.project.index')"
-                    :icon="mdiArrowLeftBoldOutline"
-                    label="Back"
-                    color="white"
-                    rounded-full
-                    small
-                />
-            </SectionTitleLineWithButton>
-            
-            <CardBox form @submit.prevent="submit()" class="shadow-lg">
-                <div class="grid grid-cols-1 gap-6">
-                    <FormField 
-                        label="Label" 
-                        help="Project label (read-only)" 
-                    >
-                        <FormControl 
-                            v-model="form.label" 
-                            type="text" 
-                            :is-read-only=true                         
-                            class="bg-gray-100 dark:bg-slate-800 cursor-not-allowed opacity-75"
-                        />
-                    </FormField>
-
-                    <FormField 
-                        label="Name" 
-                        help="Required. Project identifier (slug)" 
-                        :class="{ 'text-red-400': form.errors.name }"
-                    >
-                        <FormControl 
-                            v-model="form.name" 
-                            type="text" 
-                            placeholder="Enter Name" 
-                            required 
-                            :error="form.errors.name"
-                            class="font-mono transition-all focus:ring-2 focus:ring-blue-500"
-                        >
-                            <div class="text-red-400 text-sm mt-1" v-if="form.errors.name">
-                                {{ form.errors.name }}
-                            </div>
-                        </FormControl>
-                    </FormField>
-
-                    <FormField
-                        label="Description"
-                        help="Optional. Detailed description of the project"
-                        :class="{ 'text-red-400': form.errors.description }"
-                    >
-                        <FormControl
-                            v-model="form.description"
-                            :icon="mdiFormTextarea"
-                            name="description"
-                            type="textarea"
-                            placeholder="Enter project description..."
-                            :error="form.errors.description"
-                            class="transition-all focus:ring-2 focus:ring-blue-500"
-                        >
-                            <div class="text-red-400 text-sm mt-1" v-if="form.errors.description">
-                                {{ form.errors.description }}
-                            </div>
-                        </FormControl>
-                    </FormField>
-                </div>
-
-                <template #footer>
-                    <BaseButtons class="justify-between">
-                        <BaseButton
-                            :route-name="stardust.route('settings.project.index')"
-                            label="Cancel"
-                            color="white"
-                            outline
-                        />
-                        <BaseButton
-                            type="submit"
-                            color="info"
-                            :icon="mdiContentSave"
-                            label="Save Changes"
-                            :class="{ 'opacity-25': form.processing }"
-                            :disabled="form.processing"
-                            class="transition-all hover:shadow-lg"
-                        />
-                    </BaseButtons>
-                </template>
-            </CardBox>
-
-            <!-- Project Info Card -->
-            <CardBox class="mt-6 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-slate-800 dark:to-slate-900">
-                <div class="flex items-start gap-4">
-                    <div class="flex-shrink-0">
-                        <div class="w-12 h-12 rounded-lg bg-blue-500 dark:bg-blue-600 flex items-center justify-center">
-                            <span class="text-white text-xl font-bold">
-                                {{ project.label.charAt(0).toUpperCase() }}
-                            </span>
-                        </div>
-                    </div>
-                    <div class="flex-1 min-w-0">
-                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-1">
-                            {{ project.label }}
-                        </h3>
-                        <p class="text-sm font-mono text-gray-600 dark:text-gray-400 mb-2">
-                            {{ project.name }}
-                        </p>
-                        <div class="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-500">
-                            <span>
-                                <span class="font-medium">Created:</span> 
-                                {{ new Date(project.created_at).toLocaleDateString() }}
-                            </span>
-                            <span>
-                                <span class="font-medium">Updated:</span> 
-                                {{ new Date(project.updated_at).toLocaleDateString() }}
-                            </span>
-                        </div>
-                    </div>
-                </div>
-            </CardBox>
-        </SectionMain>
-    </LayoutAuthenticated>
-</template>
\ No newline at end of file
diff --git a/resources/js/Pages/Admin/Project/Index.vue b/resources/js/Pages/Admin/Project/Index.vue
deleted file mode 100644
index 93e47c8..0000000
--- a/resources/js/Pages/Admin/Project/Index.vue
+++ /dev/null
@@ -1,182 +0,0 @@
-<script setup>
-import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
-import { mdiFolderMultiple, mdiPlus, mdiSquareEditOutline, mdiTrashCan, mdiAlertBoxOutline } from '@mdi/js';
-import { computed, ref } from 'vue';
-import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
-import SectionMain from '@/Components/SectionMain.vue';
-import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
-import BaseButton from '@/Components/BaseButton.vue';
-import CardBox from '@/Components/CardBox.vue';
-import BaseButtons from '@/Components/BaseButtons.vue';
-import NotificationBar from '@/Components/NotificationBar.vue';
-import CardBoxModal from '@/Components/CardBoxModal.vue';
-import { stardust } from '@eidellev/adonis-stardust/client';
-
-const isModalDangerActive = ref(false);
-const deleteId = ref();
-
-const props = defineProps({
-    projects: {
-        type: Array,
-        default: () => [],
-    },
-    can: {
-        type: Object,
-        default: () => ({}),
-    },
-});
-
-const flash = computed(() => usePage().props.flash);
-
-const projectCount = computed(() => props.projects.length);
-
-const formDelete = useForm({});
-
-const destroy = (id) => {
-    deleteId.value = id;
-    isModalDangerActive.value = true;
-};
-
-const onConfirm = async (id) => {
-    await formDelete.delete(stardust.route('settings.project.destroy', [id]));
-    deleteId.value = null;
-};
-
-const onCancel = () => {
-    deleteId.value = null;
-};
-
-const truncate = (text, length = 30) => {
-    if (!text) return '';
-    return text.length > length ? text.substring(0, length) + '...' : text;
-};
-
-const getProjectColor = (index) => {
-    const colors = [
-        'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
-        'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
-        'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300',
-        'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300',
-        'bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300',
-        'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300',
-    ];
-    return colors[index % colors.length];
-};
-</script>
-
-<template>
-    <CardBoxModal
-        v-model="isModalDangerActive"
-        :delete-id="deleteId"
-        large-title="Delete Project"
-        button="danger"
-        button-label="Delete"
-        has-cancel
-        @confirm="onConfirm"
-        @cancel="onCancel"
-    >
-        <p>Are you sure you want to delete this project?</p>
-        <p>This action cannot be undone.</p>
-    </CardBoxModal>
-
-    <LayoutAuthenticated>
-        <Head title="Projects" />
-        <SectionMain>
-            <SectionTitleLineWithButton :icon="mdiFolderMultiple" title="Projects" main>
-                <div class="flex items-center gap-3">
-                    <span class="text-sm text-gray-500 dark:text-gray-400 font-medium">
-                        {{ projectCount }} {{ projectCount === 1 ? 'project' : 'projects' }}
-                    </span>
-                    <BaseButton
-                        v-if="can.create"
-                        :route-name="stardust.route('settings.project.create')"
-                        :icon="mdiPlus"
-                        label="New Project"
-                        color="info"
-                        rounded-full
-                        small
-                        class="shadow-md hover:shadow-lg transition-shadow"
-                    />
-                </div>
-            </SectionTitleLineWithButton>
-            
-            <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
-                {{ flash.message }}
-            </NotificationBar>
-
-            <CardBox class="mb-6" has-table>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Label</th>
-                            <th>Name</th>
-                            <th v-if="can.edit || can.delete">Actions</th>
-                        </tr>
-                    </thead>
-
-                    <tbody>
-                        <tr v-if="projects.length === 0">
-                            <td colspan="3" class="text-center py-12">
-                                <div class="flex flex-col items-center justify-center text-gray-500 dark:text-gray-400">
-                                    <mdiFolderMultiple class="w-16 h-16 mb-4 opacity-50" />
-                                    <p class="text-lg font-medium mb-2">No projects yet</p>
-                                    <p class="text-sm mb-4">Get started by creating your first project</p>
-                                    <BaseButton
-                                        v-if="can.create"
-                                        :route-name="stardust.route('settings.project.create')"
-                                        :icon="mdiPlus"
-                                        label="Create Project"
-                                        color="info"
-                                        small
-                                    />
-                                </div>
-                            </td>
-                        </tr>
-                        <tr v-for="(project, index) in projects" :key="project.id" class="hover:bg-gray-50 dark:hover:bg-slate-800 transition-colors">
-                            <td data-label="Label">
-                                <!-- <Link
-                                    :href="stardust.route('settings.project.show', [project.id])"
-                                    class="no-underline hover:underline"
-                                > -->
-                                    <span 
-                                        class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium transition-all hover:shadow-md"
-                                        :class="getProjectColor(index)"
-                                        :title="project.label"
-                                    >
-                                        {{ truncate(project.label, 30) }}
-                                    </span>
-                                <!-- </Link> -->
-                            </td>
-                            <td data-label="Name">
-                                <span 
-                                    class="text-gray-700 dark:text-gray-300 font-mono text-sm"
-                                    :title="project.name"
-                                >
-                                    {{ truncate(project.name, 40) }}
-                                </span>
-                            </td>
-                            <td v-if="can.edit || can.delete" class="before:hidden lg:w-1 whitespace-nowrap">
-                                <BaseButtons type="justify-start lg:justify-end" no-wrap>
-                                    <BaseButton
-                                        v-if="can.edit"
-                                        :route-name="stardust.route('settings.project.edit', [project.id])"
-                                        color="info"
-                                        :icon="mdiSquareEditOutline"
-                                        small
-                                    />
-                                    <BaseButton
-                                        v-if="can.delete"
-                                        color="danger"
-                                        :icon="mdiTrashCan"
-                                        small
-                                        @click="destroy(project.id)"
-                                    />
-                                </BaseButtons>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </CardBox>
-        </SectionMain>
-    </LayoutAuthenticated>
-</template>
\ No newline at end of file
diff --git a/resources/js/Pages/Admin/Role/Index.vue b/resources/js/Pages/Admin/Role/Index.vue
index e9c1f0a..77aa1ff 100644
--- a/resources/js/Pages/Admin/Role/Index.vue
+++ b/resources/js/Pages/Admin/Role/Index.vue
@@ -1,7 +1,7 @@
-<script lang="ts" setup>
+<script setup>
 import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
 import { mdiAccountKey, mdiPlus, mdiSquareEditOutline, mdiTrashCan, mdiAlertBoxOutline } from '@mdi/js';
-import { computed, ref, ComputedRef } from 'vue';
+import { computed, ref } from 'vue';
 import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
 import SectionMain from '@/Components/SectionMain.vue';
 import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
@@ -9,23 +9,18 @@ import BaseButton from '@/Components/BaseButton.vue';
 import CardBox from '@/Components/CardBox.vue';
 import BaseButtons from '@/Components/BaseButtons.vue';
 import NotificationBar from '@/Components/NotificationBar.vue';
-import CardBoxModal from '@/Components/CardBoxModal.vue';
+import Pagination from '@/Components/Admin/Pagination.vue';
 import Sort from '@/Components/Admin/Sort.vue';
 import { stardust } from '@eidellev/adonis-stardust/client';
-
-interface Role {
-    id: number;
-    name: string;
-    description: string;
-}
+import CardBoxModal from '@/Components/CardBoxModal.vue';
 
 const isModalDangerActive = ref(false);
 const deleteId = ref();
 
 const props = defineProps({
     roles: {
-        type: Array<Role>,
-        default: () => [],
+        type: Object,
+        default: () => ({}),
     },
     filters: {
         type: Object,
@@ -37,89 +32,88 @@ const props = defineProps({
     },
 });
 
-const flash: ComputedRef<any> = computed(() => usePage().props.flash);
+const flash = computed(() => {
+    // let test = usePage();
+    // console.log(test);
+    return usePage().props.flash;
+});
 
-// const form = useForm({
-//     search: props.filters.search,
-// });
-
-const roleCount = computed(() => props.roles.length);
+const form = useForm({
+    search: props.filters.search,
+});
 
 const formDelete = useForm({});
-
-const destroy = (id: number) => {
+const destroy = (id, e) => {
+    // console.log(id);
     deleteId.value = id;
     isModalDangerActive.value = true;
 };
 
-const onConfirm = async (id: number) => {
+const onConfirm = async (id) => {
+    // let id = 6;
     await formDelete.delete(stardust.route('settings.role.destroy', [id]));
     deleteId.value = null;
 };
 
-const onCancel = () => {
+const onCancel = (id) => {
+    // console.log('cancel');
     deleteId.value = null;
 };
-
-const getRoleColor = (index: number) => {
-    const colors = [
-        'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300',
-        'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
-        'bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300',
-        'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300',
-        'bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-300',
-        'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300',
-    ];
-    return colors[index % colors.length];
-};
-
-const truncate = (text: string, length = 50) => {
-    if (!text) return '-';
-    return text.length > length ? text.substring(0, length) + '...' : text;
-};
 </script>
 
 <template>
     <CardBoxModal
         v-model="isModalDangerActive"
         :delete-id="deleteId"
-        large-title="Delete Role"
+        large-title="Please confirm"
         button="danger"
         button-label="Delete"
         has-cancel
-        @confirm="onConfirm"
-        @cancel="onCancel"
+        v-on:confirm="onConfirm"
+        v-on:cancel="onCancel"
     >
-        <p>Are you sure you want to delete this role?</p>
-        <p>This action cannot be undone.</p>
+        <p>Lorem ipsum dolor sit amet <b>adipiscing elit</b></p>
+        <p>This is sample modal</p>
     </CardBoxModal>
 
     <LayoutAuthenticated>
         <Head title="Roles" />
         <SectionMain>
             <SectionTitleLineWithButton :icon="mdiAccountKey" title="Roles" main>
-                <div class="flex items-center gap-3">
-                    <span class="text-sm text-gray-500 dark:text-gray-400 font-medium">
-                        {{ roleCount }} {{ roleCount === 1 ? 'role' : 'roles' }}
-                    </span>
-                    <BaseButton
-                        v-if="can.create"
-                        :route-name="stardust.route('settings.role.create')"
-                        :icon="mdiPlus"
-                        label="New Role"
-                        color="info"
-                        rounded-full
-                        small
-                        class="shadow-md hover:shadow-lg transition-shadow"
-                    />
-                </div>
+                <BaseButton
+                    v-if="can.create"
+                    :route-name="stardust.route('settings.role.create')"
+                    :icon="mdiPlus"
+                    label="Add"
+                    color="info"
+                    rounded-full
+                    small
+                />
             </SectionTitleLineWithButton>
-
             <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
                 {{ flash.message }}
             </NotificationBar>
-
             <CardBox class="mb-6" has-table>
+                <!-- <form @submit.prevent="form.get(stardust.route('role.index'))">
+					<div class="py-2 flex">
+						<div class="flex pl-4">
+							<input
+								type="search"
+								v-model="form.search"
+								class="rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+								placeholder="Search"
+							/>
+							<BaseButton
+								label="Search"
+								type="submit"
+								color="info"
+								class="ml-4 inline-flex items-center px-4 py-2"
+							/>
+						</div>
+					</div>
+				</form> -->
+            </CardBox>
+            <CardBox class="mb-6" has-form-data>
                 <table>
                     <thead>
                         <tr>
@@ -134,42 +128,17 @@ const truncate = (text: string, length = 50) => {
                     </thead>
 
                     <tbody>
-                        <tr v-if="roles.length === 0">
-                            <td colspan="3" class="text-center py-12">
-                                <div class="flex flex-col items-center justify-center text-gray-500 dark:text-gray-400">
-                                    <p class="text-lg font-medium mb-2">No roles yet</p>
-                                    <p class="text-sm mb-4">Get started by creating your first role</p>
-                                    <BaseButton
-                                        v-if="can.create"
-                                        :route-name="stardust.route('settings.role.create')"
-                                        :icon="mdiPlus"
-                                        label="Create Role"
-                                        color="info"
-                                        small
-                                    />
-                                </div>
-                            </td>
-                        </tr>
-                        <tr
-                            v-for="(role, index) in roles"
-                            :key="role.id"
-                            class="hover:bg-gray-50 dark:hover:bg-slate-800 transition-colors"
-                        >
+                        <tr v-for="role in roles" :key="role.id">
                             <td data-label="Name">
-                                <Link :href="stardust.route('settings.role.show', [role.id])" class="no-underline hover:underline">
-                                    <span
-                                        class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium transition-all hover:shadow-md"
-                                        :class="getRoleColor(index)"
-                                        :title="role.name"
-                                    >
-                                        {{ role.name }}
-                                    </span>
+                                <Link
+                                    :href="stardust.route('settings.role.show', [role.id])"
+                                    class="no-underline hover:underline text-cyan-600 dark:text-cyan-400"
+                                >
+                                    {{ role.name }}
                                 </Link>
                             </td>
                             <td data-label="Description">
-                                <span class="text-gray-700 dark:text-gray-300 text-sm" :title="role.description">
-                                    {{ truncate(role.description, 50) }}
-                                </span>
+                                {{ role.description }}
                             </td>
                             <td v-if="can.edit || can.delete" class="before:hidden lg:w-1 whitespace-nowrap">
                                 <BaseButtons type="justify-start lg:justify-end" no-wrap>
@@ -180,12 +149,21 @@ const truncate = (text: string, length = 50) => {
                                         :icon="mdiSquareEditOutline"
                                         small
                                     />
-                                    <BaseButton v-if="can.delete" color="danger" :icon="mdiTrashCan" small @click="destroy(role.id)" />
+                                    <!-- <BaseButton
+                                        v-if="can.delete"
+                                        color="danger"
+                                        :icon="mdiTrashCan"
+                                        small
+                                        @click="($event) => destroy(role.id, $event)"
+                                    /> -->                                   
                                 </BaseButtons>
                             </td>
                         </tr>
                     </tbody>
                 </table>
+                <!-- <div class="py-4">
+					<Pagination v-bind:data="roles.meta" />
+				</div> -->
             </CardBox>
         </SectionMain>
     </LayoutAuthenticated>
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index 57b5d44..17e1a58 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Head, usePage } from '@inertiajs/vue3';
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import { MainService } from '@/Stores/main';
 import {
     mdiAccountMultiple,
@@ -10,7 +10,6 @@ import {
     mdiMonitorCellphone,
     mdiReload,
     mdiChartPie,
-    mdiTrendingUp,
 } from '@mdi/js';
 import LineChart from '@/Components/Charts/LineChart.vue';
 import SectionMain from '@/Components/SectionMain.vue';
@@ -19,37 +18,47 @@ import CardBox from '@/Components/CardBox.vue';
 import TableSampleClients from '@/Components/TableSampleClients.vue';
 import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
 import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
+// import SectionBannerStarOnGitHub from '@/Components/SectionBannerStarOnGitea.vue';
 import CardBoxDataset from '@/Components/CardBoxDataset.vue';
 import type { User } from '@/Dataset';
+const mainService = MainService()
 
-const mainService = MainService();
-
-const isLoadingChart = ref(false);
-
+// const chartData = ref();
 const fillChartData = async () => {
-    isLoadingChart.value = true;
-    try {
-        await mainService.fetchChartData();
-    } finally {
-        isLoadingChart.value = false;
-    }
+    await mainService.fetchChartData();
+    // chartData.value = chartConfig.sampleChartData();
+    // chartData.value = mainService.graphData;
 };
-
 const chartData = computed(() => mainService.graphData);
-const authors = computed(() => mainService.authors);
-const datasets = computed(() => mainService.datasets);
-const datasetBarItems = computed(() => mainService.datasets.slice(0, 5));
-const submitters = computed(() => mainService.clients);
-const user = computed(() => usePage().props.authUser as User);
+// onMounted(async () => {
+//     await mainService.fetchChartData("2022");
+// });
+
+// mainService.fetch('clients');
+// mainService.fetch('history');
+
+// mainService.fetchApi('authors');
+// mainService.fetchApi('datasets');
+
+// const clientBarItems = computed(() => mainService.clients.slice(0, 4));
+// const transactionBarItems = computed(() => mainService.history);
 
-// Initialize data
 mainService.fetchApi('clients');
 mainService.fetchApi('authors');
 mainService.fetchApi('datasets');
 mainService.fetchChartData();
 
+// const authorBarItems = computed(() => mainService.authors.slice(0, 5));
+const authors = computed(() => mainService.authors);
+const datasets = computed(() => mainService.datasets);
+const datasetBarItems = computed(() => mainService.datasets.slice(0, 5));
+const submitters = computed(() => mainService.clients);
+const user = computed(() => {
+    return usePage().props.authUser as User;
+});
+
 const userHasRoles = (roleNames: Array<string>): boolean => {
-    return user.value.roles.some((role) => roleNames.includes(role.name));
+    return user.value.roles.some(role => roleNames.includes(role.name));
 };
 </script>
 
@@ -58,13 +67,18 @@ const userHasRoles = (roleNames: Array<string>): boolean => {
         <Head title="Dashboard" />
 
         <SectionMain>
-            <SectionTitleLineWithButton :icon="mdiChartTimelineVariant" title="Dashboard Overview" main>
-                <div class="text-sm text-gray-500 dark:text-gray-400">
-                    Welcome back, <span class="font-semibold">{{ user.login }}</span>
-                </div>
+            <SectionTitleLineWithButton v-bind:icon="mdiChartTimelineVariant" title="Overview" main>
+                <!-- <BaseButton
+                    href=""
+                    target="_blank"
+                    :icon="mdiGithub"
+                    label="Star on GeoSphere Forgejo"
+                    color="contrast"
+                    rounded-full
+                    small
+                /> -->
             </SectionTitleLineWithButton>
 
-            <!-- Stats Grid -->
             <div class="grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6">
                 <CardBoxWidget
                     trend="12%"
@@ -73,28 +87,25 @@ const userHasRoles = (roleNames: Array<string>): boolean => {
                     :icon="mdiAccountMultiple"
                     :number="authors.length"
                     label="Authors"
-                    class="hover:shadow-lg transition-shadow duration-300"
-                />
-                <CardBoxWidget
+                />              
+                <CardBoxWidget                    
                     trend-type="info"
                     color="text-blue-500"
                     :icon="mdiDatabaseOutline"
                     :number="datasets.length"
                     label="Publications"
-                    class="hover:shadow-lg transition-shadow duration-300"
-                />
-                <CardBoxWidget
+                />               
+                <CardBoxWidget                    
                     trend-type="up"
                     color="text-purple-500"
                     :icon="mdiChartTimelineVariant"
                     :number="submitters.length"
                     label="Submitters"
-                    class="hover:shadow-lg transition-shadow duration-300"
                 />
             </div>
 
-                 <!-- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-               <div class="flex flex-col justify-between">
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+                <!-- <div class="flex flex-col justify-between">
                     <CardBoxClient
                         v-for="client in authorBarItems"
                         :key="client.id"
@@ -105,7 +116,7 @@ const userHasRoles = (roleNames: Array<string>): boolean => {
                         :count="client.dataset_count"
                         
                     />
-                </div>  <!-- 
+                </div> -->
                 <div class="flex flex-col justify-between">
                     <CardBoxDataset
                         v-for="(dataset, index) in datasetBarItems"
@@ -113,63 +124,22 @@ const userHasRoles = (roleNames: Array<string>): boolean => {
                        :dataset="dataset"
                     />
                 </div>
-            </div> 
-
-            <!-- Recent Datasets Section -->
-            <div v-if="datasetBarItems.length > 0" class="mb-6">
-                <SectionTitleLineWithButton :icon="mdiTrendingUp" title="Recent Publications">
-                    <span class="text-sm text-gray-500 dark:text-gray-400"> Latest {{ datasetBarItems.length }} publications </span>
-                </SectionTitleLineWithButton>
-
-                <div class="grid grid-cols-1 gap-4">
-                    <CardBoxDataset
-                        v-for="(dataset, index) in datasetBarItems"
-                        :key="index"
-                        :dataset="dataset"
-                        class="hover:shadow-md transition-all duration-300"
-                    />
-                </div>
             </div>
 
             <!-- <SectionBannerStarOnGitHub /> -->
 
-            <!-- Chart Section -->
-            <SectionTitleLineWithButton :icon="mdiChartPie" title="Trends Overview" class="mt-8">
-                <span class="text-sm text-gray-500 dark:text-gray-400"> Publications per month </span>
-            </SectionTitleLineWithButton>
-
-            <CardBox
-                title="Performance"
-                :icon="mdiFinance"
-                :header-icon="mdiReload"
-                class="mb-6 shadow-lg"
-                @header-icon-click="fillChartData"
-            >
-                <div v-if="isLoadingChart" class="flex items-center justify-center h-96">
-                    <div class="flex flex-col items-center gap-3">
-                        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
-                        <p class="text-sm text-gray-500 dark:text-gray-400">Loading chart data...</p>
-                    </div>
-                </div>
-                <div v-else-if="chartData" class="relative">
+            <SectionTitleLineWithButton :icon="mdiChartPie" title="Trends overview: Publications per month" ></SectionTitleLineWithButton>
+            <CardBox title="Performance" :icon="mdiFinance" :header-icon="mdiReload" class="mb-6" @header-icon-click="fillChartData">
+                <div v-if="chartData">
                     <line-chart :data="chartData" class="h-96" />
                 </div>
-                <div v-else class="flex items-center justify-center h-96 text-gray-500 dark:text-gray-400">
-                    <p>No chart data available</p>
-                </div>
             </CardBox>
 
-            <!-- Admin Section -->
-            <template v-if="userHasRoles(['administrator'])">
-                <SectionTitleLineWithButton :icon="mdiAccountMultiple" title="Submitters Management" class="mt-8">
-                    <span class="text-sm text-gray-500 dark:text-gray-400"> Administrator view </span>
-                </SectionTitleLineWithButton>
-
-                <CardBox :icon="mdiMonitorCellphone" title="All Submitters" has-table class="shadow-lg">
-                    <TableSampleClients />
-                </CardBox>
-            </template>
-
+            <SectionTitleLineWithButton v-if="userHasRoles(['administrator'])" :icon="mdiAccountMultiple" title="Submitters" />
+            <!-- <NotificationBar color="info" :icon="mdiMonitorCellphone"> <b>Responsive table.</b> Collapses on mobile </NotificationBar> -->
+            <CardBox v-if="userHasRoles(['administrator'])" :icon="mdiMonitorCellphone" title="Responsive table" has-table>
+                <TableSampleClients />
+            </CardBox>
         </SectionMain>
     </LayoutAuthenticated>
 </template>
diff --git a/resources/js/Pages/Submitter/Dataset/Edit.vue b/resources/js/Pages/Submitter/Dataset/Edit.vue
index 027bbc2..11184ac 100644
--- a/resources/js/Pages/Submitter/Dataset/Edit.vue
+++ b/resources/js/Pages/Submitter/Dataset/Edit.vue
@@ -1,55 +1,25 @@
-<!-- 1. Add progress indicator at the top -->
 <template>
     <LayoutAuthenticated>
         <Head title="Edit dataset" />
-
-        <!-- Progress Bar for Unsaved Changes -->
-        <!-- Progress Bar for Unsaved Changes -->
-        <div v-if="hasUnsavedChanges" class="fixed top-0 left-0 right-0 z-50 bg-amber-500 text-white px-4 py-2.5 text-sm shadow-lg h-14">
-            <div class="container mx-auto flex items-center justify-between h-full">
-                <div class="flex items-center gap-2">
-                    <svg class="animate-pulse w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                        <path
-                            fill-rule="evenodd"
-                            d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-                            clip-rule="evenodd"
-                        />
-                    </svg>
-                    <span class="font-medium">You have unsaved changes</span>
-                </div>
-                <BaseButton @click="submitAlternative" label="Save Now" color="white" small :disabled="form.processing" />
-            </div>
-        </div>
-
         <SectionMain>
-            <!-- Enhanced Title Section -->
-            <SectionTitleLineWithButton :icon="mdiImageText" title="Update Dataset" main>
-                <div class="flex items-center gap-3">
-                    <!-- Dataset Status Badge -->
-                    <!-- <span
-                        class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300"
-                    >
-                        Draft
-                    </span> -->
-                    <BaseButton
-                        :route-name="stardust.route('dataset.list')"
-                        :icon="mdiArrowLeftBoldOutline"
-                        label="Back"
-                        color="white"
-                        rounded-full
-                        small
-                    />
-                </div>
+            <SectionTitleLineWithButton :icon="mdiImageText" title="Update dataset" main>
+                <BaseButton
+                    :route-name="stardust.route('dataset.list')"
+                    :icon="mdiArrowLeftBoldOutline"
+                    label="Back"
+                    color="white"
+                    rounded-full
+                    small
+                />
             </SectionTitleLineWithButton>
 
-            <!-- Success/Error Notifications -->
             <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
                 {{ flash.message }}
             </NotificationBar>
             <FormValidationErrors v-bind:errors="errors" />
 
-            <!-- Main Form with Sections -->
-            <CardBox :form="true" class="shadow-lg">
+            <!-- @auto-save="submitAlternative" -->
+            <CardBox :form="true">
                 <UnsavedChangesWarning
                     :show="hasUnsavedChanges"
                     :changes-summary="getChangesSummary()"
@@ -59,39 +29,58 @@
                     :auto-save-delay="30"
                     @save="submitAlternative"
                 />
-                <!-- Collapsible Sections for Better Organization -->
-
-                <!-- Section 1: Basic Information -->
-                <div class="mb-8">
-                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
-                        <span class="w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center text-sm">1</span>
-                        Basic Information
-                    </h2>
-
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 ml-10">
-                        <!-- (1) Language -->
+                <div class="mb-4">
+                    <div class="flex flex-col md:flex-row">
+                        <!-- (1) language field -->
                         <FormField
                             label="Language *"
                             help="required: select dataset main language"
                             :class="{ 'text-red-400': form.errors.language }"
+                            class="w-full flex-1"
                         >
                             <FormControl
                                 required
                                 v-model="form.language"
-                                type="select"
+                                :type="'select'"
                                 placeholder="[Enter Language]"
                                 :errors="form.errors.language"
                                 :options="{ de: 'de', en: 'en' }"
                             >
-                             <div class="text-red-400 text-sm" v-if="form.errors.language">
+                                <div class="text-red-400 text-sm" v-if="form.errors.language">
                                     {{ form.errors.language.join(', ') }}
                                 </div>
                             </FormControl>
                         </FormField>
+                    </div>
 
+                    <!-- (2) licenses -->
+                    <FormField label="Licenses" wrap-body :class="{ 'text-red-400': form.errors.licenses }" class="mt-8 w-full mx-2 flex-1">
+                        <FormCheckRadioGroup
+                            type="radio"
+                            v-model="form.licenses"
+                            name="licenses"
+                            is-column
+                            :options="licenses"
+                            :key="`licenses-${Date.now()}-${JSON.stringify(form.licenses)}`"
+                        />
+                    </FormField>
+                    <!-- Add this temporarily near your licenses FormField for debugging -->
+                    <!-- <div v-if="true" class="border p-2 mb-2 text-xs bg-gray-50">
+                        <strong>Debug - Licenses:</strong><br />
+                        Form licenses: {{ JSON.stringify(form.licenses) }}<br />
+                        Original licenses: {{ JSON.stringify(originalDataset.licenses) }}<br />
+                        License options: {{ JSON.stringify(Object.keys(licenses)) }}
+                    </div> -->
+
+                    <div class="flex flex-col md:flex-row">
                         <!-- (3) dataset_type -->
-                        <FormField label="Dataset Type *" help="required: dataset type" :class="{ 'text-red-400': form.errors.type }">
-                             <FormControl
+                        <FormField
+                            label="Dataset Type *"
+                            help="required: dataset type"
+                            :class="{ 'text-red-400': form.errors.type }"
+                            class="w-full mx-2 flex-1"
+                        >
+                            <FormControl
                                 required
                                 v-model="form.type"
                                 :type="'select'"
@@ -126,40 +115,17 @@
                             </FormControl>
                         </FormField>
                     </div>
-                </div>
 
-                <BaseDivider />
+                    <BaseDivider />
 
-                <!-- Section 2: Licenses -->
-                <div class="mb-8">
-                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
-                        <span class="w-8 h-8 rounded-full bg-green-500 text-white flex items-center justify-center text-sm">2</span>
-                        Licenses
-                    </h2>
-
-                    <div class="ml-10">
-                        <!-- (2) licenses -->
-                        <FormField label="Select License" wrap-body :class="{ 'text-red-400': form.errors.licenses }">
-                            <FormCheckRadioGroup type="radio" v-model="form.licenses" name="licenses" is-column :options="licenses" />
-                        </FormField>
-                    </div>
-                </div>
-
-                <BaseDivider />
-
-                <!-- Section 3: Titles -->
-                <div class="mb-8">
-                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
-                        <span class="w-8 h-8 rounded-full bg-purple-500 text-white flex items-center justify-center text-sm">3</span>
-                        Titles
-                    </h2>
                     <!-- (5) titles -->
                     <CardBox
-                        class="ml-10 shadow-md"
-                        title="Main & Additional Titles"
+                        class="mb-6 shadow"
+                        :has-form-data="false"
+                        title="Titles"
                         :icon="mdiFinance"
                         :header-icon="mdiPlusCircle"
-                        @header-icon-click="addTitle()"
+                        v-on:header-icon-click="addTitle()"
                     >
                         <div class="flex flex-col md:flex-row">
                             <FormField
@@ -272,23 +238,15 @@
                             </tbody>
                         </table>
                     </CardBox>
-                </div>
 
-                <BaseDivider />
-
-                <!-- Section 4: Descriptions -->
-                <div class="mb-8">
-                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
-                        <span class="w-8 h-8 rounded-full bg-orange-500 text-white flex items-center justify-center text-sm">4</span>
-                        Descriptions
-                    </h2>
                     <!-- (6) descriptions -->
                     <CardBox
-                        class="ml-10 shadow-md"
-                        title="Abstract & Additional Descriptions"
+                        class="mb-6 shadow"
+                        :has-form-data="false"
+                        title="Descriptions"
                         :icon="mdiFinance"
                         :header-icon="mdiPlusCircle"
-                        @header-icon-click="addDescription()"
+                        v-on:header-icon-click="addDescription()"
                     >
                         <div class="flex flex-col md:flex-row">
                             <FormField
@@ -401,52 +359,35 @@
                             </tbody>
                         </table>
                     </CardBox>
-                </div>
 
-                <BaseDivider />
-
-                <!-- Section 5: People (Authors & Contributors) -->
-                <div class="mb-8">
-                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
-                        <span class="w-8 h-8 rounded-full bg-pink-500 text-white flex items-center justify-center text-sm">5</span>
-                        Creators & Contributors
-                    </h2>
-
-                    <div class="ml-10 space-y-6">
-                        <!-- (7) authors -->
-                        <CardBox
-                            class="shadow-md"
-                            has-table
-                            title="Creators"
-                            :icon="mdiBookOpenPageVariant"
-                            :header-icon="mdiPlusCircle"
-                            @header-icon-click="addNewAuthor()"
-                        >
-                            <div
-                                class="mb-4 p-3 bg-blue-50 dark:bg-slate-800 rounded-lg text-sm text-blue-800 dark:text-blue-300 flex items-start gap-2"
-                            >
-                                <BaseIcon :path="mdiAlertBoxOutline" class="flex-shrink-0 mt-0.5" />
-                                <span>Search for existing persons or add new ones manually. Creators are displayed in citation order.</span>
-                            </div>
-                            <div class="mb-2 text-gray-600 text-sm flex items-center gap-2">
-                                <span>Add creators by searching existing persons or manually adding new ones.</span>
-                                <BaseIcon
-                                    :path="mdiAlertBoxOutline"
-                                    class="text-blue-400"
-                                    title="You can add existing persons via search, or create new ones manually."
+                    <!-- (7) authors -->
+                    <CardBox
+                        class="mb-6 shadow"
+                        has-table
+                        title="Creators"
+                        :icon="mdiBookOpenPageVariant"
+                        :header-icon="mdiPlusCircle"
+                        v-on:header-icon-click="addNewAuthor()"
+                    >
+                        <div class="mb-2 text-gray-600 text-sm flex items-center gap-2">
+                            <span>Add creators by searching existing persons or manually adding new ones.</span>
+                            <BaseIcon
+                                :path="mdiAlertBoxOutline"
+                                class="text-blue-400"
+                                title="You can add existing persons via search, or create new ones manually."
+                            />
+                        </div>
+                        <div class="flex flex-col md:flex-row gap-4 mb-4">
+                            <div class="flex-1">
+                                <!-- <label class="block text-xs font-semibold mb-1">Find existing person</label> -->
+                                <SearchAutocomplete
+                                    source="/api/persons"
+                                    :response-property="'first_name'"
+                                    placeholder="Search for existing persons..."
+                                    v-on:person="onAddAuthor"
                                 />
                             </div>
-                            <div class="flex flex-col md:flex-row gap-4 mb-4">
-                                <div class="flex-1">
-                                    <!-- <label class="block text-xs font-semibold mb-1">Find existing person</label> -->
-                                    <SearchAutocomplete
-                                        source="/api/persons"
-                                        :response-property="'first_name'"
-                                        placeholder="Search for existing persons..."
-                                        v-on:person="onAddAuthor"
-                                    />
-                                </div>
-                                <!-- <div class="flex-1 flex items-end">
+                            <!-- <div class="flex-1 flex items-end">
                                 <BaseButton
                                     :icon="mdiPlusCircle"
                                     @click.prevent="addNewAuthor"
@@ -456,299 +397,104 @@
                                     title="Add new creator manually"
                                 />
                             </div> -->
-                            </div>
-                            <TablePersons
-                                :persons="form.authors"
-                                v-if="form.authors.length > 0"
-                                :errors="form.errors"
-                                :relation="'authors'"
-                            />
-                            <div class="text-red-400 text-sm" v-if="form.errors.authors && Array.isArray(form.errors.authors)">
-                                {{ form.errors.authors.join(', ') }}
-                            </div>
-                        </CardBox>
-
-                        <!-- (8) contributors -->
-                        <CardBox
-                            class="shadow-md"
-                            has-table
-                            title="Contributors"
-                            :icon="mdiBookOpenPageVariant"
-                            :header-icon="mdiPlusCircle"
-                            @header-icon-click="addNewContributor()"
-                        >
-                            <div class="mb-2 text-gray-600 text-sm flex items-center gap-2">
-                                <span>Add contributors by searching existing persons or manually adding new ones.</span>
-                                <BaseIcon
-                                    :path="mdiAlertBoxOutline"
-                                    class="text-blue-400"
-                                    title="You can add existing persons via search, or create new ones manually."
-                                />
-                            </div>
-                            <SearchAutocomplete
-                                source="/api/persons"
-                                :response-property="'first_name'"
-                                placeholder="search in person table...."
-                                v-on:person="onAddContributor"
-                            >
-                            </SearchAutocomplete>
-
-                            <TablePersons
-                                :persons="form.contributors"
-                                v-if="form.contributors.length > 0"
-                                :contributortypes="contributorTypes"
-                                :errors="form.errors"
-                                :relation="'contributors'"
-                            />
-                            <div class="text-red-400 text-sm" v-if="form.errors.contributors && Array.isArray(form.errors.contributors)">
-                                {{ form.errors.contributors.join(', ') }}
-                            </div>
-                        </CardBox>
-                    </div>
-                </div>
-
-                <BaseDivider />
-
-                <!-- Section 6: Additional Metadata -->
-                <div class="mb-8">
-                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
-                        <span class="w-8 h-8 rounded-full bg-indigo-500 text-white flex items-center justify-center text-sm">6</span>
-                        Additional Metadata
-                    </h2>
-
-                    <div class="ml-10 space-y-6">
-                        <!-- Project & Embargo -->
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                            <!-- (9) project_id -->
-                            <FormField
-                                label="Project.."
-                                help="project is optional"
-                                :class="{ 'text-red-400': form.errors.project_id }"
-                                class="w-full mx-2 flex-1"
-                            >
-                                <FormControl
-                                    required
-                                    v-model="form.project_id"
-                                    :type="'select'"
-                                    placeholder="[Select Project]"
-                                    :errors="form.errors.project_id"
-                                    :options="projects"
-                                >
-                                    <div class="text-red-400 text-sm" v-if="form.errors.project_id">
-                                        {{ form.errors.project_id.join(', ') }}
-                                    </div>
-                                </FormControl>
-                            </FormField>
-
-                            <!-- (10) embargo_date -->
-                            <FormField
-                                label="Embargo Date.."
-                                help="embargo date is optional"
-                                :class="{ 'text-red-400': form.errors.embargo_date }"
-                                class="w-full mx-2 flex-1"
-                            >
-                                <FormControl
-                                    v-model="form.embargo_date"
-                                    :type="'date'"
-                                    placeholder="date('y-m-d')"
-                                    :errors="form.errors.embargo_date"
-                                >
-                                    <div class="text-red-400 text-sm" v-if="form.errors.embargo_date">
-                                        {{ form.errors.embargo_date.join(', ') }}
-                                    </div>
-                                </FormControl>
-                            </FormField>
                         </div>
+                        <TablePersons :persons="form.authors" v-if="form.authors.length > 0" :errors="form.errors" :relation="'authors'" />
+                        <div class="text-red-400 text-sm" v-if="form.errors.authors && Array.isArray(form.errors.authors)">
+                            {{ form.errors.authors.join(', ') }}
+                        </div>
+                    </CardBox>
 
-                        <!-- Keywords -->
-                        <CardBox
-                            class="shadow-md"
-                            has-table
-                            title="Keywords"
-                            :icon="mdiEarthPlus"
-                            :header-icon="mdiPlusCircle"
-                            @header-icon-click="addKeyword"
-                        >
-                            <TableKeywords
-                                :keywords="form.subjects"
-                                :errors="form.errors"
-                                :subjectTypes="subjectTypes"
-                                v-model:subjects-to-delete="form.subjectsToDelete"
-                                v-if="form.subjects.length > 0"
+                    <!-- (8) contributors -->
+                    <CardBox
+                        class="mb-6 shadow"
+                        has-table
+                        title="Contributors"
+                        :icon="mdiBookOpenPageVariant"
+                        :header-icon="mdiPlusCircle"
+                        v-on:header-icon-click="addNewContributor()"
+                    >
+                    <div class="mb-2 text-gray-600 text-sm flex items-center gap-2">
+                            <span>Add contributors by searching existing persons or manually adding new ones.</span>
+                            <BaseIcon
+                                :path="mdiAlertBoxOutline"
+                                class="text-blue-400"
+                                title="You can add existing persons via search, or create new ones manually."
                             />
-                        </CardBox>
-
-                        <!-- References -->
-                        <CardBox
-                            class="shadow-md"
-                            has-table
-                            title="Dataset References"
-                            :icon="mdiEarthPlus"
-                            :header-icon="mdiPlusCircle"
-                            @header-icon-click="addReference"
+                        </div>
+                        <SearchAutocomplete
+                            source="/api/persons"
+                            :response-property="'first_name'"
+                            placeholder="search in person table...."
+                            v-on:person="onAddContributor"
                         >
-                            <!-- Message when no references exist -->
-                            <div v-if="form.references.length === 0" class="text-center py-4">
-                                <p class="text-gray-600">No references added yet.</p>
-                                <p class="text-gray-400">Click the plus icon above to add a new reference.</p>
-                            </div>
-                            <!-- Reference form -->
-                            <table class="table-fixed border-green-900" v-if="form.references.length">
-                                <thead>
-                                    <tr>
-                                        <th class="w-4/12">Value</th>
-                                        <th class="w-2/12">Type</th>
-                                        <th class="w-3/12">Relation</th>
-                                        <th class="w-2/12">Label</th>
-                                        <th class="w-1/12"></th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr v-for="(item, index) in form.references">
-                                        <td data-label="Reference Value">
-                                            <!-- <input name="Reference Value" class="form-control"
-                                                placeholder="[VALUE]" v-model="item.value" /> -->
-                                            <FormControl
-                                                required
-                                                v-model="item.value"
-                                                :type="'text'"
-                                                placeholder="[VALUE]"
-                                                :errors="form.errors.embargo_date"
-                                            >
-                                                <div
-                                                    class="text-red-400 text-sm"
-                                                    v-if="
-                                                        form.errors[`references.${index}.value`] &&
-                                                        Array.isArray(form.errors[`references.${index}.value`])
-                                                    "
-                                                >
-                                                    {{ form.errors[`references.${index}.value`].join(', ') }}
-                                                </div>
-                                            </FormControl>
-                                        </td>
-                                        <td>
-                                            <FormControl
-                                                required
-                                                v-model="form.references[index].type"
-                                                type="select"
-                                                :options="referenceIdentifierTypes"
-                                                placeholder="[type]"
-                                            >
-                                                <div
-                                                    class="text-red-400 text-sm"
-                                                    v-if="Array.isArray(form.errors[`references.${index}.type`])"
-                                                >
-                                                    {{ form.errors[`references.${index}.type`].join(', ') }}
-                                                </div>
-                                            </FormControl>
-                                        </td>
+                        </SearchAutocomplete>
 
-                                        <td>
-                                            <FormControl
-                                                required
-                                                v-model="form.references[index].relation"
-                                                type="select"
-                                                :options="relationTypes"
-                                                placeholder="[relation type]"
-                                            >
-                                                <div
-                                                    class="text-red-400 text-sm"
-                                                    v-if="Array.isArray(form.errors[`references.${index}.relation`])"
-                                                >
-                                                    {{ form.errors[`references.${index}.relation`].join(', ') }}
-                                                </div>
-                                            </FormControl>
-                                        </td>
-                                        <td data-label="Reference Label">
-                                            <!-- <input name="Reference Label" class="form-control" v-model="item.label" /> -->
-                                            <FormControl
-                                                required
-                                                v-model="form.references[index].label"
-                                                type="text"
-                                                placeholder="[reference label]"
-                                            >
-                                                <div class="text-red-400 text-sm" v-if="form.errors[`references.${index}.label`]">
-                                                    {{ form.errors[`references.${index}.label`].join(', ') }}
-                                                </div>
-                                            </FormControl>
-                                        </td>
-                                        <td class="before:hidden lg:w-1 whitespace-nowrap">
-                                            <!-- <BaseButton color="info" :icon="mdiEye" small @click="isModalActive = true" /> -->
-                                            <BaseButton color="danger" :icon="mdiTrashCan" small @click.prevent="removeReference(index)" />
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </table>
-
-                            <!-- References to delete section -->
-                            <div v-if="form.referencesToDelete && form.referencesToDelete.length > 0" class="mt-8">
-                                <h1 class="pt-8 pb-3 font-semibold sm:text-lg text-gray-900">References To Delete</h1>
-                                <ul class="flex flex-1 flex-wrap -m-1">
-                                    <li
-                                        v-for="(element, index) in form.referencesToDelete"
-                                        :key="index"
-                                        class="block p-1 w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/6 xl:w-1/8 h-40"
-                                    >
-                                        <article
-                                            tabindex="0"
-                                            class="bg-red-100 group w-full h-full rounded-md cursor-pointer relative shadow-sm overflow-hidden"
-                                        >
-                                            <section
-                                                class="flex flex-col rounded-md text-xs break-words w-full h-full z-20 absolute top-0 py-2 px-3"
-                                            >
-                                                <h1
-                                                    class="flex-1 text-gray-700 group-hover:text-blue-800 font-medium text-sm mb-1 truncate overflow-hidden whitespace-nowrap"
-                                                >
-                                                    {{ element.value }}
-                                                </h1>
-                                                <div class="flex flex-col mt-auto">
-                                                    <p class="p-1 size text-xs text-gray-700">
-                                                        <span class="font-semibold">Type:</span> {{ element.type }}
-                                                    </p>
-                                                    <p class="p-1 size text-xs text-gray-700">
-                                                        <span class="font-semibold">Relation:</span> {{ element.relation }}
-                                                    </p>
-                                                    <div class="flex justify-end mt-1">
-                                                        <button
-                                                            class="restore ml-auto focus:outline-none hover:bg-gray-300 p-1 rounded-md text-gray-800"
-                                                            @click.prevent="restoreReference(index)"
-                                                        >
-                                                            <svg viewBox="0 0 24 24" class="w-5 h-5">
-                                                                <path fill="currentColor" :d="mdiRestore"></path>
-                                                            </svg>
-                                                        </button>
-                                                    </div>
-                                                </div>
-                                            </section>
-                                        </article>
-                                    </li>
-                                </ul>
-                            </div>
-                        </CardBox>
-                    </div>
-                </div>
-
-                <BaseDivider />
-
-                <!-- Section 7: Geographic Coverage -->
-                <div class="mb-8">
-                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
-                        <span class="w-8 h-8 rounded-full bg-teal-500 text-white flex items-center justify-center text-sm">7</span>
-                        Geographic Coverage
-                    </h2>
-
-                    <div class="ml-10">
-                        <MapComponent
-                            v-if="form.coverage"
-                            :mapOptions="mapOptions"
-                            :baseMaps="baseMaps"
-                            :fitBounds="fitBounds"
-                            :coverage="form.coverage"
-                            :mapId="mapId"
-                            class="mb-4 rounded-lg overflow-hidden shadow-md"
+                        <TablePersons
+                            :persons="form.contributors"
+                            v-if="form.contributors.length > 0"
+                            :contributortypes="contributorTypes"
+                            :errors="form.errors"
+                            :relation="'contributors'"
                         />
+                        <div class="text-red-400 text-sm" v-if="form.errors.contributors && Array.isArray(form.errors.contributors)">
+                            {{ form.errors.contributors.join(', ') }}
+                        </div>
+                    </CardBox>
+
+                    <div class="flex flex-col md:flex-row">
+                        <!-- (9) project_id -->
+                        <FormField
+                            label="Project.."
+                            help="project is optional"
+                            :class="{ 'text-red-400': form.errors.project_id }"
+                            class="w-full mx-2 flex-1"
+                        >
+                            <FormControl
+                                required
+                                v-model="form.project_id"
+                                :type="'select'"
+                                placeholder="[Select Project]"
+                                :errors="form.errors.project_id"
+                                :options="projects"
+                            >
+                                <div class="text-red-400 text-sm" v-if="form.errors.project_id">
+                                    {{ form.errors.project_id.join(', ') }}
+                                </div>
+                            </FormControl>
+                        </FormField>
+                        <!-- (10) embargo_date -->
+                        <FormField
+                            label="Embargo Date.."
+                            help="embargo date is optional"
+                            :class="{ 'text-red-400': form.errors.embargo_date }"
+                            class="w-full mx-2 flex-1"
+                        >
+                            <FormControl
+                                v-model="form.embargo_date"
+                                :type="'date'"
+                                placeholder="date('y-m-d')"
+                                :errors="form.errors.embargo_date"
+                            >
+                                <div class="text-red-400 text-sm" v-if="form.errors.embargo_date">
+                                    {{ form.errors.embargo_date.join(', ') }}
+                                </div>
+                            </FormControl>
+                        </FormField>
                     </div>
-                    <div class="flex flex-col md:flex-row ml-10">
+
+                    <BaseDivider />
+
+                    <MapComponent
+                        v-if="form.coverage"
+                        :mapOptions="mapOptions"
+                        :baseMaps="baseMaps"
+                        :fitBounds="fitBounds"
+                        :coverage="form.coverage"
+                        :mapId="mapId"
+                        v-bind-event:onMapInitializedEvent="onMapInitialized"
+                    >
+                    </MapComponent>
+                    <div class="flex flex-col md:flex-row">
                         <!-- x min and max -->
                         <FormField
                             label="Coverage X Min"
@@ -808,99 +554,223 @@
                             </FormControl>
                         </FormField>
                     </div>
-                </div>
 
-                <BaseDivider />
+                    <CardBox
+                        class="mb-6 shadow"
+                        has-table
+                        title="Dataset References"
+                        :icon="mdiEarthPlus"
+                        :header-icon="mdiPlusCircle"
+                        v-on:header-icon-click="addReference"
+                    >
+                        <!-- Message when no references exist -->
+                        <div v-if="form.references.length === 0" class="text-center py-4">
+                            <p class="text-gray-600">No references added yet.</p>
+                            <p class="text-gray-400">Click the plus icon above to add a new reference.</p>
+                        </div>
+                        <!-- Reference form -->
+                        <table class="table-fixed border-green-900" v-if="form.references.length">
+                            <thead>
+                                <tr>
+                                    <th class="w-4/12">Value</th>
+                                    <th class="w-2/12">Type</th>
+                                    <th class="w-3/12">Relation</th>
+                                    <th class="w-2/12">Label</th>
+                                    <th class="w-1/12"></th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr v-for="(item, index) in form.references">
+                                    <td data-label="Reference Value">
+                                        <!-- <input name="Reference Value" class="form-control"
+                                                placeholder="[VALUE]" v-model="item.value" /> -->
+                                        <FormControl
+                                            required
+                                            v-model="item.value"
+                                            :type="'text'"
+                                            placeholder="[VALUE]"
+                                            :errors="form.errors.embargo_date"
+                                        >
+                                            <div
+                                                class="text-red-400 text-sm"
+                                                v-if="
+                                                    form.errors[`references.${index}.value`] &&
+                                                    Array.isArray(form.errors[`references.${index}.value`])
+                                                "
+                                            >
+                                                {{ form.errors[`references.${index}.value`].join(', ') }}
+                                            </div>
+                                        </FormControl>
+                                    </td>
+                                    <td>
+                                        <FormControl
+                                            required
+                                            v-model="form.references[index].type"
+                                            type="select"
+                                            :options="referenceIdentifierTypes"
+                                            placeholder="[type]"
+                                        >
+                                            <div class="text-red-400 text-sm" v-if="Array.isArray(form.errors[`references.${index}.type`])">
+                                                {{ form.errors[`references.${index}.type`].join(', ') }}
+                                            </div>
+                                        </FormControl>
+                                    </td>
 
-                <!-- Section 8: Files -->
-                <div class="mb-8">
-                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
-                        <span class="w-8 h-8 rounded-full bg-cyan-500 text-white flex items-center justify-center text-sm">8</span>
-                        Files
-                    </h2>
+                                    <td>
+                                        <FormControl
+                                            required
+                                            v-model="form.references[index].relation"
+                                            type="select"
+                                            :options="relationTypes"
+                                            placeholder="[relation type]"
+                                        >
+                                            <div
+                                                class="text-red-400 text-sm"
+                                                v-if="Array.isArray(form.errors[`references.${index}.relation`])"
+                                            >
+                                                {{ form.errors[`references.${index}.relation`].join(', ') }}
+                                            </div>
+                                        </FormControl>
+                                    </td>
+                                    <td data-label="Reference Label">
+                                        <!-- <input name="Reference Label" class="form-control" v-model="item.label" /> -->
+                                        <FormControl
+                                            required
+                                            v-model="form.references[index].label"
+                                            type="text"
+                                            placeholder="[reference label]"
+                                        >
+                                            <div class="text-red-400 text-sm" v-if="form.errors[`references.${index}.label`]">
+                                                {{ form.errors[`references.${index}.label`].join(', ') }}
+                                            </div>
+                                        </FormControl>
+                                    </td>
+                                    <td class="before:hidden lg:w-1 whitespace-nowrap">
+                                        <!-- <BaseButton color="info" :icon="mdiEye" small @click="isModalActive = true" /> -->
+                                        <BaseButton color="danger" :icon="mdiTrashCan" small @click.prevent="removeReference(index)" />
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
 
-                    <div class="ml-10">
-                        <FileUploadComponent
-                            v-model:files="form.files"
-                            v-model:filesToDelete="form.filesToDelete"
-                            :showClearButton="false"
-                            class="shadow-md"
+                        <!-- References to delete section -->
+                        <div v-if="form.referencesToDelete && form.referencesToDelete.length > 0" class="mt-8">
+                            <h1 class="pt-8 pb-3 font-semibold sm:text-lg text-gray-900">References To Delete</h1>
+                            <ul class="flex flex-1 flex-wrap -m-1">
+                                <li
+                                    v-for="(element, index) in form.referencesToDelete"
+                                    :key="index"
+                                    class="block p-1 w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/6 xl:w-1/8 h-40"
+                                >
+                                    <article
+                                        tabindex="0"
+                                        class="bg-red-100 group w-full h-full rounded-md cursor-pointer relative shadow-sm overflow-hidden"
+                                    >
+                                        <section
+                                            class="flex flex-col rounded-md text-xs break-words w-full h-full z-20 absolute top-0 py-2 px-3"
+                                        >
+                                            <h1
+                                                class="flex-1 text-gray-700 group-hover:text-blue-800 font-medium text-sm mb-1 truncate overflow-hidden whitespace-nowrap"
+                                            >
+                                                {{ element.value }}
+                                            </h1>
+                                            <div class="flex flex-col mt-auto">
+                                                <p class="p-1 size text-xs text-gray-700">
+                                                    <span class="font-semibold">Type:</span> {{ element.type }}
+                                                </p>
+                                                <p class="p-1 size text-xs text-gray-700">
+                                                    <span class="font-semibold">Relation:</span> {{ element.relation }}
+                                                </p>
+                                                <div class="flex justify-end mt-1">
+                                                    <button
+                                                        class="restore ml-auto focus:outline-none hover:bg-gray-300 p-1 rounded-md text-gray-800"
+                                                        @click.prevent="restoreReference(index)"
+                                                    >
+                                                        <svg viewBox="0 0 24 24" class="w-5 h-5">
+                                                            <path fill="currentColor" :d="mdiRestore"></path>
+                                                        </svg>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </section>
+                                    </article>
+                                </li>
+                            </ul>
+                        </div>
+                    </CardBox>
+
+                    <BaseDivider />
+
+                    <CardBox
+                        class="mb-6 shadow"
+                        has-table
+                        title="Dataset Keywords"
+                        :icon="mdiEarthPlus"
+                        :header-icon="mdiPlusCircle"
+                        v-on:header-icon-click="addKeyword"
+                    >
+                        <TableKeywords
+                            :keywords="form.subjects"
+                            :errors="form.errors"
+                            :subjectTypes="subjectTypes"
+                            v-model:subjects-to-delete="form.subjectsToDelete"
+                            v-if="form.subjects.length > 0"
                         />
-                        <div class="text-red-400 text-sm" v-if="form.errors['file'] && Array.isArray(form.errors['files'])">
-                            {{ form.errors['files'].join(', ') }}
-                        </div>
-                    </div>
+                    </CardBox>
                 </div>
 
-                <!-- Enhanced Footer with Action Buttons -->
-                <template #footer>
-                    <div class="flex items-center justify-between">
-                        <div class="text-sm text-gray-500 dark:text-gray-400">
-                            <span v-if="hasUnsavedChanges" class="flex items-center gap-2">
-                                <svg class="w-4 h-4 text-amber-500" fill="currentColor" viewBox="0 0 20 20">
-                                    <path
-                                        fill-rule="evenodd"
-                                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
-                                        clip-rule="evenodd"
-                                    />
-                                </svg>
-                                <span class="font-medium">{{ getChangesSummary().length }} unsaved change(s)</span>
-                            </span>
-                            <span v-else class="flex items-center gap-2 text-green-600 dark:text-green-400">
-                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                                    <path
-                                        fill-rule="evenodd"
-                                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                                        clip-rule="evenodd"
-                                    />
-                                </svg>
-                                <span class="font-medium">All changes saved</span>
-                            </span>
-                        </div>
+                <div class="mb-4">
+                    <!-- <label for="project" class="block text-gray-700 font-bold mb-2">Project:</label>
+                    <select
+                        id="project"
+                        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                        v-model="dataset.project_id"
+                    >
+                        <option v-for="project in projects" :key="project.id" :value="project.id" class="block px-4 py-2 text-gray-700">
+                            {{ project.label }}
+                        </option>
+                    </select> -->
+                </div>
 
-                        <BaseButtons>
-                            <BaseButton
-                                v-if="can.edit"
-                                @click.stop="submitAlternative"
-                                :disabled="form.processing"
-                                label="Save Changes"
-                                color="info"
-                                :icon="mdiDisc"
-                                :class="{ 'opacity-25': form.processing }"
-                                class="shadow-md hover:shadow-lg transition-shadow"
-                            />
-                            <BaseButton
-                                v-if="can.edit"
-                                :route-name="stardust.route('dataset.release', [dataset.id])"
-                                color="success"
-                                :icon="mdiLockOpen"
-                                label="Release"
-                                :disabled="hasUnsavedChanges || form.processing"
-                                :title="hasUnsavedChanges ? 'Please save your changes before releasing' : 'Publish this dataset'"
-                                class="shadow-md hover:shadow-lg transition-shadow"
-                            />
-                        </BaseButtons>
-                    </div>
+                <FileUploadComponent v-model:files="form.files" v-model:filesToDelete="form.filesToDelete" :showClearButton="false">
+                </FileUploadComponent>
+
+                <div class="text-red-400 text-sm" v-if="form.errors['file'] && Array.isArray(form.errors['files'])">
+                    {{ form.errors['files'].join(', ') }}
+                </div>
+
+                <template #footer>
+                    <BaseButtons>
+                        <BaseButton
+                            v-if="can.edit"
+                            @click.stop="submitAlternative"
+                            :disabled="form.processing"
+                            label="Save"
+                            color="info"
+                            :icon="mdiDisc"
+                            :class="{ 'opacity-25': form.processing }"
+                            small
+                        >
+                        </BaseButton>
+                        <BaseButton
+                            v-if="can.edit"
+                            :route-name="stardust.route('dataset.release', [dataset.id])"
+                            color="info"
+                            :icon="mdiLockOpen"
+                            :label="'Release'"
+                            small
+                            :disabled="hasUnsavedChanges || form.processing"
+                            :title="hasUnsavedChanges ? 'Please save your changes before releasing' : ''"
+                        />
+                    </BaseButtons>
                 </template>
             </CardBox>
-
-            <!-- Enhanced Loading Spinner Overlay -->
-            <div
-                v-if="form.processing"
-                class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-75 z-50 backdrop-blur-sm"
-            >
-                <div class="bg-white dark:bg-slate-800 rounded-lg p-8 shadow-2xl flex flex-col items-center gap-4">
-                    <svg class="animate-spin h-12 w-12 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                        <path
-                            class="opacity-75"
-                            fill="currentColor"
-                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                        ></path>
-                    </svg>
-                    <p class="text-lg font-semibold text-gray-900 dark:text-white">Saving changes...</p>
-                    <p class="text-sm text-gray-500 dark:text-gray-400">Please wait while we update your dataset</p>
-                </div>
+            <!-- Loading Spinner -->
+            <div v-if="form.processing" class="fixed inset-0 flex items-center justify-center bg-gray-500 bg-opacity-50 z-50">
+                <svg class="animate-spin h-12 w-12 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M12 2a10 10 0 0110 10h-4a6 6 0 00-6-6V2z"></path>
+                </svg>
             </div>
         </SectionMain>
     </LayoutAuthenticated>
@@ -1629,6 +1499,25 @@ const getChangesSummary = () => {
 
     return changes;
 };
+
+// onMounted(() => {
+//     window.addEventListener('beforeunload', handleBeforeUnload);
+// });
+
+// onUnmounted(() => {
+//     window.removeEventListener('beforeunload', handleBeforeUnload);
+// });
+
+// Watch for when the component receives new props (e.g., after save)
+// watch(
+//     () => props.dataset,
+//     (newDataset) => {
+//         if (originalDataset) {
+//             originalDataset.value = JSON.parse(JSON.stringify(newDataset));
+//         }
+//     },
+//     { deep: true },
+// );
 </script>
 
 <style scoped>
diff --git a/resources/js/menu.ts b/resources/js/menu.ts
index 55921f3..16d08d7 100644
--- a/resources/js/menu.ts
+++ b/resources/js/menu.ts
@@ -12,7 +12,7 @@ import {
     mdiShieldCrownOutline,
     mdiLicense,
     mdiFileDocument,
-    mdiFolderMultiple, 
+    mdiLibraryShelves 
 } from '@mdi/js';
 
 export default [
@@ -92,12 +92,6 @@ export default [
                 label: 'Licenses',
                 roles: ['administrator'],
             },
-             {
-                route: 'settings.project.index',
-                icon: mdiFolderMultiple,
-                label: 'Projects',
-                roles: ['administrator'],
-            },
         ],
     },
 
diff --git a/start/routes.ts b/start/routes.ts
index cd564a4..fd6d9fd 100644
--- a/start/routes.ts
+++ b/start/routes.ts
@@ -34,7 +34,6 @@ import DatasetController from '#app/Controllers/Http/Submitter/DatasetController
 import PersonController from '#app/Controllers/Http/Submitter/PersonController';
 import EditorDatasetController from '#app/Controllers/Http/Editor/DatasetController';
 import ReviewerDatasetController from '#app/Controllers/Http/Reviewer/DatasetController';
-import ProjectsController from '#app/controllers/projects_controller';
 import './routes/api.js';
 import { middleware } from './kernel.js';
 import db from '@adonisjs/lucid/services/db'; // Import the DB service
@@ -235,19 +234,6 @@ router
             .where('id', router.matchers.number())
             .use(middleware.can(['settings']));
 
-        // Project routes
-        // List all projects
-        router.get('/projects',  [ProjectsController, 'index']).as('project.index');
-        // Show create form
-        router.get('/projects/create', [ProjectsController, 'create']).as('project.create').use(middleware.can(['settings']));;
-        // Store new project
-        router.post('/projects', [ProjectsController, 'store']).as('project.store').use(middleware.can(['settings']));;
-        // Show edit form
-        router.get('/projects/:id/edit',[ProjectsController, 'edit']).as('project.edit').use(middleware.can(['settings']));;
-        // Update project
-        router.put('/projects/:id',[ProjectsController, 'update']).as('project.update').use(middleware.can(['settings']));;
-      
-
         // Mimetype routes
         router.get('/mimetype', [MimetypeController, 'index']).as('mimetype.index');
         router
diff --git a/start/rules/file_scan.ts b/start/rules/file_scan.ts
index 71bb8b1..8003a9d 100644
--- a/start/rules/file_scan.ts
+++ b/start/rules/file_scan.ts
@@ -45,8 +45,8 @@ async function scanFileForViruses(filePath: string | undefined, options: Options
             active: true, // If true, this module will consider using the clamdscan binary
             host: options.host, // IP of host to connect to TCP interface,
             port: options.port, // Port of host to use when connecting to TCP interface
-            // socket: '/var/run/clamav/clamd.socket', // Socket file for connecting via socket        
-            // localFallback: false, // Use local clamscan binary if socket/tcp fails
+            socket: '/var/run/clamav/clamd.socket', // Socket file for connecting via socket        
+            localFallback: false, // Use local clamscan binary if socket/tcp fails
             // port: options.port,
             multiscan: true, // Scan using all available cores! Yay!
         },