diff --git a/src/pages/Account/Role/Card/RoleDescriptor.vue b/src/pages/Account/Role/Card/RoleDescriptor.vue
new file mode 100644
index 000000000..89712b0b9
--- /dev/null
+++ b/src/pages/Account/Role/Card/RoleDescriptor.vue
@@ -0,0 +1,92 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import useCardDescription from 'src/composables/useCardDescription';
+import { useQuasar } from 'quasar';
+
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const route = useRoute();
+
+const quasar = useQuasar();
+const router = useRouter();
+
+const { notify } = useNotify();
+const { t } = useI18n();
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+const data = ref(useCardDescription());
+const setData = (entity) => (data.value = useCardDescription(entity.name, entity.id));
+const filter = {
+    where: { id: entityId },
+};
+const removeRole = () => {
+    quasar
+        .dialog({
+            title: 'Are you sure you want to delete it?',
+            message: 'Delete department',
+            ok: {
+                push: true,
+                color: 'primary',
+            },
+            cancel: true,
+        })
+        .onOk(async () => {
+            try {
+                await axios.post(
+                    `/Departments/${entityId.value}/removeChild`,
+                    entityId.value
+                );
+                router.push({ name: 'WorkerDepartment' });
+                notify('department.departmentRemoved', 'positive');
+            } catch (err) {
+                console.error('Error removing department');
+            }
+        });
+};
+</script>
+
+<template>
+    <CardDescriptor
+        ref="descriptor"
+        :url="`VnRoles`"
+        :filter="filter"
+        module="Role"
+        @on-fetch="setData"
+        data-key="accountData"
+        :title="data.title"
+        :subtitle="data.subtitle"
+    >
+        <template #menu>
+            <QItem v-ripple clickable @click="removeRole()">
+                <QItemSection>{{ t('Delete') }}</QItemSection>
+            </QItem>
+        </template>
+        <template #body="{ entity }">
+            <VnLv :label="t('role.card.description')" :value="entity.description" />
+        </template>
+    </CardDescriptor>
+</template>
+<style scoped>
+.q-item__label {
+    margin-top: 0;
+}
+</style>
+<i18n>
+    en:
+        accountRate: Claming rate
+    es:
+        accountRate: Ratio de reclamación
+</i18n>
diff --git a/src/router/modules/index.js b/src/router/modules/index.js
index fb1bdc466..bf7e46b00 100644
--- a/src/router/modules/index.js
+++ b/src/router/modules/index.js
@@ -21,6 +21,7 @@ import Zone from './zone';
 import Account from './account';
 import Monitor from './monitor';
 import MailAlias from './mailAlias';
+import Role from './role';
 
 export default [
     Item,
@@ -46,4 +47,5 @@ export default [
     Account,
     MailAlias,
     Monitor,
+    Role,
 ];
diff --git a/src/router/routes.js b/src/router/routes.js
index 3ca2175f8..359ce5317 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -21,6 +21,7 @@ import zone from 'src/router/modules/zone';
 import account from './modules/account';
 import monitor from 'src/router/modules/monitor';
 import mailAlias from './modules/mailAlias';
+import role from './modules/role';
 
 const routes = [
     {
@@ -82,6 +83,7 @@ const routes = [
             ItemType,
             zone,
             account,
+            role,
             mailAlias,
             {
                 path: '/:catchAll(.*)*',