diff --git a/app/Http/Controllers/Admin/MainRoleController.php b/app/Http/Controllers/Admin/MainRoleController.php
index 6c31f1c..f765755 100644
--- a/app/Http/Controllers/Admin/MainRoleController.php
+++ b/app/Http/Controllers/Admin/MainRoleController.php
@@ -6,8 +6,12 @@
  * @copyright Copyright (c) 2023 Notsoweb (https://notsoweb.com) - All rights reserved.
  */
 
-use App\Models\MainRole;
+use App\Http\Requests\StoreMainRole;
+use App\Http\Requests\UpdateMainRole;
+use App\Models\department;
+use App\Models\mainRole;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Log;
 use Notsoweb\Core\Http\Controllers\VueController;
 
 /**
@@ -21,22 +25,50 @@ class MainRoleController extends VueController
 {
   public function __construct()
   {
-    $this->vueRoot('admin.main-role');
+    $this->vueRoot('admin.mainRole');
   }
 
   public function index()
   {
     $q = request()->get('q');
 
+    $mainRoles = mainRole::orderBy('name', 'ASC')
+      ->where('name', 'LIKE', "%{$q}%")
+      ->with('department:id,name')
+      ->paginate(config('app.pagination'));
+
     return $this->vuew('index', [
-      'roles' => MainRole::where('name', 'LIKE', "%{$q}%")
-        ->orWhere('description', 'LIKE', "%{$q}%")
-        ->select([
-          'id',
-          'name',
-          'description',
-        ])
-        ->paginate(config('app.pagination'))
+      'mainRoles' => $mainRoles,
     ]);
   }
+
+  public function create()
+  {
+    $department = department::orderBy('name', 'ASC')->get();
+
+    return $this->vuew('create', [
+      'departments' => $department,
+    ]);
+  }
+
+  public function store(StoreMainRole $request)
+  {
+      mainRole::create($request->all());
+
+      return $this->index();
+  }
+
+  public function update(UpdateMainRole $request, mainRole $mainRole)
+  {
+      $mainRole->update($request->all());
+  }
+
+  public function destroy(mainRole $mainRole)
+  {   try{
+        $mainRole = mainRole::find($mainRole);
+        $mainRole->delete();
+      }catch (\Throwable $th) {
+        Log::channel('mainRole')->error($th->getMessage());
+      }
+  }
 }
diff --git a/app/Http/Requests/StoreMainRole.php b/app/Http/Requests/StoreMainRole.php
index b798988..3bc0ec7 100644
--- a/app/Http/Requests/StoreMainRole.php
+++ b/app/Http/Requests/StoreMainRole.php
@@ -34,6 +34,7 @@ public function rules()
         return [
             'name' => ['required', 'string'],
             'description' => ['nullable', 'string'],
+            'department_id' => ['required', 'integer'],
         ];
     }
 }
diff --git a/app/Http/Requests/UpdateMainRole.php b/app/Http/Requests/UpdateMainRole.php
index 0968dcc..2fb4d8b 100644
--- a/app/Http/Requests/UpdateMainRole.php
+++ b/app/Http/Requests/UpdateMainRole.php
@@ -34,6 +34,7 @@ public function rules()
         return [
             'name' => ['required', 'string'],
             'description' => ['nullable', 'string'],
+            'department_id' => ['required', 'integer','exists:departments,id'],
         ];
     }
 }
diff --git a/app/Models/main_role.php b/app/Models/mainRole.php
similarity index 94%
rename from app/Models/main_role.php
rename to app/Models/mainRole.php
index b72cc32..9ef8cc2 100644
--- a/app/Models/main_role.php
+++ b/app/Models/mainRole.php
@@ -38,6 +38,6 @@ class MainRole extends Model
      */
     public function department()
     {
-        return $this->belongsTo(Department::class);
+        return $this->belongsTo(department::class);
     }
 }
diff --git a/resources/js/Lang/es.js b/resources/js/Lang/es.js
index 78b1c51..644b7a2 100644
--- a/resources/js/Lang/es.js
+++ b/resources/js/Lang/es.js
@@ -236,6 +236,7 @@ export default {
     },
     department:{
       system: 'Sistema de departamentos',
+      title: 'Departamentos',
       create:{
         title:'Crear departamento',
         description:'Permite crear nuevos departamentos para los usuarios.',
@@ -243,5 +244,14 @@ export default {
         onError:'Error al crear el departamento',
       }
     },
+    mainRole: {
+      system: 'Sistema de roles principales',
+      create:{
+        title:'Crear rol principal',
+        description:'Permite crear nuevos roles principales para los usuarios.',
+        onSuccess:'Rol principal creado exitosamente',
+        onError:'Error al crear el rol principal',
+      },
+    },
     version:'Versión',
 }
diff --git a/resources/js/Layouts/DashboardLayout.vue b/resources/js/Layouts/DashboardLayout.vue
index 682b8c0..dc1bf11 100644
--- a/resources/js/Layouts/DashboardLayout.vue
+++ b/resources/js/Layouts/DashboardLayout.vue
@@ -80,6 +80,11 @@ onMounted(()=> {
                     name="Departamentos"
                     to="admin.departments.index"
                 />
+                <Link
+                    icon="assignment_ind"
+                    name="Rol Principal"
+                    to="admin.mainRoles.index"
+                />
                 <Link
                     icon="leaderboard"
                     name="Scores"
diff --git a/resources/js/Pages/Admin/Departments/Create.vue b/resources/js/Pages/Admin/Departments/Create.vue
index 4803c4f..afcd7bf 100644
--- a/resources/js/Pages/Admin/Departments/Create.vue
+++ b/resources/js/Pages/Admin/Departments/Create.vue
@@ -21,7 +21,6 @@ const form = useForm({
 const submit = () => form.post(route(goTo('store')), {
     onSuccess: () => Notify.success(transl('create.onSuccess')),
     onError:   () => Notify.error(transl('create.onError')),
-    onFinish:  () => form.reset('password')
 });
 </script>
 
diff --git a/resources/js/Pages/Admin/Departments/Index.vue b/resources/js/Pages/Admin/Departments/Index.vue
index 2bf392e..a400033 100644
--- a/resources/js/Pages/Admin/Departments/Index.vue
+++ b/resources/js/Pages/Admin/Departments/Index.vue
@@ -86,13 +86,6 @@ const query        = ref(Searcher.query);
                         </td>
                         <td class="table-item border">
                             <div class="flex justify-center space-x-2">
-                                <GoogleIcon
-                                    :title="$t('crud.show')"
-                                    class="btn-icon-primary"
-                                    name="visibility"
-                                    outline
-                                    @click="Modal.switchShowModal(model)"
-                                />
                                 <GoogleIcon
                                     v-if="can('edit')"
                                     :title="$t('crud.edit')"
diff --git a/resources/js/Pages/Admin/MainRole/Component.js b/resources/js/Pages/Admin/MainRole/Component.js
new file mode 100644
index 0000000..35e609c
--- /dev/null
+++ b/resources/js/Pages/Admin/MainRole/Component.js
@@ -0,0 +1,15 @@
+import { t } from '@/Lang/i18n';
+import { hasPermission } from '@/rolePermission.js';
+
+// Obtener ruta
+const goTo = (route) => `admin.mainRoles.${route}`
+// Obtener traducción del componente
+const transl = (lang) => t(`mainRole.${lang}`)
+// Determina si un usuario puede hacer algo no en base a los permisos
+const can = (permission) => hasPermission(`users.${permission}`)
+
+export {
+    can,
+    goTo,
+    transl
+}
diff --git a/resources/js/Pages/Admin/MainRole/Create.vue b/resources/js/Pages/Admin/MainRole/Create.vue
new file mode 100644
index 0000000..8c02a53
--- /dev/null
+++ b/resources/js/Pages/Admin/MainRole/Create.vue
@@ -0,0 +1,89 @@
+<script setup>
+import { goTo, transl } from "./Component";
+import { Link, useForm } from "@inertiajs/vue3";
+
+import PrimaryButton from "@/Components/Dashboard/Button/Primary.vue";
+import Input from "@/Components/Dashboard/Form/Input.vue";
+import PageHeader from "@/Components/Dashboard/PageHeader.vue";
+import GoogleIcon from "@/Components/Shared/GoogleIcon.vue";
+import DashboardLayout from "@/Layouts/DashboardLayout.vue";
+import Selectable from "@/Components/Dashboard/Form/Selectable.vue";
+
+defineProps({
+  departments: Object,
+});
+
+const form = useForm({
+  name: "",
+  description: "",
+  department_id: "",
+});
+
+const submit = () =>
+  form
+    .transform((data) => ({
+      ...data,
+      department_id: form.department_id?.id,
+    }))
+    .post(route(goTo("store")), {
+      onSuccess: () => Notify.success(transl("create.onSuccess")),
+      onError: () => Notify.error(transl("create.onError")),
+    });
+</script>
+
+<template>
+  <DashboardLayout :title="transl('create.title')">
+    <PageHeader>
+      <Link :href="route(goTo('index'))">
+        <GoogleIcon
+          :title="$t('return')"
+          class="btn-icon-primary"
+          name="arrow_back"
+          outline
+        />
+      </Link>
+    </PageHeader>
+    <div class="w-full pb-8">
+      <div class="mt-8">
+        <p v-text="transl('create.description')" />
+      </div>
+    </div>
+    <div class="w-full">
+      <form @submit.prevent="submit" class="grid gap-4 grid-cols-6">
+        <Input
+          id="Nombre"
+          class="col-span-2"
+          v-model="form.name"
+          :onError="form.errors.name"
+          autofocus
+          required
+        />
+        <Input
+          id="Descrición"
+          class="col-span-2"
+          v-model="form.description"
+          :onError="form.errors.description"
+          autofocus
+        />
+        <Selectable
+          id="department_id"
+          class="col-span-3"
+          v-model="form.department_id"
+          :options="departments"
+          :onError="form.errors.department_id"
+          :title="$t('department.title')"
+          required
+        />
+        <div
+          class="col-span-6 flex flex-col items-center justify-end space-y-4 mt-4"
+        >
+          <PrimaryButton
+            :class="{ 'opacity-25': form.processing }"
+            :disabled="form.processing"
+            v-text="transl('create.title')"
+          />
+        </div>
+      </form>
+    </div>
+  </DashboardLayout>
+</template>
diff --git a/resources/js/Pages/Admin/MainRole/Destroy.vue b/resources/js/Pages/Admin/MainRole/Destroy.vue
new file mode 100644
index 0000000..698d010
--- /dev/null
+++ b/resources/js/Pages/Admin/MainRole/Destroy.vue
@@ -0,0 +1,43 @@
+<script setup>
+import { transl, goTo } from './Component'
+import { router } from '@inertiajs/vue3';
+
+import DestroyModal from '@/Components/Dashboard/Modal/Destroy.vue';
+import Header       from '@/Components/Dashboard/Modal/Elements/Header.vue';
+
+const emit = defineEmits([
+    'close',
+    'switchModal'
+]);
+
+const props = defineProps({
+    show: Boolean,
+    model: Object
+});
+
+const destroy = (id) => router.delete(route(goTo('destroy'), {id}), {
+    preserveScroll: true,
+    onSuccess: () => {
+        props.model.pop;
+        Notify.success(transl('deleted'));
+        emit('close');
+    },
+    onError: () => {
+        Notify.info(transl('notFound'));
+        emit('close');
+    }
+});
+</script>
+
+<template>
+    <DestroyModal
+        :show="show"
+        @close="$emit('close')"
+        @destroy="destroy(model.id)"
+    >
+        <Header
+            :title="model.name"
+            :subtitle="model.description"
+        />
+    </DestroyModal>
+</template>
diff --git a/resources/js/Pages/Admin/MainRole/Edit.vue b/resources/js/Pages/Admin/MainRole/Edit.vue
new file mode 100644
index 0000000..76a4df2
--- /dev/null
+++ b/resources/js/Pages/Admin/MainRole/Edit.vue
@@ -0,0 +1,67 @@
+<script setup>
+import { goTo } from './Component';
+import { useForm } from '@inertiajs/vue3';
+import { onUpdated } from 'vue';
+
+import Input     from '@/Components/Dashboard/Form/Input.vue';
+import EditModal from '@/Components/Dashboard/Modal/Edit.vue';
+import Header    from '@/Components/Dashboard/Modal/Elements/Header.vue';
+
+const emit = defineEmits([
+    'close',
+    'switchModal'
+]);
+
+const props = defineProps({
+    show: Boolean,
+    model: Object
+});
+
+const form = useForm({});
+
+const update = (id) => {
+    form.transform(data => ({
+        ...props.model
+    })).put(route(goTo('update'), {id}),{
+        preserveScroll: true,
+        onSuccess: () => {
+            Notify.success(lang('updated'))
+            emit('switchModal')
+        }
+    });
+}
+
+
+</script>
+<template>
+    <EditModal
+        :show="show"
+        @close="$emit('close')"
+        @update="update(model.id)"
+    >
+        <Header
+            :title="model.name"
+        />
+        <div class="py-2 border-b">
+            <div class="p-4">
+                <form>
+                    <div class="grid gap-6 mb-6 lg:grid-cols-2">
+                        <Input
+                            id="Nombre"
+                            placeholder="name"
+                            v-model="model.name"
+                            :onError="form.errors.name"
+                            required
+                        />
+                        <Input
+                            id="Descripción"
+                            v-model="model.description"
+                            :onError="form.errors.description"
+                            required
+                        />
+                    </div>
+                </form>
+            </div>
+        </div>
+    </EditModal>
+</template>
diff --git a/resources/js/Pages/Admin/MainRole/Index.vue b/resources/js/Pages/Admin/MainRole/Index.vue
new file mode 100644
index 0000000..24651c7
--- /dev/null
+++ b/resources/js/Pages/Admin/MainRole/Index.vue
@@ -0,0 +1,151 @@
+<script setup>
+import { transl, can, goTo } from './Component'
+import { ref } from 'vue';
+import { Link  } from '@inertiajs/vue3';
+
+import ModalController    from '@/Controllers/ModalController.js';
+import SearcherController from '@/Controllers/SearcherController.js';
+
+import SearcherHead    from '@/Components/Dashboard/Searcher.vue';
+import Table           from '@/Components/Dashboard/Table.vue';
+import GoogleIcon      from '@/Components/Shared/GoogleIcon.vue';
+import DashboardLayout from '@/Layouts/DashboardLayout.vue';
+import DestroyView     from './Destroy.vue';
+import EditView        from './Edit.vue';
+import ShowView        from './Show.vue';
+
+const props = defineProps({
+    mainRoles: Object
+});
+
+// Controladores
+const Modal    = new ModalController();
+const Searcher = new SearcherController(goTo('index'));
+
+// Variables de controladores
+const destroyModal = ref(Modal.destroyModal);
+const editModal    = ref(Modal.editModal);
+const showModal    = ref(Modal.showModal);
+const modelModal   = ref(Modal.modelModal);
+const query        = ref(Searcher.query);
+</script>
+
+<template>
+    <DashboardLayout :title="transl('system')">
+        <SearcherHead @search="Searcher.search">
+            <Link
+            v-if="can('create')"
+                :href="route(goTo('create'))"
+            >
+                <GoogleIcon
+                    :title="$t('crud.create')"
+                    class="btn-icon-primary"
+                    name="add"
+                    outline
+                />
+            </Link>
+        </SearcherHead>
+        <div class="pt-2 w-full">
+            <Table
+                :items="mainRoles"
+                @send-pagination="Searcher.searchWithPagination"
+            >
+                <template #head>
+                    <th
+                        class="table-item"
+                        v-text="$t('Nombre')"
+                    />
+                    <th
+                        class="table-item"
+                        v-text="$t('Descripción')"
+                    />
+                    <th
+                        class="table-item"
+                        v-text="$t('Departamento')"
+                    />
+                    <th
+                        class="table-item w-44"
+                        v-text="$t('actions')"
+                    />
+                </template>
+                <template #body="{items}">
+                    <tr v-for="model in items">
+                        <td class="table-item border">
+                          <div class="flex items-center text-sm">
+                            <div>
+                              <p class="font-semibold">
+                                {{ model.name }}
+                              </p>
+                            </div>
+                          </div>
+                        </td>
+                        <td class="table-item border">
+                          <div class="flex items-center text-sm">
+                            <div>
+                              <p class="font-semibold">
+                                {{ model.description }}
+                              </p>
+                            </div>
+                          </div>
+                        </td>
+                        <td class="table-item border">
+                          <div class="flex items-center text-sm">
+                            <div>
+                              <p class="font-semibold">
+                                {{ model.department?.name }}
+                              </p>
+                            </div>
+                          </div>
+                        </td>
+                        <td class="table-item border">
+                            <div class="flex justify-center space-x-2">
+                                <GoogleIcon
+                                    v-if="can('edit')"
+                                    :title="$t('crud.edit')"
+                                    class="btn-icon-primary"
+                                    name="edit"
+                                    outline
+                                    @click="Modal.switchEditModal(model)"
+                                />
+                                <GoogleIcon
+                                    v-if="can('destroy')"
+                                    :title="$t('crud.destroy')"
+                                    class="btn-icon-primary"
+                                    name="delete"
+                                    outline
+                                    @click="Modal.switchDestroyModal(model)"
+                                />
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+                <template #empty>
+                    <td class="table-item border">
+                        <div class="flex items-center text-sm">
+                          <div>
+                            <p class="font-semibold">
+                                {{ $t('registers.empty') }}
+                            </p>
+                          </div>
+                        </div>
+                    </td>
+                    <td class="table-item border">-</td>
+                    <td class="table-item border">-</td>
+                </template>
+            </Table>
+        </div>
+        <EditView
+            v-if="can('edit')"
+            :show="editModal"
+            :model="modelModal"
+            @switchModal="Modal.switchShowEditModal"
+            @close="Modal.switchEditModal"
+        />
+        <DestroyView
+            v-if="can('create')"
+            :show="destroyModal"
+            :model="modelModal"
+            @close="Modal.switchDestroyModal"
+        />
+    </DashboardLayout>
+</template>
diff --git a/resources/js/Pages/Admin/MainRole/Show.vue b/resources/js/Pages/Admin/MainRole/Show.vue
new file mode 100644
index 0000000..8211c9e
--- /dev/null
+++ b/resources/js/Pages/Admin/MainRole/Show.vue
@@ -0,0 +1,41 @@
+<script setup>
+import { can } from './Component'
+
+import Header from '@/Components/Dashboard/Modal/Elements/Header.vue';
+import ShowModal  from '@/Components/Dashboard/Modal/Show.vue';
+import GoogleIcon from '@/Components/Shared/GoogleIcon.vue';
+
+defineEmits([
+    'close',
+    'switchModal'
+]);
+
+defineProps({
+    show: Boolean,
+    model: Object
+});
+</script>
+<template>
+    <ShowModal
+        :show="show"
+        :editable="can('edit')"
+        @close="$emit('close')"
+        @edit="$emit('switchModal')"
+        editable
+    >
+        <Header
+            :title="model.alias"
+        >
+        </Header>
+        <div class="py-2 border-b">
+            <div class="px-4 py-2 flex">
+                <GoogleIcon
+                    class="text-xl text-success"
+                    name="contact_mail"
+                />
+                <div class="pl-3">
+                </div>
+            </div>
+        </div>
+    </ShowModal>
+</template>
diff --git a/routes/web.php b/routes/web.php
index ff80d72..92074ed 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -6,6 +6,7 @@
 use App\Http\Controllers\Dashboard\IndexController;
 use App\Http\Controllers\Dashboard\NotificationController;
 use App\Http\Controllers\Admin\DepartmentController;
+use App\Http\Controllers\Admin\MainRoleController;
 use App\Http\Controllers\Developer\RoleController;
 use App\Http\Controllers\Example\IndexController as ExampleIndexController;
 use Illuminate\Support\Facades\Route;
@@ -57,6 +58,7 @@
   Route::resource('users', UserController::class);
   Route::resource('scores', ScoreController::class);
   Route::resource('departments', DepartmentController::class);
+  Route::resource('mainRoles', MainRoleController::class);
 
     Route::prefix('/users')->name('users.')->group(function()
     {