diff --git a/src/pages/Account/AccountAccounts.vue b/src/pages/Account/AccountAccounts.vue
new file mode 100644
index 000000000..ba6f50cbc
--- /dev/null
+++ b/src/pages/Account/AccountAccounts.vue
@@ -0,0 +1,118 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useStateStore } from 'stores/useStateStore';
+import { toDate } from 'filters/index';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import AccountFilter from './AccountFilter.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import CardList from 'src/components/ui/CardList.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import AccountSummary from './Card/AccountSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { getUrl } from 'src/composables/getUrl';
+
+const stateStore = useStateStore();
+const router = useRouter();
+const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
+
+const STATE_COLOR = {
+    pending: 'warning',
+    managed: 'info',
+    resolved: 'positive',
+};
+function getApiUrl() {
+    return new URL(window.location).origin;
+}
+function stateColor(code) {
+    return STATE_COLOR[code];
+}
+function navigate(event, id) {
+    if (event.ctrlKey || event.metaKey)
+        return window.open(`${getApiUrl()}/#/account/${id}/summary`);
+    router.push({ path: `/account/${id}` });
+}
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <AccountFilter data-key="AccountList" />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="AccountList"
+                url="Accounts/filter"
+                :order="['priority ASC', 'created DESC']"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        :id="row.id"
+                        :key="row.id"
+                        :title="row.clientName"
+                        @click="navigate($event, row.id)"
+                        v-for="row of rows"
+                    >
+                        <template #list-items>
+                            <VnLv :label="t('account.list.customer')">
+                                <template #value>
+                                    <span class="link" @click.stop>
+                                        {{ row.clientName }}
+                                        <CustomerDescriptorProxy :id="row.clientFk" />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv :label="t('account.list.assignedTo')">
+                                <template #value>
+                                    <span @click.stop>
+                                        <VnUserLink
+                                            :name="row.workerName"
+                                            :worker-id="row.workerFk"
+                                        />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv
+                                :label="t('account.list.created')"
+                                :value="toDate(row.created)"
+                            />
+                            <VnLv :label="t('account.list.state')">
+                                <template #value>
+                                    <QBadge
+                                        text-color="black"
+                                        :color="stateColor(row.stateCode)"
+                                        dense
+                                    >
+                                        {{ row.stateDescription }}
+                                    </QBadge>
+                                </template>
+                            </VnLv>
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('globals.description')"
+                                @click.stop
+                                outline
+                                style="margin-top: 15px"
+                            >
+                                <CustomerDescriptorProxy :id="row.clientFk" />
+                            </QBtn>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id, AccountSummary)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+</template>
diff --git a/src/pages/Account/AccountAcls.vue b/src/pages/Account/AccountAcls.vue
new file mode 100644
index 000000000..a479ca330
--- /dev/null
+++ b/src/pages/Account/AccountAcls.vue
@@ -0,0 +1,116 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useStateStore } from 'stores/useStateStore';
+import { toDate } from 'filters/index';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import AccountFilter from './AccountFilter.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import CardList from 'src/components/ui/CardList.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import AccountSummary from './Card/AccountSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+
+const stateStore = useStateStore();
+const router = useRouter();
+const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
+
+const STATE_COLOR = {
+    pending: 'warning',
+    managed: 'info',
+    resolved: 'positive',
+};
+function getApiUrl() {
+    return new URL(window.location).origin;
+}
+function stateColor(code) {
+    return STATE_COLOR[code];
+}
+function navigate(event, id) {
+    if (event.ctrlKey || event.metaKey)
+        return window.open(`${getApiUrl()}/#/account/${id}/summary`);
+    router.push({ path: `/account/${id}` });
+}
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <AccountFilter data-key="AccountList" />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="AccountList"
+                url="Accounts/filter"
+                :order="['priority ASC', 'created DESC']"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        :id="row.id"
+                        :key="row.id"
+                        :title="row.clientName"
+                        @click="navigate($event, row.id)"
+                        v-for="row of rows"
+                    >
+                        <template #list-items>
+                            <VnLv :label="t('account.list.customer')">
+                                <template #value>
+                                    <span class="link" @click.stop>
+                                        {{ row.clientName }}
+                                        <CustomerDescriptorProxy :id="row.clientFk" />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv :label="t('account.list.assignedTo')">
+                                <template #value>
+                                    <span @click.stop>
+                                        <VnUserLink
+                                            :name="row.workerName"
+                                            :worker-id="row.workerFk"
+                                        />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv
+                                :label="t('account.list.created')"
+                                :value="toDate(row.created)"
+                            />
+                            <VnLv :label="t('account.list.state')">
+                                <template #value>
+                                    <QBadge
+                                        text-color="black"
+                                        :color="stateColor(row.stateCode)"
+                                        dense
+                                    >
+                                        {{ row.stateDescription }}
+                                    </QBadge>
+                                </template>
+                            </VnLv>
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('globals.description')"
+                                @click.stop
+                                outline
+                                style="margin-top: 15px"
+                            >
+                                <CustomerDescriptorProxy :id="row.clientFk" />
+                            </QBtn>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id, AccountSummary)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+</template>
diff --git a/src/pages/Account/AccountAlias.vue b/src/pages/Account/AccountAlias.vue
new file mode 100644
index 000000000..a479ca330
--- /dev/null
+++ b/src/pages/Account/AccountAlias.vue
@@ -0,0 +1,116 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useStateStore } from 'stores/useStateStore';
+import { toDate } from 'filters/index';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import AccountFilter from './AccountFilter.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import CardList from 'src/components/ui/CardList.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import AccountSummary from './Card/AccountSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+
+const stateStore = useStateStore();
+const router = useRouter();
+const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
+
+const STATE_COLOR = {
+    pending: 'warning',
+    managed: 'info',
+    resolved: 'positive',
+};
+function getApiUrl() {
+    return new URL(window.location).origin;
+}
+function stateColor(code) {
+    return STATE_COLOR[code];
+}
+function navigate(event, id) {
+    if (event.ctrlKey || event.metaKey)
+        return window.open(`${getApiUrl()}/#/account/${id}/summary`);
+    router.push({ path: `/account/${id}` });
+}
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <AccountFilter data-key="AccountList" />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="AccountList"
+                url="Accounts/filter"
+                :order="['priority ASC', 'created DESC']"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        :id="row.id"
+                        :key="row.id"
+                        :title="row.clientName"
+                        @click="navigate($event, row.id)"
+                        v-for="row of rows"
+                    >
+                        <template #list-items>
+                            <VnLv :label="t('account.list.customer')">
+                                <template #value>
+                                    <span class="link" @click.stop>
+                                        {{ row.clientName }}
+                                        <CustomerDescriptorProxy :id="row.clientFk" />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv :label="t('account.list.assignedTo')">
+                                <template #value>
+                                    <span @click.stop>
+                                        <VnUserLink
+                                            :name="row.workerName"
+                                            :worker-id="row.workerFk"
+                                        />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv
+                                :label="t('account.list.created')"
+                                :value="toDate(row.created)"
+                            />
+                            <VnLv :label="t('account.list.state')">
+                                <template #value>
+                                    <QBadge
+                                        text-color="black"
+                                        :color="stateColor(row.stateCode)"
+                                        dense
+                                    >
+                                        {{ row.stateDescription }}
+                                    </QBadge>
+                                </template>
+                            </VnLv>
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('globals.description')"
+                                @click.stop
+                                outline
+                                style="margin-top: 15px"
+                            >
+                                <CustomerDescriptorProxy :id="row.clientFk" />
+                            </QBtn>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id, AccountSummary)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+</template>
diff --git a/src/pages/Account/AccountConnections.vue b/src/pages/Account/AccountConnections.vue
new file mode 100644
index 000000000..a479ca330
--- /dev/null
+++ b/src/pages/Account/AccountConnections.vue
@@ -0,0 +1,116 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useStateStore } from 'stores/useStateStore';
+import { toDate } from 'filters/index';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import AccountFilter from './AccountFilter.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import CardList from 'src/components/ui/CardList.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import AccountSummary from './Card/AccountSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+
+const stateStore = useStateStore();
+const router = useRouter();
+const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
+
+const STATE_COLOR = {
+    pending: 'warning',
+    managed: 'info',
+    resolved: 'positive',
+};
+function getApiUrl() {
+    return new URL(window.location).origin;
+}
+function stateColor(code) {
+    return STATE_COLOR[code];
+}
+function navigate(event, id) {
+    if (event.ctrlKey || event.metaKey)
+        return window.open(`${getApiUrl()}/#/account/${id}/summary`);
+    router.push({ path: `/account/${id}` });
+}
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <AccountFilter data-key="AccountList" />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="AccountList"
+                url="Accounts/filter"
+                :order="['priority ASC', 'created DESC']"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        :id="row.id"
+                        :key="row.id"
+                        :title="row.clientName"
+                        @click="navigate($event, row.id)"
+                        v-for="row of rows"
+                    >
+                        <template #list-items>
+                            <VnLv :label="t('account.list.customer')">
+                                <template #value>
+                                    <span class="link" @click.stop>
+                                        {{ row.clientName }}
+                                        <CustomerDescriptorProxy :id="row.clientFk" />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv :label="t('account.list.assignedTo')">
+                                <template #value>
+                                    <span @click.stop>
+                                        <VnUserLink
+                                            :name="row.workerName"
+                                            :worker-id="row.workerFk"
+                                        />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv
+                                :label="t('account.list.created')"
+                                :value="toDate(row.created)"
+                            />
+                            <VnLv :label="t('account.list.state')">
+                                <template #value>
+                                    <QBadge
+                                        text-color="black"
+                                        :color="stateColor(row.stateCode)"
+                                        dense
+                                    >
+                                        {{ row.stateDescription }}
+                                    </QBadge>
+                                </template>
+                            </VnLv>
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('globals.description')"
+                                @click.stop
+                                outline
+                                style="margin-top: 15px"
+                            >
+                                <CustomerDescriptorProxy :id="row.clientFk" />
+                            </QBtn>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id, AccountSummary)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+</template>
diff --git a/src/pages/Account/AccountFilter.vue b/src/pages/Account/AccountFilter.vue
new file mode 100644
index 000000000..23b72266c
--- /dev/null
+++ b/src/pages/Account/AccountFilter.vue
@@ -0,0 +1,225 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnSelect from 'components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const workers = ref();
+const states = ref();
+</script>
+
+<template>
+    <FetchData url="AccountStates" @on-fetch="(data) => (states = data)" auto-load />
+    <FetchData
+        url="Workers/activeWithInheritedRole"
+        :filter="{ where: { role: 'salesPerson' } }"
+        @on-fetch="(data) => (workers = data)"
+        auto-load
+    />
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params, searchFn }">
+            <QItem class="q-my-sm">
+                <QItemSection>
+                    <VnInput
+                        :label="t('Customer ID')"
+                        v-model="params.clientFk"
+                        lazy-rules
+                        is-outlined
+                    >
+                        <template #prepend>
+                            <QIcon name="badge" size="xs"></QIcon> </template
+                    ></VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnInput
+                        :label="t('Client Name')"
+                        v-model="params.clientName"
+                        lazy-rules
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="!workers">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="workers">
+                    <VnSelect
+                        :label="t('Salesperson')"
+                        v-model="params.salesPersonFk"
+                        @update:model-value="searchFn()"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        use-input
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="!workers">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="workers">
+                    <VnSelect
+                        :label="t('Attender')"
+                        v-model="params.attenderFk"
+                        @update:model-value="searchFn()"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        use-input
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="!workers">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="workers">
+                    <VnSelect
+                        :label="t('Responsible')"
+                        v-model="params.accountResponsibleFk"
+                        @update:model-value="searchFn()"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        use-input
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="!states">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="states">
+                    <VnSelect
+                        :label="t('State')"
+                        v-model="params.accountStateFk"
+                        @update:model-value="searchFn()"
+                        :options="states"
+                        option-value="id"
+                        option-label="description"
+                        emit-value
+                        map-options
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        v-model="params.myTeam"
+                        :label="t('myTeam')"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
+            </QItem>
+            <QSeparator />
+            <QExpansionItem :label="t('More options')" expand-separator>
+                <!-- <QItem>
+                        <QItemSection>
+                            <qSelect
+                                :label="t('Item')"
+                                v-model="params.itemFk"
+                                :options="items"
+                                :loading="loading"
+                                @filter="filterFn"
+                                @virtual-scroll="onScroll"
+                                option-value="id"
+                                option-label="name"
+                                emit-value
+                                map-options
+                            />
+                        </QItemSection>
+                    </QItem> -->
+                <QItem>
+                    <QItemSection>
+                        <VnInputDate
+                            v-model="params.created"
+                            :label="t('Created')"
+                            is-outlined
+                        />
+                    </QItemSection>
+                </QItem>
+            </QExpansionItem>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+en:
+    params:
+        search: Contains
+        clientFk: Customer
+        clientName: Customer
+        salesPersonFk: Salesperson
+        attenderFk: Attender
+        accountResponsibleFk: Responsible
+        accountStateFk: State
+        created: Created
+    myTeam: My team
+es:
+    params:
+        search: Contiene
+        clientFk: Cliente
+        clientName: Cliente
+        salesPersonFk: Comercial
+        attenderFk: Asistente
+        accountResponsibleFk: Responsable
+        accountStateFk: Estado
+        created: Creada
+    Customer ID: ID cliente
+    Client Name: Nombre del cliente
+    Salesperson: Comercial
+    Attender: Asistente
+    Responsible: Responsable
+    State: Estado
+    Item: Artículo
+    Created: Creada
+    More options: Más opciones
+    myTeam: Mi equipo
+</i18n>
diff --git a/src/pages/Account/AccountLdap.vue b/src/pages/Account/AccountLdap.vue
new file mode 100644
index 000000000..a479ca330
--- /dev/null
+++ b/src/pages/Account/AccountLdap.vue
@@ -0,0 +1,116 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useStateStore } from 'stores/useStateStore';
+import { toDate } from 'filters/index';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import AccountFilter from './AccountFilter.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import CardList from 'src/components/ui/CardList.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import AccountSummary from './Card/AccountSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+
+const stateStore = useStateStore();
+const router = useRouter();
+const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
+
+const STATE_COLOR = {
+    pending: 'warning',
+    managed: 'info',
+    resolved: 'positive',
+};
+function getApiUrl() {
+    return new URL(window.location).origin;
+}
+function stateColor(code) {
+    return STATE_COLOR[code];
+}
+function navigate(event, id) {
+    if (event.ctrlKey || event.metaKey)
+        return window.open(`${getApiUrl()}/#/account/${id}/summary`);
+    router.push({ path: `/account/${id}` });
+}
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <AccountFilter data-key="AccountList" />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="AccountList"
+                url="Accounts/filter"
+                :order="['priority ASC', 'created DESC']"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        :id="row.id"
+                        :key="row.id"
+                        :title="row.clientName"
+                        @click="navigate($event, row.id)"
+                        v-for="row of rows"
+                    >
+                        <template #list-items>
+                            <VnLv :label="t('account.list.customer')">
+                                <template #value>
+                                    <span class="link" @click.stop>
+                                        {{ row.clientName }}
+                                        <CustomerDescriptorProxy :id="row.clientFk" />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv :label="t('account.list.assignedTo')">
+                                <template #value>
+                                    <span @click.stop>
+                                        <VnUserLink
+                                            :name="row.workerName"
+                                            :worker-id="row.workerFk"
+                                        />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv
+                                :label="t('account.list.created')"
+                                :value="toDate(row.created)"
+                            />
+                            <VnLv :label="t('account.list.state')">
+                                <template #value>
+                                    <QBadge
+                                        text-color="black"
+                                        :color="stateColor(row.stateCode)"
+                                        dense
+                                    >
+                                        {{ row.stateDescription }}
+                                    </QBadge>
+                                </template>
+                            </VnLv>
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('globals.description')"
+                                @click.stop
+                                outline
+                                style="margin-top: 15px"
+                            >
+                                <CustomerDescriptorProxy :id="row.clientFk" />
+                            </QBtn>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id, AccountSummary)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+</template>
diff --git a/src/pages/Account/AccountList.vue b/src/pages/Account/AccountList.vue
new file mode 100644
index 000000000..f26c741c2
--- /dev/null
+++ b/src/pages/Account/AccountList.vue
@@ -0,0 +1,148 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useStateStore } from 'stores/useStateStore';
+import { toDate } from 'filters/index';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import AccountFilter from './AccountFilter.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import CardList from 'src/components/ui/CardList.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import AccountSummary from './Card/AccountSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { getUrl } from 'src/composables/getUrl';
+
+const stateStore = useStateStore();
+const router = useRouter();
+const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
+
+const STATE_COLOR = {
+    pending: 'warning',
+    managed: 'info',
+    resolved: 'positive',
+};
+function getApiUrl() {
+    return new URL(window.location).origin;
+}
+function stateColor(code) {
+    return STATE_COLOR[code];
+}
+function navigate(event, id) {
+    if (event.ctrlKey || event.metaKey)
+        return window.open(`${getApiUrl()}/#/account/${id}/summary`);
+    router.push({ path: `/account/${id}` });
+}
+</script>
+
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="AccountList"
+                :label="t('Search account')"
+                :info="t('You can search by account id or customer name')"
+            />
+        </Teleport>
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <QBtn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </QTooltip>
+                </QBtn>
+            </div>
+        </Teleport>
+    </template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <AccountFilter data-key="AccountList" />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="AccountList"
+                url="Accounts/filter"
+                :order="['priority ASC', 'created DESC']"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        :id="row.id"
+                        :key="row.id"
+                        :title="row.clientName"
+                        @click="navigate($event, row.id)"
+                        v-for="row of rows"
+                    >
+                        <template #list-items>
+                            <VnLv :label="t('account.list.customer')">
+                                <template #value>
+                                    <span class="link" @click.stop>
+                                        {{ row.clientName }}
+                                        <CustomerDescriptorProxy :id="row.clientFk" />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv :label="t('account.list.assignedTo')">
+                                <template #value>
+                                    <span @click.stop>
+                                        <VnUserLink
+                                            :name="row.workerName"
+                                            :worker-id="row.workerFk"
+                                        />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv
+                                :label="t('account.list.created')"
+                                :value="toDate(row.created)"
+                            />
+                            <VnLv :label="t('account.list.state')">
+                                <template #value>
+                                    <QBadge
+                                        text-color="black"
+                                        :color="stateColor(row.stateCode)"
+                                        dense
+                                    >
+                                        {{ row.stateDescription }}
+                                    </QBadge>
+                                </template>
+                            </VnLv>
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('globals.description')"
+                                @click.stop
+                                outline
+                                style="margin-top: 15px"
+                            >
+                                <CustomerDescriptorProxy :id="row.clientFk" />
+                            </QBtn>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id, AccountSummary)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+</template>
+
+<i18n>
+es:
+    Search account: Buscar reclamación
+    You can search by account id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
+</i18n>
diff --git a/src/pages/Account/AccountMain.vue b/src/pages/Account/AccountMain.vue
new file mode 100644
index 000000000..f0dc2e500
--- /dev/null
+++ b/src/pages/Account/AccountMain.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { useStateStore } from 'stores/useStateStore';
+import LeftMenu from 'components/LeftMenu.vue';
+
+const stateStore = useStateStore();
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit text-grey-8">
+            <LeftMenu />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <RouterView></RouterView>
+    </QPageContainer>
+</template>
diff --git a/src/pages/Account/AccountRoles.vue b/src/pages/Account/AccountRoles.vue
new file mode 100644
index 000000000..a479ca330
--- /dev/null
+++ b/src/pages/Account/AccountRoles.vue
@@ -0,0 +1,116 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useStateStore } from 'stores/useStateStore';
+import { toDate } from 'filters/index';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import AccountFilter from './AccountFilter.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import CardList from 'src/components/ui/CardList.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import AccountSummary from './Card/AccountSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+
+const stateStore = useStateStore();
+const router = useRouter();
+const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
+
+const STATE_COLOR = {
+    pending: 'warning',
+    managed: 'info',
+    resolved: 'positive',
+};
+function getApiUrl() {
+    return new URL(window.location).origin;
+}
+function stateColor(code) {
+    return STATE_COLOR[code];
+}
+function navigate(event, id) {
+    if (event.ctrlKey || event.metaKey)
+        return window.open(`${getApiUrl()}/#/account/${id}/summary`);
+    router.push({ path: `/account/${id}` });
+}
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <AccountFilter data-key="AccountList" />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="AccountList"
+                url="Accounts/filter"
+                :order="['priority ASC', 'created DESC']"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        :id="row.id"
+                        :key="row.id"
+                        :title="row.clientName"
+                        @click="navigate($event, row.id)"
+                        v-for="row of rows"
+                    >
+                        <template #list-items>
+                            <VnLv :label="t('account.list.customer')">
+                                <template #value>
+                                    <span class="link" @click.stop>
+                                        {{ row.clientName }}
+                                        <CustomerDescriptorProxy :id="row.clientFk" />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv :label="t('account.list.assignedTo')">
+                                <template #value>
+                                    <span @click.stop>
+                                        <VnUserLink
+                                            :name="row.workerName"
+                                            :worker-id="row.workerFk"
+                                        />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv
+                                :label="t('account.list.created')"
+                                :value="toDate(row.created)"
+                            />
+                            <VnLv :label="t('account.list.state')">
+                                <template #value>
+                                    <QBadge
+                                        text-color="black"
+                                        :color="stateColor(row.stateCode)"
+                                        dense
+                                    >
+                                        {{ row.stateDescription }}
+                                    </QBadge>
+                                </template>
+                            </VnLv>
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('globals.description')"
+                                @click.stop
+                                outline
+                                style="margin-top: 15px"
+                            >
+                                <CustomerDescriptorProxy :id="row.clientFk" />
+                            </QBtn>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id, AccountSummary)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+</template>
diff --git a/src/pages/Account/AccountSamba.vue b/src/pages/Account/AccountSamba.vue
new file mode 100644
index 000000000..ba6f50cbc
--- /dev/null
+++ b/src/pages/Account/AccountSamba.vue
@@ -0,0 +1,118 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useStateStore } from 'stores/useStateStore';
+import { toDate } from 'filters/index';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import AccountFilter from './AccountFilter.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import CardList from 'src/components/ui/CardList.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import AccountSummary from './Card/AccountSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { getUrl } from 'src/composables/getUrl';
+
+const stateStore = useStateStore();
+const router = useRouter();
+const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
+
+const STATE_COLOR = {
+    pending: 'warning',
+    managed: 'info',
+    resolved: 'positive',
+};
+function getApiUrl() {
+    return new URL(window.location).origin;
+}
+function stateColor(code) {
+    return STATE_COLOR[code];
+}
+function navigate(event, id) {
+    if (event.ctrlKey || event.metaKey)
+        return window.open(`${getApiUrl()}/#/account/${id}/summary`);
+    router.push({ path: `/account/${id}` });
+}
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <AccountFilter data-key="AccountList" />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="AccountList"
+                url="Accounts/filter"
+                :order="['priority ASC', 'created DESC']"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        :id="row.id"
+                        :key="row.id"
+                        :title="row.clientName"
+                        @click="navigate($event, row.id)"
+                        v-for="row of rows"
+                    >
+                        <template #list-items>
+                            <VnLv :label="t('account.list.customer')">
+                                <template #value>
+                                    <span class="link" @click.stop>
+                                        {{ row.clientName }}
+                                        <CustomerDescriptorProxy :id="row.clientFk" />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv :label="t('account.list.assignedTo')">
+                                <template #value>
+                                    <span @click.stop>
+                                        <VnUserLink
+                                            :name="row.workerName"
+                                            :worker-id="row.workerFk"
+                                        />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv
+                                :label="t('account.list.created')"
+                                :value="toDate(row.created)"
+                            />
+                            <VnLv :label="t('account.list.state')">
+                                <template #value>
+                                    <QBadge
+                                        text-color="black"
+                                        :color="stateColor(row.stateCode)"
+                                        dense
+                                    >
+                                        {{ row.stateDescription }}
+                                    </QBadge>
+                                </template>
+                            </VnLv>
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('globals.description')"
+                                @click.stop
+                                outline
+                                style="margin-top: 15px"
+                            >
+                                <CustomerDescriptorProxy :id="row.clientFk" />
+                            </QBtn>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id, AccountSummary)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+</template>