diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 18fcf78c3..f36636139 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -292,11 +292,8 @@ export default {
         notificationsManager: {
             activeNotifications: 'Active notifications',
             availableNotifications: 'Available notifications',
-            table: {
-                name: 'Permission description',
-                subscribed: 'Subscribed',
-                role: 'Necessary role',
-            }
+            subscribed: 'Subscribed to the notification',
+            unsubscribed: 'Unsubscribed from the notification',
         },
     },
     components: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index c079c0629..22044e7cc 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -290,6 +290,8 @@ export default {
         notificationsManager: {
             activeNotifications: 'Notificaciones activas',
             availableNotifications: 'Notificaciones disponibles',
+            subscribed: 'Te has suscrito a la notificación',
+            unsubscribed: 'Te has dado de baja de la notificación',
         },
     },
     components: {
diff --git a/src/pages/Worker/Card/WorkerNotificationsManager.vue b/src/pages/Worker/Card/WorkerNotificationsManager.vue
index 19728db17..eca1c38de 100644
--- a/src/pages/Worker/Card/WorkerNotificationsManager.vue
+++ b/src/pages/Worker/Card/WorkerNotificationsManager.vue
@@ -2,6 +2,7 @@
 import { onMounted, computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
 import { useSession } from 'src/composables/useSession';
 import axios from 'axios';
 
@@ -18,8 +19,7 @@ onMounted(async () => await fetch());
 const route = useRoute();
 const { t } = useI18n();
 const { getToken } = useSession();
-
-t == t;
+const quasar = useQuasar();
 
 const entityId = computed(() => {
     return $props.id || route.params.id;
@@ -47,6 +47,9 @@ const workerFilter = {
         },
     ],
 };
+
+const notificationAcls = ref([]);
+
 async function fetch() {
     const { data } = await axios.get(`Workers/${entityId.value}`, {
         params: {
@@ -81,14 +84,15 @@ async function fetch() {
         data.subscribedNotifs = subscribedNotifs.data;
 
         const filterAcl = {
-            where: {
-                roleFk: data.user.roleFk,
-            },
             include: [
                 {
                     relation: 'notification',
                     scope: {
-                        relation: 'notificationSubscription',
+                        include: [
+                            {
+                                relation: 'subscription',
+                            },
+                        ],
                     },
                 },
                 {
@@ -106,13 +110,121 @@ async function fetch() {
             },
         });
 
-        data.notifsAcl = notifsAcl.data;
+        let notifications = [];
+
+        notifsAcl.data.forEach((acl) => {
+            let notification = {
+                id: acl.notification.id,
+                name: acl.notification.name,
+                description: acl.notification.description,
+                active: false,
+                allowed: false,
+            };
+
+            if (acl.roleFk == data.user.roleFk) {
+                notification.allowed = true;
+            } else {
+                notification.allowed = false;
+            }
+
+            if (data.subscribedNotifs.length > 0) {
+                data.subscribedNotifs.forEach((sub) => {
+                    if (sub.notificationFk == acl.notification.id) {
+                        if (notification.allowed) {
+                            notification.active = true;
+                        }
+                    }
+                });
+            }
+
+            // Check if notification is already in the array
+            let found = false;
+            notifications.forEach((notif) => {
+                if (notif.id == notification.id) {
+                    found = true;
+                }
+            });
+
+            if (!found) {
+                if (!notification.allowed) {
+                    notification.active = null;
+                }
+                notifications.push(notification);
+            } else {
+                // Check if current notification is allowed and the other one is not
+                // If so, replace the existing one with the current one
+                notifications.forEach((notif) => {
+                    if (notif.id == notification.id) {
+                        if (notification.allowed && !notif.allowed) {
+                            notif.allowed = true;
+                            notif.active = notification.active;
+                        }
+                    }
+                });
+            }
+        });
+        notificationAcls.value = notifications;
+        sortNotifs();
     } catch (e) {
         console.log(e);
     }
 
     worker.value = data;
 }
+
+function sortNotifs() {
+    notificationAcls.value.sort((a, b) => {
+        if (a.allowed && !b.allowed) {
+            return -1;
+        } else if (!a.allowed && b.allowed) {
+            return 1;
+        } else {
+            if (a.active && !b.active) {
+                return 1;
+            } else if (!a.active && b.active) {
+                return -1;
+            } else {
+                return 0;
+            }
+        }
+    });
+}
+
+async function toggleNotif(notif, chip) {
+    if (chip) {
+        notif.active = !notif.active;
+    }
+    if (notif.active) {
+        await axios.post(
+            `NotificationSubscriptions`,
+            {
+                notificationFk: notif.id,
+                userFk: entityId.value,
+            },
+            {
+                headers: {
+                    Authorization: getToken(),
+                },
+            }
+        );
+        quasar.notify({
+            type: 'positive',
+            message: t('worker.notificationsManager.subscribed'),
+        });
+    } else {
+        await axios.post(`NotificationSubscriptions/deleteSubscription`, {
+            notificationId: notif.id + '',
+            userId: entityId.value,
+            headers: {
+                Authorization: getToken(),
+            },
+        });
+        quasar.notify({
+            type: 'positive',
+            message: t('worker.notificationsManager.unsubscribed'),
+        });
+    }
+}
 </script>
 <template>
     <q-card>
@@ -124,49 +236,46 @@ async function fetch() {
                     {{ t('worker.notificationsManager.activeNotifications') }}
                 </q-item-label>
                 <q-item>
-                    <div class="q-pa-sm">
+                    <div v-for="notif in notificationAcls" :key="notif.id">
                         <q-chip
-                            v-for="notif in worker.subscribedNotifs"
-                            :key="notif.notificationFk"
-                            :label="notif.notification.name"
+                            v-if="notif.active"
+                            :key="notif.id"
+                            :label="notif.name"
                             text-color="white"
                             color="primary"
                             class="q-mr-sm"
                             removable
-                            @remove="removeNotif(notif)"
+                            @remove="toggleNotif(notif, true)"
                         />
                     </div>
                 </q-item>
                 <q-item-label header class="text-h6">
                     {{ t('worker.notificationsManager.availableNotifications') }}
                 </q-item-label>
-                <q-item>
-                    <q-table :rows="worker.notifsAcl">
-                        <template #header="props">
-                            <q-tr :props="props">
-                                <q-th auto-width>{{ t('worker.notificationsManager.table.name') }}</q-th>
-                                <q-th auto-width>{{ t('worker.notificationsManager.table.subscribed') }}</q-th>
-                                <q-th auto-width>{{ t('worker.notificationsManager.table.role') }}</q-th>
-                            </q-tr>
-                        </template>
-                        <template #body="props">
-                            <q-tr :props="props">
-                                <q-td>{{ props.row.notification.description }}</q-td>
-                                <q-td>
-                                    <q-toggle
-                                        checked-icon="check"
-                                        unchecked-icon="close"
-                                        indeterminate-icon="block"
-                                        v-model="props.row.subscribed"
-                                        :value="props.row.subscribed"
-                                        @input="toggleNotif(props.row)"
-                                    />
-                                </q-td>
-                                <q-td>{{ props.row.role.name }}</q-td>
-                            </q-tr>
-                        </template>
-                    </q-table>
-                </q-item>
+
+                <div class="row">
+                    <q-item
+                        class="col"
+                        :key="notif.id"
+                        v-for="notif in notificationAcls"
+                        style="min-width: 350px; max-width: 350px"
+                    >
+                        <q-item-section>
+                            <q-item-label>{{ notif.name }}</q-item-label>
+                            <q-item-label caption>{{ notif.description }}</q-item-label>
+                        </q-item-section>
+                        <q-item-section side top>
+                            <q-toggle
+                                :disable="!notif.allowed"
+                                checked-icon="check"
+                                unchecked-icon="close"
+                                indeterminate-icon="block"
+                                v-model="notif.active"
+                                @update:model-value="toggleNotif(notif)"
+                            />
+                        </q-item-section>
+                    </q-item>
+                </div>
             </q-list>
         </template>
     </q-card>