diff --git a/app/controllers/projects_controller.ts b/app/controllers/projects_controller.ts
new file mode 100644
index 0000000..21e20df
--- /dev/null
+++ b/app/controllers/projects_controller.ts
@@ -0,0 +1,54 @@
+// 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
new file mode 100644
index 0000000..bad6c7c
--- /dev/null
+++ b/app/validators/project.ts
@@ -0,0 +1,28 @@
+// 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 3dd6d3b..c119d8c 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,25 +21,6 @@ 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: () => [],
@@ -63,15 +44,18 @@ 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);
     },
@@ -122,19 +106,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];
 
-    if (confirm(`Are you sure you want to remove ${person.first_name || ''} ${person.last_name || person.email}?`)) {
+    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}?`)) {
         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--;
         }
@@ -144,6 +128,12 @@ 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);
 };
@@ -170,7 +160,6 @@ 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;
         }
@@ -189,18 +178,16 @@ const perPageOptions = [
 <template>
     <div class="card">
         <!-- Table Controls -->
-        <div v-if="hasMultiplePages" class="flex justify-between items-center p-3 border-b border-gray-200 dark:border-slate-700">
+        <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 class="flex items-center gap-2">
-                <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 class="text-xs text-gray-600 dark:text-gray-400">
+                    {{ currentPage * perPage + 1 }}-{{ Math.min((currentPage + 1) * perPage, items.length) }} of {{ items.length }}
                 </span>
             </div>
             <select
                 v-model="perPage"
                 @change="currentPage = 0"
-                class="px-3 py-1 text-sm border rounded-md dark:bg-slate-800 dark:border-slate-600"
+                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"
             >
                 <option v-for="option in perPageOptions" :key="option.value" :value="option.value">
                     {{ option.label }}
@@ -210,22 +197,22 @@ const perPageOptions = [
 
         <!-- Table -->
         <div class="overflow-x-auto">
-            <table class="w-full">
+            <table class="w-full table-compact">
                 <thead>
-                    <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 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>
                 </thead>
-                <!-- <tbody> -->
-                <!-- <tr v-for="(client, index) in itemsPaginated" :key="client.id"> -->
+
+                <!-- Draggable tbody for non-paginated view -->
                 <draggable
                     v-if="canReorder && !hasMultiplePages"
                     tag="tbody"
@@ -236,114 +223,167 @@ const perPageOptions = [
                     handle=".drag-handle"
                 >
                     <template #item="{ index, element }">
-                        <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" />
+                        <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" />
                                 </div>
                             </td>
-                            <td class="p-3">{{ index + 1 }}</td>
-                            <td data-label="Id" class="p-3 text-sm text-gray-600">{{ element.id || '-' }}</td>
+                            <td class="px-2 py-2 text-xs text-gray-600 dark:text-gray-400">{{ index + 1 }}</td>
 
-                            <!-- First Name - Hidden for Organizational -->
-                            <td class="p-3" data-label="First Name" v-if="element.name_type !== 'Organizational'">
+                            <!-- 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">
                                 <FormControl
+                                    v-if="element.name_type !== 'Organizational'"
                                     required
                                     v-model="element.first_name"
                                     type="text"
                                     :is-read-only="element.status == true"
-                                    placeholder="[FIRST NAME]"
+                                    placeholder="First name"
+                                    class="text-xs compact-input"
                                 />
-                                <div class="text-red-400 text-sm" v-if="errors && Array.isArray(errors[`${relation}.${index}.first_name`])">
-                                    {{ errors[`${relation}.${index}.first_name`].join(', ') }}
+                                <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>
                             </td>
-                            <td v-else></td>
-                            <!-- Empty cell for organizational entries -->
 
                             <!-- Last Name / Organization Name -->
-                            <td :data-label="element.name_type === 'Organizational' ? 'Organization Name' : 'Last Name'">
+                            <td class="px-2 py-2">
                                 <FormControl
                                     required
                                     v-model="element.last_name"
                                     type="text"
                                     :is-read-only="element.status == true"
-                                    :placeholder="element.name_type === 'Organizational' ? '[ORGANIZATION NAME]' : '[LAST NAME]'"
+                                    :placeholder="element.name_type === 'Organizational' ? 'Organization' : 'Last name'"
+                                    class="text-xs compact-input"
                                 />
-                                <div class="text-red-400 text-sm" v-if="errors && Array.isArray(errors[`${relation}.${index}.last_name`])">
-                                    {{ errors[`${relation}.${index}.last_name`].join(', ') }}
+                                <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>
                             </td>
 
                             <!-- Orcid -->
-                            <td data-label="Orcid">
+                            <td class="px-2 py-2">
                                 <FormControl
                                     v-model="element.identifier_orcid"
                                     type="text"
-                                    :is-read-only="element.status == true"                                   
+                                    :is-read-only="element.status == true"
+                                    placeholder="0000-0000-0000-0000"
+                                    class="text-xs compact-input font-mono"
                                 />
-                                <div class="text-red-400 text-sm" v-if="errors && Array.isArray(errors[`${relation}.${index}.identifier_orcid`])">
-                                    {{ errors[`${relation}.${index}.identifier_orcid`].join(', ') }}
+                                <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>
                             </td>
 
                             <!-- Email -->
-                            <td data-label="Email">
+                            <td class="px-2 py-2">
                                 <FormControl
                                     required
                                     v-model="element.email"
-                                    type="text"
+                                    type="email"
                                     :is-read-only="element.status == true"
-                                    placeholder="[EMAIL]"
+                                    placeholder="email@example.com"
+                                    class="text-xs compact-input"
                                 />
-                                <div class="text-red-400 text-sm" v-if="errors && Array.isArray(errors[`${relation}.${index}.email`])">
-                                    {{ errors[`${relation}.${index}.email`].join(', ') }}
+                                <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>
                             </td>
 
                             <!-- Contributor Type -->
-                            <td v-if="Object.keys(contributortypes).length">
+                            <td v-if="Object.keys(contributortypes).length" class="px-2 py-2">
                                 <FormControl
                                     required
                                     v-model="element.pivot_contributor_type"
                                     type="select"
                                     :options="contributortypes"
-                                    placeholder="[relation type]"
+                                    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`])"
                                 >
-                                    <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>
+                                    {{ errors[`${relation}.${index}.pivot_contributor_type`][0] }}
+                                </div>
                             </td>
 
                             <!-- Actions -->
-                            <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 class="px-2 py-2 whitespace-nowrap">
+                                <BaseButton 
+                                    color="danger" 
+                                    :icon="mdiTrashCan" 
+                                    small 
+                                    @click.prevent="removeAuthor(index)"
+                                    class="compact-button"
+                                />
                             </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-gray-50 dark:hover:bg-slate-800"
+                        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="p-3 text-gray-400">
-                            <BaseIcon :path="mdiDragVariant" />
+                        <td   v-if="canReorder" class="px-2 py-2 text-gray-400">
+                            <BaseIcon :path="mdiDragVariant" :size="18" />
                         </td>
-                        <td class="p-3">{{ currentPage * perPage + index + 1 }}</td>
-                        <td class="p-3 text-sm text-gray-600">{{ element.id || '-' }}</td>
+                        <td class="px-2 py-2 text-xs text-gray-600 dark:text-gray-400">{{ currentPage * perPage + index + 1 }}</td>
 
-                        <!-- Same field structure as draggable version -->
-                        <td class="p-3">
+                        <!-- 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">
                             <FormControl
                                 v-if="element.name_type !== 'Organizational'"
                                 required
@@ -351,59 +391,68 @@ const perPageOptions = [
                                 @update:model-value="updatePerson(index, 'first_name', $event)"
                                 type="text"
                                 :is-read-only="element.status || !canEdit"
-                                placeholder="[FIRST NAME]"
+                                placeholder="First name"
+                                class="text-xs compact-input"
                                 :error="getFieldError(index, 'first_name')"
                             />
-                            <span v-else class="text-gray-400">-</span>
-                            <div v-if="getFieldError(index, 'first_name')" class="text-red-400 text-sm">
+                            <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">
                                 {{ getFieldError(index, 'first_name') }}
                             </div>
                         </td>
 
-                        <td class="p-3">
+                        <!-- Last Name / Organization -->
+                        <td class="px-2 py-2">
                             <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 NAME]' : '[LAST NAME]'"
+                                :placeholder="element.name_type === 'Organizational' ? 'Organization' : 'Last name'"
+                                class="text-xs compact-input"
                                 :error="getFieldError(index, 'last_name')"
                             />
-                            <div v-if="getFieldError(index, 'last_name')" class="text-red-400 text-sm">
+                            <div v-if="getFieldError(index, 'last_name')" class="text-red-500 text-xs mt-0.5">
                                 {{ getFieldError(index, 'last_name') }}
                             </div>
                         </td>
 
-                        <td class="p-3">
+                        <!-- Orcid -->
+                        <td class="px-2 py-2">
                             <FormControl
                                 :model-value="element.identifier_orcid"
                                 @update:model-value="updatePerson(index, 'identifier_orcid', $event)"
                                 type="text"
-                                :is-read-only="element.status || !canEdit"                              
+                                :is-read-only="element.status || !canEdit"
+                                placeholder="0000-0000-0000-0000"
+                                class="text-xs compact-input font-mono"
                                 :error="getFieldError(index, 'identifier_orcid')"
                             />
-                            <div v-if="getFieldError(index, 'identifier_orcid')" class="text-red-400 text-sm">
+                            <div v-if="getFieldError(index, 'identifier_orcid')" class="text-red-500 text-xs mt-0.5">
                                 {{ getFieldError(index, 'identifier_orcid') }}
                             </div>
                         </td>
 
-                        <td class="p-3">
+                        <!-- Email -->
+                        <td class="px-2 py-2">
                             <FormControl
                                 required
                                 :model-value="element.email"
                                 @update:model-value="updatePerson(index, 'email', $event)"
                                 type="email"
                                 :is-read-only="element.status || !canEdit"
-                                placeholder="[EMAIL]"
+                                placeholder="email@example.com"
+                                class="text-xs compact-input"
                                 :error="getFieldError(index, 'email')"
                             />
-                            <div v-if="getFieldError(index, 'email')" class="text-red-400 text-sm">
+                            <div v-if="getFieldError(index, 'email')" class="text-red-500 text-xs mt-0.5">
                                 {{ getFieldError(index, 'email') }}
                             </div>
                         </td>
 
-                        <td v-if="showContributorTypes" class="p-3">
+                        <!-- Contributor Type -->
+                        <td v-if="showContributorTypes" class="px-2 py-2">
                             <FormControl
                                 required
                                 :model-value="element.pivot_contributor_type"
@@ -411,15 +460,39 @@ const perPageOptions = [
                                 type="select"
                                 :options="contributortypes"
                                 :is-read-only="element.status || !canEdit"
-                                placeholder="[Select type]"
+                                placeholder="Role"
+                                class="text-xs compact-select"
                                 :error="getFieldError(index, 'pivot_contributor_type')"
-                            />                          
-                             <div v-if="getFieldError(index, 'pivot_contributor_type')" class="text-red-400 text-sm">
+                            />
+                            <div v-if="getFieldError(index, 'pivot_contributor_type')" class="text-red-500 text-xs mt-0.5">
                                 {{ getFieldError(index, 'pivot_contributor_type') }}
                             </div>
                         </td>
 
-                        <td v-if="canDelete" class="p-3">
+                        <!-- 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">
                             <BaseButtons type="justify-start lg:justify-end" no-wrap>
                                 <BaseButton
                                     color="danger"
@@ -433,10 +506,12 @@ const perPageOptions = [
                         </td>
                     </tr>
 
-                    <!-- Empty State -->
+                   
                     <tr v-if="items.length === 0">
-                        <td :colspan="canReorder ? 8 : 7" class="text-center p-8 text-gray-500">No persons added yet</td>
-                    </tr>
+                        <td :colspan="showContributorTypes ? 10 : 9" class="text-center p-8 text-gray-500">
+                            No persons added yet
+                        </td>
+                    </tr> -->
                 </tbody>
             </table>
         </div>
@@ -467,7 +542,9 @@ 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>
@@ -481,7 +558,6 @@ 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;
@@ -492,4 +568,4 @@ const perPageOptions = [
         padding: 0.5rem !important;
     }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/resources/js/Layouts/LayoutAuthenticated.vue b/resources/js/Layouts/LayoutAuthenticated.vue
index 15a117c..c077c7b 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,9 +29,18 @@ const props = defineProps({
     }">
         <div :class="{ 
             'ml-60 lg:ml-0': layoutService.isAsideMobileExpanded,
-            '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" />
+            '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" 
+            />
             <!-- 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 73192dc..b871260 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 { usePage } from '@inertiajs/vue3';
-import { mdiAccountKey, mdiSquareEditOutline, mdiAlertBoxOutline } from '@mdi/js';
+import { Head, usePage } from '@inertiajs/vue3';
+import { mdiLicense, mdiCheckCircle, mdiCloseCircle, mdiAlertBoxOutline } from '@mdi/js';
 import { computed, ComputedRef } from 'vue';
 import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
 import SectionMain from '@/Components/SectionMain.vue';
@@ -9,107 +9,150 @@ 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';
 
-// const isModalDangerActive = ref(false);
-// const deleteId = ref();
+interface License {
+    id: number;
+    name: string;
+    sort_order: number;
+    active: boolean;
+}
 
-defineProps({
+const props = defineProps({
     licenses: {
-        type: Object,
-        default: () => ({}),
+        type: Array<License>,
+        default: () => [],
     },
-    // filters: {
-    //     type: Object,
-    //     default: () => ({}),
-    // },
     can: {
         type: Object,
         default: () => ({}),
     },
 });
 
-const flash: ComputedRef<any> = computed(() => {
-    // let test = usePage();
-    // console.log(test);
-    return usePage().props.flash;
-});
+const flash: ComputedRef<any> = computed(() => 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="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 :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>
+
             <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>
-                                <!-- <Sort label="Name" attribute="name" /> -->
-                                Name
-                            </th>
-                            <th>
-                                <!-- <Sort label="Sort Order" attribute="sort_order" /> -->
-                                Sort Order
-                            </th>
+                            <th>Name</th>
+                            <th>Sort Order</th>
+                            <th>Status</th>
                             <th v-if="can.edit">Actions</th>
-
                         </tr>
                     </thead>
 
                     <tbody>
-                        <tr v-for="license in licenses" :key="license.id">
+                        <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"
+                        >
                             <td data-label="Name">
-                                <!-- <Link
-                                    :href="stardust.route('settings.role.show', [role.id])"
-                                    class="no-underline hover:underline text-cyan-600 dark:text-cyan-400"
+                                <span
+                                    class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium transition-all hover:shadow-md"
+                                    :class="getLicenseColor(index)"
                                 >
                                     {{ license.name }}
-                                </Link> -->
-                                {{ license.name }}
+                                </span>
                             </td>
-                            <td data-label="Description">
-                                {{ license.sort_order }}
+                            <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>
-
                             <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="mdiSquareEditOutline" label="deactivate" small />
-                                    <BaseButton v-else :route-name="stardust.route('settings.license.up', [license.id])"
-                                        color="success" :icon="mdiSquareEditOutline" label="activate" small />
+                                        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
+                                    />
                                 </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
new file mode 100644
index 0000000..688e0ee
--- /dev/null
+++ b/resources/js/Pages/Admin/Project/Create.vue
@@ -0,0 +1,135 @@
+<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
new file mode 100644
index 0000000..4fceaf1
--- /dev/null
+++ b/resources/js/Pages/Admin/Project/Edit.vue
@@ -0,0 +1,154 @@
+<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
new file mode 100644
index 0000000..93e47c8
--- /dev/null
+++ b/resources/js/Pages/Admin/Project/Index.vue
@@ -0,0 +1,182 @@
+<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 77aa1ff..e9c1f0a 100644
--- a/resources/js/Pages/Admin/Role/Index.vue
+++ b/resources/js/Pages/Admin/Role/Index.vue
@@ -1,7 +1,7 @@
-<script setup>
+<script lang="ts" setup>
 import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
 import { mdiAccountKey, mdiPlus, mdiSquareEditOutline, mdiTrashCan, mdiAlertBoxOutline } from '@mdi/js';
-import { computed, ref } from 'vue';
+import { computed, ref, ComputedRef } from 'vue';
 import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
 import SectionMain from '@/Components/SectionMain.vue';
 import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
@@ -9,18 +9,23 @@ 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 CardBoxModal from '@/Components/CardBoxModal.vue';
 import Sort from '@/Components/Admin/Sort.vue';
 import { stardust } from '@eidellev/adonis-stardust/client';
-import CardBoxModal from '@/Components/CardBoxModal.vue';
+
+interface Role {
+    id: number;
+    name: string;
+    description: string;
+}
 
 const isModalDangerActive = ref(false);
 const deleteId = ref();
 
 const props = defineProps({
     roles: {
-        type: Object,
-        default: () => ({}),
+        type: Array<Role>,
+        default: () => [],
     },
     filters: {
         type: Object,
@@ -32,88 +37,89 @@ const props = defineProps({
     },
 });
 
-const flash = computed(() => {
-    // let test = usePage();
-    // console.log(test);
-    return usePage().props.flash;
-});
+const flash: ComputedRef<any> = computed(() => usePage().props.flash);
 
-const form = useForm({
-    search: props.filters.search,
-});
+// const form = useForm({
+//     search: props.filters.search,
+// });
+
+const roleCount = computed(() => props.roles.length);
 
 const formDelete = useForm({});
-const destroy = (id, e) => {
-    // console.log(id);
+
+const destroy = (id: number) => {
     deleteId.value = id;
     isModalDangerActive.value = true;
 };
 
-const onConfirm = async (id) => {
-    // let id = 6;
+const onConfirm = async (id: number) => {
     await formDelete.delete(stardust.route('settings.role.destroy', [id]));
     deleteId.value = null;
 };
 
-const onCancel = (id) => {
-    // console.log('cancel');
+const onCancel = () => {
     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="Please confirm"
+        large-title="Delete Role"
         button="danger"
         button-label="Delete"
         has-cancel
-        v-on:confirm="onConfirm"
-        v-on:cancel="onCancel"
+        @confirm="onConfirm"
+        @cancel="onCancel"
     >
-        <p>Lorem ipsum dolor sit amet <b>adipiscing elit</b></p>
-        <p>This is sample modal</p>
+        <p>Are you sure you want to delete this role?</p>
+        <p>This action cannot be undone.</p>
     </CardBoxModal>
 
     <LayoutAuthenticated>
         <Head title="Roles" />
         <SectionMain>
             <SectionTitleLineWithButton :icon="mdiAccountKey" title="Roles" main>
-                <BaseButton
-                    v-if="can.create"
-                    :route-name="stardust.route('settings.role.create')"
-                    :icon="mdiPlus"
-                    label="Add"
-                    color="info"
-                    rounded-full
-                    small
-                />
+                <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>
             </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>
@@ -128,17 +134,42 @@ const onCancel = (id) => {
                     </thead>
 
                     <tbody>
-                        <tr v-for="role in roles" :key="role.id">
+                        <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"
+                        >
                             <td data-label="Name">
-                                <Link
-                                    :href="stardust.route('settings.role.show', [role.id])"
-                                    class="no-underline hover:underline text-cyan-600 dark:text-cyan-400"
-                                >
-                                    {{ role.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>
                             </td>
                             <td data-label="Description">
-                                {{ role.description }}
+                                <span class="text-gray-700 dark:text-gray-300 text-sm" :title="role.description">
+                                    {{ truncate(role.description, 50) }}
+                                </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>
@@ -149,21 +180,12 @@ const onCancel = (id) => {
                                         :icon="mdiSquareEditOutline"
                                         small
                                     />
-                                    <!-- <BaseButton
-                                        v-if="can.delete"
-                                        color="danger"
-                                        :icon="mdiTrashCan"
-                                        small
-                                        @click="($event) => destroy(role.id, $event)"
-                                    /> -->                                   
+                                    <BaseButton v-if="can.delete" color="danger" :icon="mdiTrashCan" small @click="destroy(role.id)" />
                                 </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 17e1a58..57b5d44 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 } from 'vue';
+import { computed, ref } from 'vue';
 import { MainService } from '@/Stores/main';
 import {
     mdiAccountMultiple,
@@ -10,6 +10,7 @@ import {
     mdiMonitorCellphone,
     mdiReload,
     mdiChartPie,
+    mdiTrendingUp,
 } from '@mdi/js';
 import LineChart from '@/Components/Charts/LineChart.vue';
 import SectionMain from '@/Components/SectionMain.vue';
@@ -18,47 +19,37 @@ 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 chartData = ref();
+const mainService = MainService();
+
+const isLoadingChart = ref(false);
+
 const fillChartData = async () => {
-    await mainService.fetchChartData();
-    // chartData.value = chartConfig.sampleChartData();
-    // chartData.value = mainService.graphData;
+    isLoadingChart.value = true;
+    try {
+        await mainService.fetchChartData();
+    } finally {
+        isLoadingChart.value = false;
+    }
 };
+
 const chartData = computed(() => mainService.graphData);
-// 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);
+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);
 
+// 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>
 
@@ -67,18 +58,13 @@ const userHasRoles = (roleNames: Array<string>): boolean => {
         <Head title="Dashboard" />
 
         <SectionMain>
-            <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 :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>
 
+            <!-- Stats Grid -->
             <div class="grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6">
                 <CardBoxWidget
                     trend="12%"
@@ -87,25 +73,28 @@ const userHasRoles = (roleNames: Array<string>): boolean => {
                     :icon="mdiAccountMultiple"
                     :number="authors.length"
                     label="Authors"
-                />              
-                <CardBoxWidget                    
+                    class="hover:shadow-lg transition-shadow duration-300"
+                />
+                <CardBoxWidget
                     trend-type="info"
                     color="text-blue-500"
                     :icon="mdiDatabaseOutline"
                     :number="datasets.length"
                     label="Publications"
-                />               
-                <CardBoxWidget                    
+                    class="hover:shadow-lg transition-shadow duration-300"
+                />
+                <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"
@@ -116,7 +105,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"
@@ -124,22 +113,63 @@ 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 /> -->
 
-            <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">
+            <!-- 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">
                     <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>
 
-            <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>
+            <!-- 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>
+
         </SectionMain>
     </LayoutAuthenticated>
 </template>
diff --git a/resources/js/Pages/Submitter/Dataset/Edit.vue b/resources/js/Pages/Submitter/Dataset/Edit.vue
index 11184ac..027bbc2 100644
--- a/resources/js/Pages/Submitter/Dataset/Edit.vue
+++ b/resources/js/Pages/Submitter/Dataset/Edit.vue
@@ -1,25 +1,55 @@
+<!-- 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>
-            <SectionTitleLineWithButton :icon="mdiImageText" title="Update dataset" main>
-                <BaseButton
-                    :route-name="stardust.route('dataset.list')"
-                    :icon="mdiArrowLeftBoldOutline"
-                    label="Back"
-                    color="white"
-                    rounded-full
-                    small
-                />
+            <!-- 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>
 
+            <!-- Success/Error Notifications -->
             <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
                 {{ flash.message }}
             </NotificationBar>
             <FormValidationErrors v-bind:errors="errors" />
 
-            <!-- @auto-save="submitAlternative" -->
-            <CardBox :form="true">
+            <!-- Main Form with Sections -->
+            <CardBox :form="true" class="shadow-lg">
                 <UnsavedChangesWarning
                     :show="hasUnsavedChanges"
                     :changes-summary="getChangesSummary()"
@@ -29,58 +59,39 @@
                     :auto-save-delay="30"
                     @save="submitAlternative"
                 />
-                <div class="mb-4">
-                    <div class="flex flex-col md:flex-row">
-                        <!-- (1) language field -->
+                <!-- 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 -->
                         <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 }"
-                            class="w-full mx-2 flex-1"
-                        >
-                            <FormControl
+                        <FormField label="Dataset Type *" help="required: dataset type" :class="{ 'text-red-400': form.errors.type }">
+                             <FormControl
                                 required
                                 v-model="form.type"
                                 :type="'select'"
@@ -115,17 +126,40 @@
                             </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="mb-6 shadow"
-                        :has-form-data="false"
-                        title="Titles"
+                        class="ml-10 shadow-md"
+                        title="Main & Additional Titles"
                         :icon="mdiFinance"
                         :header-icon="mdiPlusCircle"
-                        v-on:header-icon-click="addTitle()"
+                        @header-icon-click="addTitle()"
                     >
                         <div class="flex flex-col md:flex-row">
                             <FormField
@@ -238,15 +272,23 @@
                             </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="mb-6 shadow"
-                        :has-form-data="false"
-                        title="Descriptions"
+                        class="ml-10 shadow-md"
+                        title="Abstract & Additional Descriptions"
                         :icon="mdiFinance"
                         :header-icon="mdiPlusCircle"
-                        v-on:header-icon-click="addDescription()"
+                        @header-icon-click="addDescription()"
                     >
                         <div class="flex flex-col md:flex-row">
                             <FormField
@@ -359,35 +401,52 @@
                             </tbody>
                         </table>
                     </CardBox>
+                </div>
 
-                    <!-- (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"
+                <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."
                                 />
                             </div>
-                            <!-- <div class="flex-1 flex items-end">
+                            <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">
                                 <BaseButton
                                     :icon="mdiPlusCircle"
                                     @click.prevent="addNewAuthor"
@@ -397,104 +456,299 @@
                                     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="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."
+                            </div>
+                            <TablePersons
+                                :persons="form.authors"
+                                v-if="form.authors.length > 0"
+                                :errors="form.errors"
+                                :relation="'authors'"
                             />
-                        </div>
-                        <SearchAutocomplete
-                            source="/api/persons"
-                            :response-property="'first_name'"
-                            placeholder="search in person table...."
-                            v-on:person="onAddContributor"
-                        >
-                        </SearchAutocomplete>
+                            <div class="text-red-400 text-sm" v-if="form.errors.authors && Array.isArray(form.errors.authors)">
+                                {{ form.errors.authors.join(', ') }}
+                            </div>
+                        </CardBox>
 
-                        <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>
+                        <!-- (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>
 
-                    <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>
+                            <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 />
+                <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">
+                <!-- 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>
+
+                        <!-- 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"
+                            />
+                        </CardBox>
+
+                        <!-- References -->
+                        <CardBox
+                            class="shadow-md"
+                            has-table
+                            title="Dataset References"
+                            :icon="mdiEarthPlus"
+                            :header-icon="mdiPlusCircle"
+                            @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>
+
+                                        <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"
+                        />
+                    </div>
+                    <div class="flex flex-col md:flex-row ml-10">
                         <!-- x min and max -->
                         <FormField
                             label="Coverage X Min"
@@ -554,223 +808,99 @@
                             </FormControl>
                         </FormField>
                     </div>
+                </div>
 
-                    <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>
+                <BaseDivider />
 
-                                    <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>
+                <!-- 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>
 
-                        <!-- 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="ml-10">
+                        <FileUploadComponent
+                            v-model:files="form.files"
+                            v-model:filesToDelete="form.filesToDelete"
+                            :showClearButton="false"
+                            class="shadow-md"
                         />
-                    </CardBox>
-                </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>
-
-                <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 class="text-red-400 text-sm" v-if="form.errors['file'] && Array.isArray(form.errors['files'])">
+                            {{ form.errors['files'].join(', ') }}
+                        </div>
+                    </div>
                 </div>
 
+                <!-- Enhanced Footer with Action Buttons -->
                 <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>
+                    <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>
+
+                        <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>
                 </template>
             </CardBox>
-            <!-- 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>
+
+            <!-- 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>
             </div>
         </SectionMain>
     </LayoutAuthenticated>
@@ -1499,25 +1629,6 @@ 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 16d08d7..55921f3 100644
--- a/resources/js/menu.ts
+++ b/resources/js/menu.ts
@@ -12,7 +12,7 @@ import {
     mdiShieldCrownOutline,
     mdiLicense,
     mdiFileDocument,
-    mdiLibraryShelves 
+    mdiFolderMultiple, 
 } from '@mdi/js';
 
 export default [
@@ -92,6 +92,12 @@ 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 fd6d9fd..cd564a4 100644
--- a/start/routes.ts
+++ b/start/routes.ts
@@ -34,6 +34,7 @@ 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
@@ -234,6 +235,19 @@ 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 8003a9d..71bb8b1 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!
         },