diff --git a/src/containers/DefaultContainer.vue b/src/containers/DefaultContainer.vue
index b53ccc59c..e99642376 100644
--- a/src/containers/DefaultContainer.vue
+++ b/src/containers/DefaultContainer.vue
@@ -37,7 +37,10 @@ import DefaultHeader from './DefaultHeader';
 import DefaultFooter from './DefaultFooter';
 import EventBus from '../shared/eventbus';
 import ProfileEditModal from '../views/components/ProfileEditModal';
-import * as permissions from '../shared/permissions';
+import PERMISSIONS, {
+  hasComplexPermission,
+  hasPermission,
+} from '../shared/permissions';
 
 export default {
   name: 'DefaultContainer',
@@ -64,7 +67,6 @@ export default {
           name: this.$t('message.dashboard'),
           url: '/dashboard',
           icon: 'icon-speedometer',
-          permission: permissions.VIEW_PORTFOLIO,
         },
         {
           title: true,
@@ -74,37 +76,35 @@ export default {
             element: '',
             attributes: {},
           },
-          permission: permissions.VIEW_PORTFOLIO,
         },
         {
           name: this.$t('message.projects'),
           url: '/projects',
           icon: 'fa fa-sitemap',
-          permission: permissions.VIEW_PORTFOLIO,
+          permission: PERMISSIONS.PROJECT_READ,
         },
         {
           name: this.$t('message.components'),
           url: '/components',
           icon: 'fa fa-cubes',
-          permission: permissions.VIEW_PORTFOLIO,
+          permission: PERMISSIONS.PROJECT_READ,
         },
         {
           name: this.$t('message.vulnerabilities'),
           url: '/vulnerabilities',
           icon: 'fa fa-shield',
-          permission: permissions.VIEW_PORTFOLIO,
+          permission: PERMISSIONS.VULNERABILITY_MANAGEMENT,
         },
         {
           name: this.$t('message.licenses'),
           url: '/licenses',
           icon: 'fa fa-balance-scale',
-          permission: permissions.VIEW_PORTFOLIO,
         },
         {
-          name: 'Tags',
+          name: this.$t('message.tags'),
           url: '/tags',
           icon: 'fa fa-tag',
-          permission: permissions.VIEW_PORTFOLIO,
+          permission: PERMISSIONS.TAG_MANAGEMENT,
         },
         {
           title: true,
@@ -115,21 +115,22 @@ export default {
             attributes: {},
           },
           permissions: [
-            permissions.VIEW_VULNERABILITY,
-            permissions.VIEW_POLICY_VIOLATION,
+            PERMISSIONS.PROJECT_READ,
+            PERMISSIONS.FINDING_READ,
+            PERMISSIONS.POLICY_VIOLATION_READ,
           ],
         },
         {
           name: this.$t('message.vulnerability_audit'),
           url: '/vulnerabilityAudit',
           icon: 'fa fa-tasks',
-          permission: permissions.VIEW_VULNERABILITY,
+          permissions: [PERMISSIONS.PROJECT_READ, PERMISSIONS.FINDING_READ],
         },
         {
           name: this.$t('message.policy_violation_audit'),
           url: '/policyViolationAudit',
           icon: 'fa fa-fire',
-          permission: permissions.VIEW_POLICY_VIOLATION,
+          permission: PERMISSIONS.POLICY_VIOLATION_READ,
         },
         {
           title: true,
@@ -139,37 +140,19 @@ export default {
             element: '',
             attributes: {},
           },
-          permission: [
-            permissions.SYSTEM_CONFIGURATION,
-            permissions.SYSTEM_CONFIGURATION_CREATE,
-            permissions.SYSTEM_CONFIGURATION_READ,
-            permissions.SYSTEM_CONFIGURATION_UPDATE,
-            permissions.SYSTEM_CONFIGURATION_DELETE,
-          ],
+          permission: PERMISSIONS.SYSTEM_CONFIGURATION,
         },
         {
           name: this.$t('message.policy_management'),
           url: '/policy',
           icon: 'fa fa-list-alt',
-          permission: [
-            permissions.POLICY_MANAGEMENT,
-            permissions.POLICY_MANAGEMENT_CREATE,
-            permissions.POLICY_MANAGEMENT_READ,
-            permissions.POLICY_MANAGEMENT_UPDATE,
-            permissions.POLICY_MANAGEMENT_DELETE,
-          ],
+          permission: PERMISSIONS.POLICY_MANAGEMENT,
         },
         {
           name: this.$t('message.administration'),
           url: '/admin',
           icon: 'fa fa-cogs',
-          permission: [
-            permissions.SYSTEM_CONFIGURATION,
-            permissions.SYSTEM_CONFIGURATION_CREATE,
-            permissions.SYSTEM_CONFIGURATION_READ,
-            permissions.SYSTEM_CONFIGURATION_UPDATE,
-            permissions.SYSTEM_CONFIGURATION_DELETE,
-          ],
+          permission: PERMISSIONS.SYSTEM_CONFIGURATION,
         },
       ],
     };
@@ -229,9 +212,8 @@ export default {
   },
   mounted() {
     this.isSidebarMinimized =
-      localStorage && localStorage.getItem('isSidebarMinimized') !== null
-        ? localStorage.getItem('isSidebarMinimized') === 'true'
-        : false;
+      localStorage?.getItem('isSidebarMinimized') === 'true';
+
     const sidebar = document.body;
     if (sidebar) {
       if (this.isSidebarMinimized) {
@@ -259,21 +241,21 @@ export default {
       }
     },
     permissibleNav() {
-      let decodedToken = permissions.decodeToken(permissions.getToken());
-      let array = [];
-      for (const item of this.nav) {
+      return this.nav.filter((item) => {
+        if (item.permission && !hasPermission(item.permission)) {
+          return false;
+        }
+        if (item.permissions && !hasPermission(item.permissions)) {
+          return false;
+        }
         if (
-          (item.permission !== null &&
-            permissions.hasPermission(item.permission, decodedToken)) ||
-          (Object.prototype.hasOwnProperty.call(item, 'permissions') &&
-            item.permissions.some((permission) =>
-              permissions.hasPermission(permission, decodedToken),
-            ))
+          item.complexPermission &&
+          !hasComplexPermission(item.complexPermission)
         ) {
-          array.push(item);
+          return false;
         }
-      }
-      return array;
+        return true;
+      });
     },
   },
   created() {
diff --git a/src/directives/VuePermission.js b/src/directives/VuePermission.js
index fcc24165a..18540d68a 100644
--- a/src/directives/VuePermission.js
+++ b/src/directives/VuePermission.js
@@ -2,34 +2,44 @@
  * Permissions Vue Directive
  */
 import Vue from 'vue';
-import { hasPermission, decodeToken, getToken } from '../shared/permissions';
+import { hasPermission, hasComplexPermission } from '../shared/permissions';
 
-Vue.directive('permission', function (el, binding) {
-  let decodedToken = decodeToken(getToken());
-  if (Array.isArray(binding.value)) {
+Vue.directive('permission', {
+  inserted(el, binding) {
+    const { arg, value, modifiers } = binding;
+    const modifierKeys = Object.keys(modifiers);
     let permitted = false;
-    if (binding.arg === 'and') {
-      // This is the AND case. If a user has ALL of the specified permissions, permitted will be true
-      permitted = true;
-      binding.value.forEach(function (b) {
-        if (!hasPermission(b, decodedToken)) {
-          permitted = false;
-        }
-      });
-    } else if (binding.arg === 'or') {
-      // This is the OR case. If a user has one or more of the specified permissions, permitted will be true
-      binding.value.forEach(function (b) {
-        if (hasPermission(b, decodedToken)) {
-          permitted = true;
-        }
-      });
-    }
-    if (!permitted) {
-      el.style.display = 'none';
+
+    if (arg === 'complex') {
+      permitted = hasComplexPermission(value);
+    } else {
+      permitted = hasPermission(value, arg);
     }
-  } else {
-    if (!hasPermission(binding.value, decodedToken)) {
+
+    if (permitted) return; // User has permission, do nothing
+
+    if (modifierKeys.length === 0) {
       el.style.display = 'none';
+      return;
     }
-  }
+
+    modifierKeys.forEach((modifier) => {
+      switch (modifier.toLowerCase()) {
+        case 'readonly':
+          el.setAttribute('readonly', true);
+          break;
+        case 'disabled':
+          el.setAttribute('disabled', true);
+          break;
+        case 'hide':
+          el.style.display = 'none';
+          break;
+        case 'visibility':
+          el.style.visibility = 'hidden';
+          break;
+        default:
+          throw new Error(`Unknown modifier v-permission:${modifier}`);
+      }
+    });
+  },
 });
diff --git a/src/mixins/permissionsMixin.js b/src/mixins/permissionsMixin.js
index 09df56a35..6a0135d3c 100644
--- a/src/mixins/permissionsMixin.js
+++ b/src/mixins/permissionsMixin.js
@@ -1,90 +1,14 @@
-/* eslint-disable prettier/prettier */
-import * as permissions from '../shared/permissions';
+import PERMISSIONS, {
+  hasPermission,
+  hasComplexPermission,
+} from '../shared/permissions';
 
 export default {
   data() {
     return {
-      PERMISSIONS: {
-        BOM_UPLOAD: permissions.BOM_UPLOAD,
-        VIEW_PORTFOLIO: permissions.VIEW_PORTFOLIO,
-        PORTFOLIO_MANAGEMENT: permissions.PORTFOLIO_MANAGEMENT,
-        PORTFOLIO_MANAGEMENT_CREATE: permissions.PORTFOLIO_MANAGEMENT_CREATE,
-        PORTFOLIO_MANAGEMENT_READ: permissions.PORTFOLIO_MANAGEMENT_READ,
-        PORTFOLIO_MANAGEMENT_UPDATE: permissions.PORTFOLIO_MANAGEMENT_UPDATE,
-        PORTFOLIO_MANAGEMENT_DELETE: permissions.PORTFOLIO_MANAGEMENT_DELETE,
-        VIEW_VULNERABILITY: permissions.VIEW_VULNERABILITY,
-        VULNERABILITY_ANALYSIS: permissions.VULNERABILITY_ANALYSIS,
-        VULNERABILITY_ANALYSIS_CREATE:
-          permissions.VULNERABILITY_ANALYSIS_CREATE,
-        VULNERABILITY_ANALYSIS_READ: permissions.VULNERABILITY_ANALYSIS_READ,
-        VULNERABILITY_ANALYSIS_UPDATE:
-          permissions.VULNERABILITY_ANALYSIS_UPDATE,
-        VIEW_POLICY_VIOLATION: permissions.VIEW_POLICY_VIOLATION,
-        VULNERABILITY_MANAGEMENT: permissions.VULNERABILITY_MANAGEMENT,
-        VULNERABILITY_MANAGEMENT_CREATE:
-          permissions.VULNERABILITY_MANAGEMENT_CREATE,
-        VULNERABILITY_MANAGEMENT_READ:
-          permissions.VULNERABILITY_MANAGEMENT_READ,
-        VULNERABILITY_MANAGEMENT_UPDATE:
-          permissions.VULNERABILITY_MANAGEMENT_UPDATE,
-        VULNERABILITY_MANAGEMENT_DELETE:
-          permissions.VULNERABILITY_MANAGEMENT_DELETE,
-        POLICY_VIOLATION_ANALYSIS: permissions.POLICY_VIOLATION_ANALYSIS,
-        ACCESS_MANAGEMENT: permissions.ACCESS_MANAGEMENT,
-        ACCESS_MANAGEMENT_CREATE: permissions.ACCESS_MANAGEMENT_CREATE,
-        ACCESS_MANAGEMENT_READ: permissions.ACCESS_MANAGEMENT_READ,
-        ACCESS_MANAGEMENT_UPDATE: permissions.ACCESS_MANAGEMENT_UPDATE,
-        ACCESS_MANAGEMENT_DELETE: permissions.ACCESS_MANAGEMENT_DELETE,
-        SYSTEM_CONFIGURATION: permissions.SYSTEM_CONFIGURATION,
-        SYSTEM_CONFIGURATION_CREATE: permissions.SYSTEM_CONFIGURATION_CREATE,
-        SYSTEM_CONFIGURATION_READ: permissions.SYSTEM_CONFIGURATION_READ,
-        SYSTEM_CONFIGURATION_UPDATE: permissions.SYSTEM_CONFIGURATION_UPDATE,
-        SYSTEM_CONFIGURATION_DELETE: permissions.SYSTEM_CONFIGURATION_DELETE,
-        PROJECT_CREATION_UPLOAD: permissions.PROJECT_CREATION_UPLOAD,
-        POLICY_MANAGEMENT: permissions.POLICY_MANAGEMENT,
-        POLICY_MANAGEMENT_CREATE: permissions.POLICY_MANAGEMENT_CREATE,
-        POLICY_MANAGEMENT_READ: permissions.POLICY_MANAGEMENT_READ,
-        POLICY_MANAGEMENT_UPDATE: permissions.POLICY_MANAGEMENT_UPDATE,
-        POLICY_MANAGEMENT_DELETE: permissions.POLICY_MANAGEMENT_DELETE,
-        TAG_MANAGEMENT: permissions.TAG_MANAGEMENT,
-        TAG_MANAGEMENT_DELETE: permissions.TAG_MANAGEMENT_DELETE,
-      },
+      PERMISSIONS,
+      hasPermission,
+      hasComplexPermission,
     };
   },
-  computed: {
-    decodedToken() {
-      return permissions.decodeToken(permissions.getToken());
-    },
-  },
-  methods: {
-    isPermitted(permission) {
-      // return permissions.hasPermission(permission, this.decodedToken);
-      if (typeof permission == 'string') {
-        return permissions.hasPermission(permission, this.decodedToken);
-      } else if (Array.isArray(permission)) {
-        for (let perm of permission) {
-          if (permissions.hasPermission(perm, this.decodedToken)) {
-            return true;
-          }
-        }
-        return false;
-      } else {
-        throw new Error('permission must be of type string or array');
-      }
-    },
-    isNotPermitted(permission) {
-      if (typeof permission == 'string') {
-        return !permissions.hasPermission(permission, this.decodedToken);
-      } else if (Array.isArray(permission)) {
-        for (let perm of permission) {
-          if (permissions.hasPermission(perm, this.decodedToken)) {
-            return false;
-          }
-        }
-        return true;
-      } else {
-        throw new Error('permission must be of type string or array');
-      }
-    },
-  },
 };
diff --git a/src/router/index.js b/src/router/index.js
index 20bf9e760..f07d691a7 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,8 +2,9 @@ import Vue from 'vue';
 import Router from 'vue-router';
 import i18n from '../i18n';
 import EventBus from '../shared/eventbus';
-import { getToken, hasPermission } from '../shared/permissions';
+import PERMISSIONS, { getToken } from '../shared/permissions';
 import { getContextPath } from '../shared/utils';
+import { canAccessDashboard, resolveAuthorization } from './routerGuard';
 
 // Containers
 const DefaultContainer = () => import('@/containers/DefaultContainer');
@@ -131,7 +132,6 @@ function configRoutes() {
             i18n: 'message.dashboard',
             sectionPath: '/dashboard',
             sectionName: 'Dashboard',
-            permissions: ['VIEW_PORTFOLIO'],
           },
         },
         {
@@ -143,7 +143,7 @@ function configRoutes() {
             i18n: 'message.projects',
             sectionPath: '/projects',
             sectionName: 'Projects',
-            permissions: ['VIEW_PORTFOLIO'],
+            permission: PERMISSIONS.PROJECT_READ,
           },
         },
         {
@@ -164,7 +164,7 @@ function configRoutes() {
             i18n: 'message.projects',
             sectionPath: '/projects',
             sectionName: 'Projects',
-            permissions: ['VIEW_PORTFOLIO'],
+            permission: PERMISSIONS.PROJECT_READ,
           },
         },
         {
@@ -179,7 +179,7 @@ function configRoutes() {
             i18n: 'message.projects',
             sectionPath: '/projects',
             sectionName: 'Projects',
-            permissions: ['VIEW_PORTFOLIO'],
+            permission: PERMISSIONS.PROJECT_READ,
           },
         },
         {
@@ -194,7 +194,7 @@ function configRoutes() {
             i18n: 'message.projects',
             sectionPath: '/projects',
             sectionName: 'Projects',
-            permissions: ['VIEW_PORTFOLIO'],
+            permissions: [PERMISSIONS.PROJECT_READ, PERMISSIONS.FINDING_READ],
           },
         },
         {
@@ -210,7 +210,7 @@ function configRoutes() {
             i18n: 'message.projects',
             sectionPath: '/projects',
             sectionName: 'Projects',
-            permissions: ['VIEW_PORTFOLIO'],
+            permission: PERMISSIONS.PROJECT_READ,
           },
         },
         {
@@ -222,7 +222,7 @@ function configRoutes() {
             i18n: 'message.component_search',
             sectionPath: '/components',
             sectionName: 'Component Lookup',
-            permissions: ['VIEW_PORTFOLIO'],
+            permission: PERMISSIONS.PROJECT_READ,
           },
         },
         {
@@ -238,7 +238,7 @@ function configRoutes() {
             i18n: 'message.projects',
             sectionPath: '/projects',
             sectionName: 'Projects',
-            permissions: ['VIEW_PORTFOLIO'],
+            permission: PERMISSIONS.PROJECT_READ,
           },
         },
         {
@@ -250,7 +250,7 @@ function configRoutes() {
             i18n: 'message.projects',
             sectionPath: '/projects',
             sectionName: 'Projects',
-            permissions: ['VIEW_PORTFOLIO'],
+            permission: PERMISSIONS.PROJECT_READ,
           },
         },
         {
@@ -262,7 +262,7 @@ function configRoutes() {
             i18n: 'message.vulnerabilities',
             sectionPath: '/vulnerabilities',
             sectionName: 'Vulnerabilities',
-            permissions: ['VIEW_PORTFOLIO'],
+            permission: PERMISSIONS.VULNERABILITY_MANAGEMENT,
           },
         },
         {
@@ -281,7 +281,7 @@ function configRoutes() {
             i18n: 'message.vulnerabilities',
             sectionPath: '/vulnerabilities',
             sectionName: 'Vulnerabilities',
-            permissions: ['VIEW_PORTFOLIO'],
+            permission: PERMISSIONS.VULNERABILITY_MANAGEMENT,
           },
         },
         {
@@ -293,7 +293,7 @@ function configRoutes() {
             i18n: 'message.tags',
             sectionPath: '/tags',
             sectionName: 'Tags',
-            permission: 'VIEW_PORTFOLIO',
+            permission: PERMISSIONS.TAG_MANAGEMENT,
           },
         },
         {
@@ -305,7 +305,6 @@ function configRoutes() {
             i18n: 'message.licenses',
             sectionPath: '/licenses',
             sectionName: 'Licenses',
-            permissions: ['VIEW_PORTFOLIO'],
           },
         },
         {
@@ -323,7 +322,6 @@ function configRoutes() {
             i18n: 'message.licenses',
             sectionPath: '/licenses',
             sectionName: 'Licenses',
-            permissions: ['VIEW_PORTFOLIO'],
           },
         },
         {
@@ -340,13 +338,7 @@ function configRoutes() {
             i18n: 'message.policy_management',
             sectionPath: '/policy',
             sectionName: 'Policy Management',
-            permissions: [
-              'POLICY_MANAGEMENT',
-              'POLICY_MANAGEMENT_CREATE',
-              'POLICY_MANAGEMENT_READ',
-              'POLICY_MANAGEMENT_UPDATE',
-              'POLICY_MANAGEMENT_DELETE',
-            ],
+            permission: PERMISSIONS.POLICY_MANAGEMENT,
           },
         },
         {
@@ -356,7 +348,10 @@ function configRoutes() {
             title: i18n.t('message.policy_violation_audit'),
             i18n: 'message.policy_violation_audit',
             sectionPath: '/audit',
-            permission: 'VIEW_POLICY_VIOLATION',
+            permissions: [
+              PERMISSIONS.POLICY_VIOLATION_READ,
+              PERMISSIONS.POLICY_MANAGEMENT,
+            ],
           },
         },
         {
@@ -368,13 +363,8 @@ function configRoutes() {
             i18n: 'message.administration',
             sectionPath: '/admin',
             sectionName: 'Admin',
-            permissions: [
-              'SYSTEM_CONFIGURATION',
-              'SYSTEM_CONFIGURATION_CREATE',
-              'SYSTEM_CONFIGURATION_READ',
-              'SYSTEM_CONFIGURATION_UPDATE',
-              'SYSTEM_CONFIGURATION_DELETE',
-            ],
+            propagatePermissionsToChildren: true,
+            permission: PERMISSIONS.SYSTEM_CONFIGURATION,
           },
           children: [
             {
@@ -387,13 +377,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -404,13 +387,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -421,7 +397,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permission: 'SYSTEM_CONFIGURATION',
               },
             },
             {
@@ -432,13 +407,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -449,13 +417,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -466,13 +427,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -483,13 +437,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -500,13 +447,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -517,13 +457,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -534,13 +467,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -551,13 +477,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -569,13 +488,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -586,13 +498,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -603,13 +508,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -620,13 +518,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -637,13 +528,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -655,13 +539,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -672,13 +549,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -689,13 +559,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -707,13 +570,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -724,13 +580,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -741,13 +590,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -758,13 +600,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -775,13 +610,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -792,13 +620,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -809,13 +630,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -826,13 +640,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -843,13 +650,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -860,13 +660,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -877,13 +670,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -894,13 +680,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -911,13 +690,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -929,13 +701,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -946,13 +711,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -964,13 +722,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -981,13 +732,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -998,13 +742,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'SYSTEM_CONFIGURATION',
-                  'SYSTEM_CONFIGURATION_CREATE',
-                  'SYSTEM_CONFIGURATION_READ',
-                  'SYSTEM_CONFIGURATION_UPDATE',
-                  'SYSTEM_CONFIGURATION_DELETE',
-                ],
               },
             },
             {
@@ -1016,13 +753,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'ACCESS_MANAGEMENT',
-                  'ACCESS_MANAGEMENT_CREATE',
-                  'ACCESS_MANAGEMENT_READ',
-                  'ACCESS_MANAGEMENT_UPDATE',
-                  'ACCESS_MANAGEMENT_DELETE',
-                ],
               },
             },
             {
@@ -1033,13 +763,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'ACCESS_MANAGEMENT',
-                  'ACCESS_MANAGEMENT_CREATE',
-                  'ACCESS_MANAGEMENT_READ',
-                  'ACCESS_MANAGEMENT_UPDATE',
-                  'ACCESS_MANAGEMENT_DELETE',
-                ],
               },
             },
             {
@@ -1050,13 +773,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'ACCESS_MANAGEMENT',
-                  'ACCESS_MANAGEMENT_CREATE',
-                  'ACCESS_MANAGEMENT_READ',
-                  'ACCESS_MANAGEMENT_UPDATE',
-                  'ACCESS_MANAGEMENT_DELETE',
-                ],
               },
             },
             {
@@ -1067,13 +783,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'ACCESS_MANAGEMENT',
-                  'ACCESS_MANAGEMENT_CREATE',
-                  'ACCESS_MANAGEMENT_READ',
-                  'ACCESS_MANAGEMENT_UPDATE',
-                  'ACCESS_MANAGEMENT_DELETE',
-                ],
               },
             },
             {
@@ -1084,13 +793,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'ACCESS_MANAGEMENT',
-                  'ACCESS_MANAGEMENT_CREATE',
-                  'ACCESS_MANAGEMENT_READ',
-                  'ACCESS_MANAGEMENT_UPDATE',
-                  'ACCESS_MANAGEMENT_DELETE',
-                ],
               },
             },
             {
@@ -1101,13 +803,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'ACCESS_MANAGEMENT',
-                  'ACCESS_MANAGEMENT_CREATE',
-                  'ACCESS_MANAGEMENT_READ',
-                  'ACCESS_MANAGEMENT_UPDATE',
-                  'ACCESS_MANAGEMENT_DELETE',
-                ],
               },
             },
             {
@@ -1118,13 +813,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'ACCESS_MANAGEMENT',
-                  'ACCESS_MANAGEMENT_CREATE',
-                  'ACCESS_MANAGEMENT_READ',
-                  'ACCESS_MANAGEMENT_UPDATE',
-                  'ACCESS_MANAGEMENT_DELETE',
-                ],
               },
             },
             {
@@ -1135,13 +823,6 @@ function configRoutes() {
                 i18n: 'message.administration',
                 sectionPath: '/admin',
                 sectionName: 'Admin',
-                permissions: [
-                  'ACCESS_MANAGEMENT',
-                  'ACCESS_MANAGEMENT_CREATE',
-                  'ACCESS_MANAGEMENT_READ',
-                  'ACCESS_MANAGEMENT_UPDATE',
-                  'ACCESS_MANAGEMENT_DELETE',
-                ],
               },
             },
           ],
@@ -1159,7 +840,9 @@ function configRoutes() {
             i18n: 'message.vulnerability_audit',
             sectionPath: '/vulnerabilityAudit',
             sectionName: 'Vulnerability Audit',
-            permissions: ['VIEW_VULNERABILITY'],
+            complexPermission: {
+              or: [PERMISSIONS.PROJECT_READ, PERMISSIONS.FINDING_READ],
+            },
           },
         },
         // The following route redirects URLs from legacy Dependency-Track UI to new URL format.
@@ -1227,6 +910,7 @@ function configRoutes() {
       name: 'Login',
       component: Login,
       meta: {
+        isPublic: true,
         title: i18n.t('message.login'),
       },
     },
@@ -1235,6 +919,7 @@ function configRoutes() {
       name: 'PasswordForceChange',
       component: PasswordForceChange,
       meta: {
+        isPublic: true,
         title: i18n.t('message.change_password'),
       },
     },
@@ -1243,6 +928,7 @@ function configRoutes() {
       name: '404',
       component: Page404,
       meta: {
+        isPublic: true,
         title: i18n.t('404.heading'),
       },
     },
@@ -1257,48 +943,55 @@ const router = new Router({
   routes: configRoutes(),
 });
 
-router.beforeEach((to, from, next) => {
+function redirectToDashboardOrLogin(next) {
+  const auth = canAccessDashboard(router);
+  if (auth) {
+    next({ name: 'Dashboard', replace: true });
+  } else {
+    next({ name: 'Login', replace: true });
+  }
+}
+
+router.beforeEach(async (to, from, next) => {
   const redirectToLogin = () => {
+    if (to.name === 'Login') {
+      next(); // Already on login, allow navigation
+      return;
+    }
     next({ name: 'Login', query: { redirect: to.fullPath }, replace: true });
   };
 
-  if (to.meta.permissions) {
-    // non-public route, check permissions
-    const jwt = getToken();
-    if (jwt) {
-      const isAllowed = to.meta.permissions.some((permission) =>
-        hasPermission(permission),
-      );
-      if (isAllowed) {
-        // let backend verify the token
-        router.app.axios
-          .get(`${router.app.$api.BASE_URL}/${router.app.$api.URL_USER_SELF}`, {
-            headers: { Authorization: `Bearer ${jwt}` },
-          })
-          .then((result) => {
-            Vue.prototype.$currentUser = result.data;
-            // allowed to proceed
-            next();
-          })
-          .catch(() => {
-            // token is stale
-            // notify app about this
-            EventBus.$emit('authenticated', null);
-            // redirect to login page
-            redirectToLogin();
-          });
-      } else {
-        Vue.prototype.$toastr.e(i18n.t('condition.forbidden'));
-        next({ name: 'Dashboard', replace: true });
-      }
-    } else {
-      // no token at all, redirect to login page
-      redirectToLogin();
-    }
-  } else {
-    // public route, allowed to proceed
+  if (to.meta?.isPublic) {
     next();
+    return;
+  }
+
+  // Check if the user is authenticated
+  const jwt = getToken();
+  if (!jwt) {
+    redirectToLogin();
+    return;
+  }
+
+  // validate token and fetch user details
+  try {
+    const url = `${router.app.$api.BASE_URL}/${router.app.$api.URL_USER_SELF}`;
+    const body = { headers: { Authorization: `Bearer ${jwt}` } };
+    const result = await router.app.axios.get(url, body);
+    Vue.prototype.$currentUser = result.data;
+  } catch (error) {
+    EventBus.$emit('authenticated', null);
+    redirectToLogin();
+    return;
+  }
+
+  // Check if the user has the required permissions
+  if (!resolveAuthorization(to.matched)) {
+    Vue.prototype.$toastr.e(i18n.t('condition.forbidden'));
+    redirectToDashboardOrLogin(next);
+    return;
   }
+  next();
 });
 
 export default router;
diff --git a/src/router/routerGuard.js b/src/router/routerGuard.js
new file mode 100644
index 000000000..1c0b1fa11
--- /dev/null
+++ b/src/router/routerGuard.js
@@ -0,0 +1,63 @@
+import { hasComplexPermission, hasPermission } from '../shared/permissions';
+
+/**
+ * Determines if the user can access the Dashboard route.
+ *
+ * @param {import('vue-router').Router} router - The Vue Router instance.
+ * @returns {boolean} True if the user can access the Dashboard, false otherwise.
+ */
+export function canAccessDashboard(router) {
+  // Find the root route ("/") and the dashboard child
+
+  const rootRoute = router.options.routes[0];
+  const dashboardRoute = rootRoute.children.find((r) => r.name === 'Dashboard');
+  if (!dashboardRoute) return false;
+
+  // Simulate the matched array as it would be during navigation
+  const matched = [rootRoute, dashboardRoute];
+  return resolveAuthorization(matched);
+}
+
+/**
+ * Resolves whether the current route chain is authorized based on permissions and propagation rules.
+ *
+ * This function checks the matched route records from the deepest child up to the nearest ancestor
+ * that does not propagate permissions. It verifies that all required permissions and complex permissions
+ * are satisfied for each route in the propagation chain.
+ *
+ * @param {Array<Object>} matched - The array of matched route records, each containing a `meta` object.
+ * @returns {boolean} Returns `true` if all required permissions are satisfied along the propagation chain, otherwise `false`.
+ *
+ * @note
+ * Permissions can be propagated from ancestor routes to their children if the ancestor's `meta.propagatePermissionsToChildren` is `true`.
+ * The function walks up the matched route chain, collecting all such ancestors, and checks permissions for each.
+ */
+export function resolveAuthorization(matched) {
+  let idx = matched.length - 1;
+  // Collect the propagation chain (from stop ancestor down to current)
+  const chain = [matched[idx]];
+  while (
+    idx > 0 &&
+    matched[idx - 1].meta &&
+    matched[idx - 1].meta.propagatePermissionsToChildren
+  ) {
+    idx--;
+    chain.unshift(matched[idx]);
+  }
+  // debugger;
+  for (const r of chain) {
+    if (
+      r.meta.complexPermission &&
+      !hasComplexPermission(r.meta.complexPermission)
+    ) {
+      return false;
+    }
+    if (r.meta.permissions && !hasPermission(r.meta.permissions)) {
+      return false;
+    }
+    if (r.meta.permission && !hasPermission([r.meta.permission])) {
+      return false;
+    }
+  }
+  return true;
+}
diff --git a/src/shared/permissions.js b/src/shared/permissions.js
index 632b54541..4225a8d50 100644
--- a/src/shared/permissions.js
+++ b/src/shared/permissions.js
@@ -1,78 +1,172 @@
 /* eslint-disable prettier/prettier */
 // API Permissions
-export const BOM_UPLOAD = 'BOM_UPLOAD';
-export const VIEW_PORTFOLIO = 'VIEW_PORTFOLIO';
-export const PORTFOLIO_MANAGEMENT = 'PORTFOLIO_MANAGEMENT';
-export const PORTFOLIO_MANAGEMENT_CREATE = 'PORTFOLIO_MANAGEMENT_CREATE';
-export const PORTFOLIO_MANAGEMENT_READ = 'PORTFOLIO_MANAGEMENT_READ';
-export const PORTFOLIO_MANAGEMENT_UPDATE = 'PORTFOLIO_MANAGEMENT_UPDATE';
-export const PORTFOLIO_MANAGEMENT_DELETE = 'PORTFOLIO_MANAGEMENT_DELETE';
-export const VIEW_VULNERABILITY = 'VIEW_VULNERABILITY';
-export const VULNERABILITY_ANALYSIS = 'VULNERABILITY_ANALYSIS';
-export const VULNERABILITY_ANALYSIS_CREATE = 'VULNERABILITY_ANALYSIS_CREATE';
-export const VULNERABILITY_ANALYSIS_READ = 'VULNERABILITY_ANALYSIS_READ';
-export const VULNERABILITY_ANALYSIS_UPDATE = 'VULNERABILITY_ANALYSIS_UPDATE';
-export const VIEW_POLICY_VIOLATION = 'VIEW_POLICY_VIOLATION';
-export const VULNERABILITY_MANAGEMENT = 'VULNERABILITY_MANAGEMENT';
-export const VULNERABILITY_MANAGEMENT_CREATE =
-  'VULNERABILITY_MANAGEMENT_CREATE';
-export const VULNERABILITY_MANAGEMENT_READ = 'VULNERABILITY_MANAGEMENT_READ';
-export const VULNERABILITY_MANAGEMENT_UPDATE =
-  'VULNERABILITY_MANAGEMENT_UPDATE';
-export const VULNERABILITY_MANAGEMENT_DELETE =
-  'VULNERABILITY_MANAGEMENT_DELETE';
-export const POLICY_VIOLATION_ANALYSIS = 'POLICY_VIOLATION_ANALYSIS';
+import EventBus from './eventbus';
+
 export const ACCESS_MANAGEMENT = 'ACCESS_MANAGEMENT';
-export const ACCESS_MANAGEMENT_CREATE = 'ACCESS_MANAGEMENT_CREATE';
-export const ACCESS_MANAGEMENT_READ = 'ACCESS_MANAGEMENT_READ';
-export const ACCESS_MANAGEMENT_UPDATE = 'ACCESS_MANAGEMENT_UPDATE';
-export const ACCESS_MANAGEMENT_DELETE = 'ACCESS_MANAGEMENT_DELETE';
-export const SYSTEM_CONFIGURATION = 'SYSTEM_CONFIGURATION';
-export const SYSTEM_CONFIGURATION_CREATE = 'SYSTEM_CONFIGURATION_CREATE';
-export const SYSTEM_CONFIGURATION_READ = 'SYSTEM_CONFIGURATION_READ';
-export const SYSTEM_CONFIGURATION_UPDATE = 'SYSTEM_CONFIGURATION_UPDATE';
-export const SYSTEM_CONFIGURATION_DELETE = 'SYSTEM_CONFIGURATION_DELETE';
-export const PROJECT_CREATION_UPLOAD = 'PROJECT_CREATION_UPLOAD';
+export const BADGES_READ = 'BADGES_READ';
+export const BOM_CREATE = 'BOM_CREATE';
+export const BOM_READ = 'BOM_READ';
+export const FINDING_CREATE = 'FINDING_CREATE';
+export const FINDING_READ = 'FINDING_READ';
+export const FINDING_UPDATE = 'FINDING_UPDATE';
+export const NOTIFICATION_RULE_MANAGEMENT = 'NOTIFICATION_RULE_MANAGEMENT';
 export const POLICY_MANAGEMENT = 'POLICY_MANAGEMENT';
-export const POLICY_MANAGEMENT_CREATE = 'POLICY_MANAGEMENT_CREATE';
-export const POLICY_MANAGEMENT_READ = 'POLICY_MANAGEMENT_READ';
-export const POLICY_MANAGEMENT_UPDATE = 'POLICY_MANAGEMENT_UPDATE';
-export const POLICY_MANAGEMENT_DELETE = 'POLICY_MANAGEMENT_DELETE';
+export const POLICY_VIOLATION_CREATE = 'POLICY_VIOLATION_CREATE';
+export const POLICY_VIOLATION_READ = 'POLICY_VIOLATION_READ';
+export const POLICY_VIOLATION_UPDATE = 'POLICY_VIOLATION_UPDATE';
+export const PORTFOLIO_ACCESS_CONTROL_BYPASS =
+  'PORTFOLIO_ACCESS_CONTROL_BYPASS';
+export const PORTFOLIO_MANAGEMENT = 'PORTFOLIO_MANAGEMENT';
+export const PROJECT_DELETE = 'PROJECT_DELETE';
+export const PROJECT_READ = 'PROJECT_READ';
+export const PROJECT_UPDATE = 'PROJECT_UPDATE';
+export const SYSTEM_CONFIGURATION = 'SYSTEM_CONFIGURATION';
 export const TAG_MANAGEMENT = 'TAG_MANAGEMENT';
-export const TAG_MANAGEMENT_DELETE = 'TAG_MANAGEMENT_DELETE';
+export const VULNERABILITY_MANAGEMENT = 'VULNERABILITY_MANAGEMENT';
+
+export default Object.freeze({
+  ACCESS_MANAGEMENT,
+  BADGES_READ,
+  BOM_CREATE,
+  BOM_READ,
+  FINDING_CREATE,
+  FINDING_READ,
+  FINDING_UPDATE,
+  NOTIFICATION_RULE_MANAGEMENT,
+  POLICY_MANAGEMENT,
+  POLICY_VIOLATION_CREATE,
+  POLICY_VIOLATION_READ,
+  POLICY_VIOLATION_UPDATE,
+  PORTFOLIO_ACCESS_CONTROL_BYPASS,
+  PORTFOLIO_MANAGEMENT,
+  PROJECT_DELETE,
+  PROJECT_READ,
+  PROJECT_UPDATE,
+  SYSTEM_CONFIGURATION,
+  TAG_MANAGEMENT,
+  VULNERABILITY_MANAGEMENT,
+});
+
+let cachedToken = null;
+const existingToken = getToken();
+
+function parseToken(token) {
+  if (!token) return null;
+  const decoded = decodeToken(token);
+  return Object.freeze({
+    ...decoded,
+    rawToken: token,
+    rawPermissions: decoded.permissions,
+    permissions: decoded.permissions?.split(',') || [],
+  });
+}
+
+// On module load, try to cache the token if present
+if (existingToken) {
+  cachedToken = parseToken(existingToken);
+}
+
+// Listen for authentication events to update the cached token (e.g. login/logout)
+EventBus.$on('authenticated', (jwt) => {
+  cachedToken = parseToken(jwt);
+});
 
 /**
  * Determines if the current logged in user has a specific permission.
- * If the decodedToken is not passed, the function will automatically
- * retrieve and decode it.
  */
-export const hasPermission = function hasPermission(permission, decodedToken) {
-  const token = decodedToken || decodeToken(getToken());
-  const permissions = token?.permissions?.split(',') || [];
-  if (typeof permission == 'string') {
-    return permissions.includes(permission);
-  } else if (Array.isArray(permission)) {
-    for (let perm of permission) {
-      if (permissions.includes(perm)) {
-        return true;
-      }
+export function hasPermission(permission, operation = 'and') {
+  if (!cachedToken) return false;
+
+  if (typeof permission === 'string') {
+    return cachedToken.permissions.includes(permission);
+  }
+
+  if (Array.isArray(permission)) {
+    switch (operation) {
+      case 'and':
+        return permission.every((perm) =>
+          cachedToken.permissions.includes(perm),
+        );
+      case 'not':
+        return permission.every(
+          (perm) => !cachedToken.permissions.includes(perm),
+        );
+      case 'or':
+      default:
+        return permission.some((perm) =>
+          cachedToken.permissions.includes(perm),
+        );
+    }
+  }
+
+  return false;
+}
+
+/**
+ * Recursively determines if a user has complex permissions.
+ * Complex permissions can be specified as:
+ * - A string: single permission (e.g. "perm_x")
+ * - An array: all permissions required (AND logic, e.g. ["perm_x", "perm_y"])
+ * - An object:
+ *     { and: [...] }  // All required (AND)
+ *     { or: [...] }   // Any required (OR)
+ *     { not: [...] }  // None must be present (NOT)
+ * Nested structures are supported.
+ *
+ * Example:
+ *   {
+ *     and: [
+ *       "perm_x",
+ *       { or: ["perm_y", "perm_z"] },
+ *       { not: ["perm_a"] }
+ *     ]
+ *   }
+ * Means: perm_x AND (perm_y OR perm_z) AND (NOT perm_a)
+ *
+ * @param {string|Array|Object} requiredPermissions - The required permission(s).
+ * @param {Array<string>} userPermissions - The user's permissions as an array of strings.
+ * @returns {boolean} True if the user has the required permissions, false otherwise.
+ */
+export function hasComplexPermission(requiredPermissions) {
+  if (!requiredPermissions) return true;
+
+  if (typeof requiredPermissions === 'string')
+    return cachedToken.permissions?.includes(requiredPermissions);
+
+  if (Array.isArray(requiredPermissions)) {
+    return requiredPermissions.every((r) => hasComplexPermission(r));
+  }
+
+  if (typeof requiredPermissions === 'object') {
+    if (requiredPermissions.and) {
+      return requiredPermissions.and.every((r) => hasComplexPermission(r));
+    }
+
+    if (requiredPermissions.or) {
+      return requiredPermissions.or.some((r) => hasComplexPermission(r));
+    }
+
+    if (requiredPermissions.not) {
+      return requiredPermissions.not.every((r) => !hasComplexPermission(r));
     }
-    return false;
   }
-};
 
+  throw new Error(
+    'Unrecognized permission structure: ' + JSON.stringify(requiredPermissions),
+  );
+}
 /**
  * Returns the decoded token as a JSON object.
  */
-export const decodeToken = function decodeToken(token) {
-  let base64Url = token.split('.')[1];
-  let base64 = base64Url.replace('-', '+').replace('_', '/');
+export function decodeToken(token) {
+  const base64Url = token.split('.')[1];
+  const base64 = base64Url.replace('-', '+').replace('_', '/');
   return JSON.parse(window.atob(base64));
-};
+}
 
 /**
  * Retrieves the token from session storage.
  */
-export const getToken = function getToken() {
+export function getToken() {
   return sessionStorage.getItem('token');
-};
+}
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 36a0013f3..c8f10fb62 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="animated fadeIn" v-permission="'VIEW_PORTFOLIO'">
+  <div class="animated fadeIn">
     <portfolio-widget-row ref="portfolioWidgetRow" />
     <b-card>
       <b-row>
@@ -11,15 +11,13 @@
             <!-- Change below v-permission back to PORTFOLIO_MANAGEMENT -->
             {{ $t('message.last_measurement') }}: {{ lastMeasurement
             }}<b-link
-              v-permission:or="[
-                'PORTFOLIO_MANAGEMENT',
-                'PORTFOLIO_MANAGEMENT_READ',
-              ]"
+              v-permission="PERMISSIONS.PORTFOLIO_MANAGEMENT"
               class="font-weight-bold"
               style="margin-left: 6px"
               v-on:click="refreshMetrics"
-              ><i class="fa fa-refresh"></i
-            ></b-link>
+            >
+              <i class="fa fa-refresh"></i>
+            </b-link>
           </div>
         </b-col>
         <b-col sm="5" class="d-none d-md-block" />
@@ -836,13 +834,13 @@ export default {
       );
     },
     refreshMetrics() {
-      let url = `${this.$api.BASE_URL}/${this.$api.URL_METRICS}/portfolio/refresh`;
+      const url = `${this.$api.BASE_URL}/${this.$api.URL_METRICS}/portfolio/refresh`;
       this.axios.get(url).then((response) => {
         this.$toastr.s(this.$t('message.metric_refresh_requested'));
       });
     },
     fetchMetrics() {
-      let url = `${this.$api.BASE_URL}/${this.$api.URL_METRICS}/portfolio/${this.metricDays}/days`;
+      const url = `${this.$api.BASE_URL}/${this.$api.URL_METRICS}/portfolio/${this.metricDays}/days`;
       this.axios.get(url).then((response) => {
         this.$refs.portfolioWidgetRow.render(response.data);
         this.$refs.chartPortfolioVulnerabilities.render(response.data);
@@ -871,7 +869,7 @@ export default {
         : 30;
   },
   mounted() {
-    if (this.isPermitted(this.PERMISSIONS.VIEW_PORTFOLIO)) {
+    if (this.hasPermission(this.PERMISSIONS.PROJECT_READ)) {
       this.fetchMetrics();
     }
   },
diff --git a/src/views/administration/AdminMenu.vue b/src/views/administration/AdminMenu.vue
index cc65b1e59..c17e1905a 100644
--- a/src/views/administration/AdminMenu.vue
+++ b/src/views/administration/AdminMenu.vue
@@ -1,42 +1,38 @@
 <template>
   <div>
-    <b-card
-      no-body
-      class="admin-menu"
+    <div
       v-for="section in menu"
-      v-bind:key="section.id"
+      :key="section.id"
+      v-permission="section.permission"
     >
-      <div
-        slot="header"
-        v-if="isPermitted(section.permission)"
-        v-b-toggle="section.id"
-        style="cursor: pointer"
-      >
-        <i class="fa fa-align-justify"></i
-        ><strong>&nbsp;&nbsp;{{ section.name }}</strong>
-      </div>
-      <b-collapse
-        ref="accordion"
-        v-if="isPermitted(section.permission)"
-        :id="section.id"
-        accordion="admin-accordion"
-        role="tabpanel"
-      >
-        <div class="list-group" id="list-tab" role="tablist">
-          <router-link
-            :ref="item.id"
-            :key="item.id"
-            v-for="item in section.children"
-            class="list-group-item list-group-item-action"
-            data-toggle="list"
-            role="tab"
-            :to="'/admin/' + item.route"
-            @click="emitEvent(item)"
-            >{{ item.name }}</router-link
-          >
+      <b-card no-body class="admin-menu">
+        <div slot="header" v-b-toggle="section.id" style="cursor: pointer">
+          <i class="fa fa-align-justify"></i>
+          <strong>&nbsp;&nbsp;{{ section.name }}</strong>
         </div>
-      </b-collapse>
-    </b-card>
+        <b-collapse
+          ref="accordion"
+          :id="section.id"
+          accordion="admin-accordion"
+          role="tabpanel"
+        >
+          <div class="list-group" id="list-tab" role="tablist">
+            <router-link
+              :ref="item.id"
+              :key="item.id"
+              v-for="item in section.children"
+              class="list-group-item list-group-item-action"
+              data-toggle="list"
+              role="tab"
+              :to="'/admin/' + item.route"
+              @click="emitEvent(item)"
+            >
+              {{ item.name }}
+            </router-link>
+          </div>
+        </b-collapse>
+      </b-card>
+    </div>
   </div>
 </template>
 
@@ -45,22 +41,11 @@ import permissionsMixin from '../../mixins/permissionsMixin';
 import EventBus from '../../shared/eventbus';
 import {
   ACCESS_MANAGEMENT,
-  ACCESS_MANAGEMENT_CREATE,
-  ACCESS_MANAGEMENT_READ,
-  ACCESS_MANAGEMENT_UPDATE,
-  ACCESS_MANAGEMENT_DELETE,
   SYSTEM_CONFIGURATION,
-  SYSTEM_CONFIGURATION_CREATE,
-  SYSTEM_CONFIGURATION_READ,
-  SYSTEM_CONFIGURATION_UPDATE,
-  SYSTEM_CONFIGURATION_DELETE,
 } from '../../shared/permissions';
 
 export default {
   mixins: [permissionsMixin],
-  components: {
-    EventBus,
-  },
   methods: {
     emitEvent: function (plugin) {
       EventBus.$emit('admin:plugin', plugin);
@@ -86,13 +71,7 @@ export default {
         {
           name: this.$t('admin.configuration'),
           id: 'configuration',
-          permission: [
-            SYSTEM_CONFIGURATION,
-            SYSTEM_CONFIGURATION_CREATE,
-            SYSTEM_CONFIGURATION_READ,
-            SYSTEM_CONFIGURATION_UPDATE,
-            SYSTEM_CONFIGURATION_DELETE,
-          ],
+          permission: [SYSTEM_CONFIGURATION],
           children: [
             {
               component: 'General',
@@ -149,13 +128,7 @@ export default {
         {
           name: this.$t('admin.analyzers'),
           id: 'analyzers',
-          permission: [
-            SYSTEM_CONFIGURATION,
-            SYSTEM_CONFIGURATION_CREATE,
-            SYSTEM_CONFIGURATION_READ,
-            SYSTEM_CONFIGURATION_UPDATE,
-            SYSTEM_CONFIGURATION_DELETE,
-          ],
+          permission: [SYSTEM_CONFIGURATION],
           children: [
             {
               component: 'InternalAnalyzer',
@@ -187,13 +160,7 @@ export default {
         {
           name: this.$t('admin.vuln_sources'),
           id: 'vulnerabilitysources',
-          permission: [
-            SYSTEM_CONFIGURATION,
-            SYSTEM_CONFIGURATION_CREATE,
-            SYSTEM_CONFIGURATION_READ,
-            SYSTEM_CONFIGURATION_UPDATE,
-            SYSTEM_CONFIGURATION_DELETE,
-          ],
+          permission: [SYSTEM_CONFIGURATION],
           children: [
             {
               component: 'VulnSourceNvd',
@@ -215,13 +182,7 @@ export default {
         {
           name: this.$t('admin.repositories'),
           id: 'repositories',
-          permission: [
-            SYSTEM_CONFIGURATION,
-            SYSTEM_CONFIGURATION_CREATE,
-            SYSTEM_CONFIGURATION_READ,
-            SYSTEM_CONFIGURATION_UPDATE,
-            SYSTEM_CONFIGURATION_DELETE,
-          ],
+          permission: [SYSTEM_CONFIGURATION],
           children: [
             {
               component: 'Cargo',
@@ -293,13 +254,7 @@ export default {
         {
           name: this.$t('admin.notifications'),
           id: 'notifications',
-          permission: [
-            SYSTEM_CONFIGURATION,
-            SYSTEM_CONFIGURATION_CREATE,
-            SYSTEM_CONFIGURATION_READ,
-            SYSTEM_CONFIGURATION_UPDATE,
-            SYSTEM_CONFIGURATION_DELETE,
-          ],
+          permission: [SYSTEM_CONFIGURATION],
           children: [
             {
               component: 'Alerts',
@@ -316,13 +271,7 @@ export default {
         {
           name: this.$t('admin.integrations'),
           id: 'integrations',
-          permission: [
-            SYSTEM_CONFIGURATION,
-            SYSTEM_CONFIGURATION_CREATE,
-            SYSTEM_CONFIGURATION_READ,
-            SYSTEM_CONFIGURATION_UPDATE,
-            SYSTEM_CONFIGURATION_DELETE,
-          ],
+          permission: [SYSTEM_CONFIGURATION],
           children: [
             {
               component: 'DefectDojo',
@@ -349,13 +298,7 @@ export default {
         {
           name: this.$t('admin.access_management'),
           id: 'accessmanagement',
-          permission: [
-            ACCESS_MANAGEMENT,
-            ACCESS_MANAGEMENT_CREATE,
-            ACCESS_MANAGEMENT_READ,
-            ACCESS_MANAGEMENT_UPDATE,
-            ACCESS_MANAGEMENT_DELETE,
-          ],
+          permission: [ACCESS_MANAGEMENT],
           children: [
             {
               component: 'LdapUsers',
@@ -405,16 +348,18 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .admin-menu {
   margin-bottom: 0.3rem;
 }
-.list-group-item:first-child,
-.list-group-item:last-child {
-  border-radius: 0;
-}
+
 .list-group-item {
   border-left: 0;
   border-right: 0;
+
+  &:first-child,
+  &:last-child {
+    border-radius: 0;
+  }
 }
 </style>
diff --git a/src/views/administration/Administration.vue b/src/views/administration/Administration.vue
index 879ac8225..5a63ee32c 100644
--- a/src/views/administration/Administration.vue
+++ b/src/views/administration/Administration.vue
@@ -1,14 +1,5 @@
 <template>
-  <div
-    class="animated fadeIn"
-    v-permission:or="[
-      'SYSTEM_CONFIGURATION',
-      'SYSTEM_CONFIGURATION_CREATE',
-      'SYSTEM_CONFIGURATION_READ',
-      'SYSTEM_CONFIGURATION_UPDATE',
-      'SYSTEM_CONFIGURATION_DELETE',
-    ]"
-  >
+  <div class="animated fadeIn" v-permission="PERMISSIONS.SYSTEM_CONFIGURATION">
     <b-row>
       <b-col xs="6" sm="4" md="4" lg="3" id="admin-menu-column">
         <admin-menu />
@@ -26,108 +17,13 @@
 <script>
 import EventBus from '../../shared/eventbus';
 import AdminMenu from './AdminMenu';
-
-// Configuration plugins
-import BomFormats from './configuration/BomFormats';
-import Email from './configuration/Email';
-import General from './configuration/General';
-import InternalComponents from './configuration/InternalComponents';
-import Jira from './configuration/JiraConfig';
-import Search from './configuration/Search.vue';
-import TaskScheduler from './configuration/TaskScheduler.vue';
-import RiskScore from './configuration/RiskScore.vue';
-import Experimental from './configuration/Experimental.vue';
-import WelcomeMessage from './configuration/WelcomeMessage.vue';
-// Analyzer plugins
-import InternalAnalyzer from './analyzers/InternalAnalyzer';
-import OssIndexAnalyzer from './analyzers/OssIndexAnalyzer';
-import SnykAnalyzer from './analyzers/SnykAnalyzer';
-import TrivyAnalyzer from './analyzers/TrivyAnalyzer';
-import VulnDbAnalyzer from './analyzers/VulnDbAnalyzer';
-// Vulnerability sources
-import VulnSourceGitHubAdvisories from './vuln-sources/VulnSourceGitHubAdvisories';
-import VulnSourceNvd from './vuln-sources/VulnSourceNvd';
-import VulnSourceOSVAdvisories from './vuln-sources/VulnSourceOSVAdvisories';
-// Repositories
-import Cargo from './repositories/Cargo';
-import Composer from './repositories/Composer';
-import Cpan from './repositories/Cpan';
-import Gem from './repositories/Gem';
-import GitHub from './repositories/GitHub.vue';
-import GoModules from './repositories/GoModules';
-import Hackage from './repositories/Hackage.vue';
-import Hex from './repositories/Hex';
-import Maven from './repositories/Maven';
-import Nixpkgs from './repositories/Nixpkgs.vue';
-import Npm from './repositories/Npm';
-import Nuget from './repositories/Nuget';
-import Python from './repositories/Python';
-// Notification plugins
-import Alerts from './notifications/Alerts';
-import Templates from './notifications/Templates';
-// Integration plugins
-import DefectDojo from './integrations/DefectDojo';
-import FortifySsc from './integrations/FortifySsc';
-import KennaSecurity from './integrations/KennaSecurity';
-// Access Management plugins
-import LdapUsers from './accessmanagement/LdapUsers';
-import ManagedUsers from './accessmanagement/ManagedUsers';
-import OidcGroups from './accessmanagement/OidcGroups';
-import OidcUsers from './accessmanagement/OidcUsers';
-import Permissions from './accessmanagement/Permissions';
-import PortfolioAccessControl from './accessmanagement/PortfolioAccessControl';
-import Roles from './accessmanagement/Roles';
-import Teams from './accessmanagement/Teams';
+import permissionMixin from '../../mixins/permissionsMixin';
 
 export default {
   components: {
-    EventBus,
     AdminMenu,
-    General,
-    WelcomeMessage,
-    BomFormats,
-    Email,
-    Jira,
-    InternalComponents,
-    TaskScheduler,
-    Search,
-    RiskScore,
-    Experimental,
-    InternalAnalyzer,
-    OssIndexAnalyzer,
-    VulnDbAnalyzer,
-    SnykAnalyzer,
-    TrivyAnalyzer,
-    VulnSourceNvd,
-    VulnSourceGitHubAdvisories,
-    VulnSourceOSVAdvisories,
-    Cargo,
-    Composer,
-    Gem,
-    GitHub,
-    GoModules,
-    Hackage,
-    Hex,
-    Maven,
-    Nixpkgs,
-    Npm,
-    Cpan,
-    Nuget,
-    Python,
-    Alerts,
-    Templates,
-    FortifySsc,
-    DefectDojo,
-    KennaSecurity,
-    LdapUsers,
-    ManagedUsers,
-    OidcUsers,
-    OidcGroups,
-    Roles,
-    Teams,
-    Permissions,
-    PortfolioAccessControl,
   },
+  mixins: [permissionMixin],
   created() {
     // Specifies the admin plugin metadata (Vue component, i18n name, and href) of the plugin to load
     EventBus.$on('admin:plugin', (plugin) => {
diff --git a/src/views/administration/accessmanagement/Teams/TeamDetails.vue b/src/views/administration/accessmanagement/Teams/TeamDetails.vue
index c030a5fb8..210c63f90 100644
--- a/src/views/administration/accessmanagement/Teams/TeamDetails.vue
+++ b/src/views/administration/accessmanagement/Teams/TeamDetails.vue
@@ -193,9 +193,6 @@ export default {
     };
   },
   beforeMount() {
-    console.log('initializing team details');
-    console.log(this.row.apiKeys);
-    console.log(this.apiKeys);
     const modified = sessionStorage.getItem(this.storageIdentifier);
     if (modified) {
       sessionStorage.removeItem(this.storageIdentifier);
@@ -205,7 +202,6 @@ export default {
   watch: {
     team: {
       handler(newValue) {
-        console.log(`team %O`, newValue);
         this.name = newValue.name;
         this.apiKeys = this.apiKeysToDict(newValue.apiKeys ?? []);
         this.permissions = newValue.permissions;
@@ -258,7 +254,7 @@ export default {
       const titleVNode = h('div', {
         domProps: { innerHTML: title },
       });
-      const messageVNode = h('div', { class: ['foobar'] }, [
+      const messageVNode = h('div', [
         h('p', { class: ['text-center'] }, [message]),
         h(
           'pre',
diff --git a/src/views/administration/notifications/Alerts.vue b/src/views/administration/notifications/Alerts.vue
index a850b4049..8c6d339ce 100644
--- a/src/views/administration/notifications/Alerts.vue
+++ b/src/views/administration/notifications/Alerts.vue
@@ -25,18 +25,10 @@
 <script>
 import xssFilters from 'xss-filters';
 import common from '../../../shared/common';
-import i18n from '../../../i18n';
 import CreateAlertModal from './CreateAlertModal';
 import bootstrapTableMixin from '../../../mixins/bootstrapTableMixin';
 import EventBus from '../../../shared/eventbus';
-import ActionableListGroupItem from '../../components/ActionableListGroupItem';
-import SelectProjectModal from '../../portfolio/projects/SelectProjectModal';
-import SelectTeamModal from '../../administration/accessmanagement/SelectTeamModal';
-import permissionsMixin from '../../../mixins/permissionsMixin';
-import BToggleableDisplayButton from '../../components/BToggleableDisplayButton';
-import BInputGroupFormInput from '../../../forms/BInputGroupFormInput';
-import VueTagsInput from '@johmun/vue-tags-input';
-import { Switch as cSwitch } from '@coreui/vue';
+import AlertDetails from '../../components/detail-formatters/AlertDetails.vue';
 
 export default {
   props: {
@@ -123,398 +115,7 @@ export default {
         detailViewByClick: true,
         detailFormatter: (index, row) => {
           return this.vueFormatter({
-            i18n,
-            template: `
-                <b-row class="expanded-row">
-                  <b-col sm="6">
-                    <b-input-group-form-input id="input-name" :label="$t('message.name')" input-group-size="mb-3"
-                                              required="true" type="text" v-model="name" lazy="true" />
-                    <b-form-group>
-                      <c-switch id="notificationEnabled" color="primary" v-model="enabled" label v-bind="labelIcon"/>
-                      {{ $t('admin.enabled') }}
-                      <br/>
-                      <c-switch id="notificationLogSuccessfulPublish" color="primary" v-model="logSuccessfulPublish" label v-bind="labelIcon" :title="$t('admin.alert_log_successful_publish_help')" />
-                      {{ $t('admin.alert_log_successful_publish') }}
-                    </b-form-group>
-                    <b-form-group id="fieldset-2" :label="this.$t('admin.publisher')" label-for="input-2">
-                      <b-form-input id="input-2" v-model="publisherName" disabled class="form-control disabled" readonly trim />
-                    </b-form-group>
-                    <b-form-group id="fieldset-2" :label="this.$t('admin.publisher_class')" label-for="input-2">
-                      <b-form-input id="input-2" v-model="publisherClass" disabled class="form-control disabled" readonly trim />
-                    </b-form-group>
-                    <b-form-group id="fieldset-3" :label="this.$t('admin.notification_level')" label-for="input-3">
-                      <b-form-select id="input-3" v-model="notificationLevel" :options="availableLevels" required></b-form-select>
-                    </b-form-group>
-                    <b-input-group-form-input id="input-destination" :label="$t('admin.destination')" input-group-size="mb-3"
-                                              :required="(!(this.alert.hasOwnProperty('teams') && this.alert.teams != null && this.alert.teams.length > 0)).toString()"
-                                              type="text" v-model="destination" lazy="true" />
-                    <b-input-group-form-input v-if="this.publisherClass === 'org.dependencytrack.notification.publisher.WebhookPublisher'" id="input-token-header" :label="$t('admin.api_token_header')" input-group-size="mb-3"
-                                              type="password" v-model="tokenHeader" lazy="true" />
-                    <b-input-group-form-input v-if="this.publisherClass === 'org.dependencytrack.notification.publisher.WebhookPublisher'" id="input-token" :label="$t('admin.api_token')" input-group-size="mb-3"
-                                              type="password" v-model="token" lazy="true" />
-                    <b-input-group-form-input v-if="this.publisherClass === 'org.dependencytrack.notification.publisher.JiraPublisher'" id="input-jira-ticket-type"
-                                              :label="$t('admin.jira_ticket_type')" :required="true" type="text" v-model="jiraTicketType" lazy="true" />
-                     <b-form-group v-if="this.publisherClass === 'org.dependencytrack.notification.publisher.SendMailPublisher'"
-                                   id="teamDestinationList" :label="this.$t('admin.select_team_as_recipient')">
-                       <div class="list group">
-                          <span v-for="team in teams">
-                            <actionable-list-group-item :value="team.name" :delete-icon="true" v-on:actionClicked="removeSelectedTeam(team.uuid)"></actionable-list-group-item>
-                          </span>
-                          <actionable-list-group-item :add-icon="true" v-on:actionClicked="$root.$emit('bv::show::modal', 'selectTeamModal')"></actionable-list-group-item>
-                        </div>
-                      </b-form-group>
-                    <b-form-group v-if="limitToVisible === true" id="projectLimitsList" :label="this.$t('admin.limit_to_projects')">
-                      <div class="list-group">
-                        <span v-for="project in projects">
-                          <actionable-list-group-item :value="formatProjectLabel(project.name, project.version)" :delete-icon="true" v-on:actionClicked="deleteLimiter(project.uuid)"/>
-                        </span>
-                        <actionable-list-group-item :add-icon="true" v-on:actionClicked="$root.$emit('bv::show::modal', 'selectProjectModal')"/>
-                      </div>
-                    </b-form-group>
-                    <b-form-group v-if="limitToVisible" id="tagLimits" :label="this.$t('admin.limit_to_tags')">
-                      <vue-tags-input
-                        id="limitToTagsInput"
-                        v-model="tag"
-                        :tags="tags"
-                        :add-on-key="addOnKeys"
-                        :placeholder="$t('message.add_tag')"
-                        :autocomplete-items="tagsAutoCompleteItems"
-                        @tags-changed="(newTags) => (this.tags = newTags)"
-                        class="mw-100 bg-transparent text-lowercase"
-                      />
-                    </b-form-group>
-                  <div v-if="limitToVisible === true">
-                      <c-switch id="isNotifyChildrenEnabled" color="primary" v-model="notifyChildren" label v-bind="labelIcon"/>
-                      {{ $t('admin.include_active_children') }}
-                  </div>
-                  </b-col>
-                  <b-col sm="6">
-                    <b-form-group id="fieldset-5" :label="this.$t('admin.scope')" label-for="input-5">
-                      <b-form-input id="input-5" v-model="scope" disabled class="form-control disabled" readonly trim />
-                    </b-form-group>
-                    <b-form-group id="fieldset-6" :label="this.$t('admin.group')" label-for="input-6">
-                      <div class="list-group" v-if="this.scope === 'PORTFOLIO'">
-                        <b-form-checkbox-group id="checkbox-group-notify-on" v-model="notifyOn">
-                          <div class="list-group-item"><b-form-checkbox value="NEW_VULNERABILITY">NEW_VULNERABILITY</b-form-checkbox></div>
-                          <div class="list-group-item"><b-form-checkbox value="NEW_VULNERABLE_DEPENDENCY">NEW_VULNERABLE_DEPENDENCY</b-form-checkbox></div>
-                          <div class="list-group-item"><b-form-checkbox value="PROJECT_AUDIT_CHANGE">PROJECT_AUDIT_CHANGE</b-form-checkbox></div>
-                          <div class="list-group-item"><b-form-checkbox value="BOM_CONSUMED">BOM_CONSUMED</b-form-checkbox></div>
-                          <div class="list-group-item"><b-form-checkbox value="BOM_PROCESSED">BOM_PROCESSED</b-form-checkbox></div>
-                          <div class="list-group-item"><b-form-checkbox value="BOM_PROCESSING_FAILED">BOM_PROCESSING_FAILED</b-form-checkbox></div>
-                          <div class="list-group-item"><b-form-checkbox value="BOM_VALIDATION_FAILED">BOM_VALIDATION_FAILED</b-form-checkbox></div>
-                          <div class="list-group-item"><b-form-checkbox value="VEX_CONSUMED">VEX_CONSUMED</b-form-checkbox></div>
-                          <div class="list-group-item"><b-form-checkbox value="VEX_PROCESSED">VEX_PROCESSED</b-form-checkbox></div>
-                          <div class="list-group-item"><b-form-checkbox value="POLICY_VIOLATION">POLICY_VIOLATION</b-form-checkbox></div>
-                          <div class="list-group-item"><b-form-checkbox value="PROJECT_CREATED">PROJECT_CREATED</b-form-checkbox></div>
-                        </b-form-checkbox-group>
-                      </div>
-                      <div class="list-group" v-if="this.scope === 'SYSTEM'">
-                        <b-form-checkbox-group id="checkbox-group-notify-on" v-model="notifyOn">
-                          <div class="list-group-item"><b-form-checkbox value="ANALYZER">ANALYZER</b-form-checkbox></div>
-                          <div class="list-group-item"><b-form-checkbox value="DATASOURCE_MIRRORING">DATASOURCE_MIRRORING</b-form-checkbox></div>
-                          <div class="list-group-item"><b-form-checkbox value="FILE_SYSTEM">FILE_SYSTEM</b-form-checkbox></div>
-                          <div class="list-group-item"><b-form-checkbox value="INDEXING_SERVICE">INDEXING_SERVICE</b-form-checkbox></div>
-                          <div class="list-group-item"><b-form-checkbox value="REPOSITORY">REPOSITORY</b-form-checkbox></div>
-                          <div class="list-group-item"><b-form-checkbox value="USER_CREATED">USER_CREATED</b-form-checkbox></div>
-                          <div class="list-group-item"><b-form-checkbox value="USER_DELETED">USER_DELETED</b-form-checkbox></div>
-                        </b-form-checkbox-group>
-                      </div>
-                    </b-form-group>
-                    <div style="text-align:right">
-                      <b-button variant="outline-primary" @click="testNotification">{{ $t('admin.perform_test') }}</b-button>
-                      <b-toggleable-display-button variant="outline-primary" :label="$t('admin.limit_to')"
-                                v-permission="PERMISSIONS.VIEW_PORTFOLIO" v-on:toggle="limitToVisible = !limitToVisible"
-                                v-if="this.scope === 'PORTFOLIO'" />
-                       <b-button variant="outline-danger" @click="deleteNotificationRule">{{ $t('admin.delete_alert') }}</b-button>
-                       <b-button variant="primary" @click="updateNotificationRule">{{ $t('admin.submit') }}</b-button>
-                    </div>
-                  </b-col>
-                  <select-project-modal v-on:selection="updateProjectSelection"/>
-                  <select-team-modal v-on:selection="updateTeamSelection"></select-team-modal>
-                </b-row>
-              `,
-            mixins: [permissionsMixin],
-            components: {
-              ActionableListGroupItem,
-              SelectProjectModal,
-              SelectTeamModal,
-              BToggleableDisplayButton,
-              BInputGroupFormInput,
-              VueTagsInput,
-              cSwitch,
-            },
-            data() {
-              return {
-                alert: row,
-                uuid: row.uuid,
-                name: row.name,
-                enabled: row.enabled,
-                logSuccessfulPublish: row.logSuccessfulPublish,
-                notifyChildren: row.notifyChildren,
-                publisherName: row.publisher.name,
-                publisherClass: row.publisher.publisherClass,
-                notificationLevel: row.notificationLevel,
-                destination: this.parseDestination(row),
-                token: this.parseToken(row),
-                tokenHeader: this.parseTokenHeader(row),
-                jiraTicketType: this.parseJiraTicketType(row),
-                scope: row.scope,
-                notifyOn: row.notifyOn,
-                projects: row.projects,
-                teams: row.teams,
-                limitToVisible: false,
-                tag: '', // The contents of a tag as its being typed into the vue-tag-input
-                tags: [], // An array of tags bound to the vue-tag-input
-                tagsAutoCompleteItems: [],
-                tagsAutoCompleteDebounce: null,
-                addOnKeys: [9, 13, 32, ':', ';', ','], // Separators used when typing tags into the vue-tag-input
-                labelIcon: {
-                  dataOn: '\u2713',
-                  dataOff: '\u2715',
-                },
-                availableLevels: [
-                  {
-                    value: 'INFORMATIONAL',
-                    text: 'Informational',
-                    selected: true,
-                  },
-                  { value: 'WARNING', text: 'Warning' },
-                  { value: 'ERROR', text: 'Error' },
-                ],
-              };
-            },
-            created() {
-              this.initializeTags();
-              this.parseDestination(this.alert);
-              this.parseToken(this.alert);
-              this.parseTokenHeader(this.alert);
-              this.parseJiraTicketType(this.alert);
-            },
-            watch: {
-              alert() {
-                this.initializeTags();
-              },
-              tag: 'searchTags',
-            },
-            methods: {
-              initializeTags: function () {
-                this.tags = (this.alert.tags || []).map((tag) => ({
-                  text: tag.name,
-                }));
-              },
-              formatProjectLabel: function (projectName, projectVersion) {
-                if (projectName && projectVersion) {
-                  return projectName + ' ' + projectVersion;
-                } else {
-                  return projectName;
-                }
-              },
-              parseDestination: function (alert) {
-                if (alert.publisherConfig) {
-                  let value = JSON.parse(alert.publisherConfig);
-                  if (value) {
-                    return value.destination;
-                  }
-                  return null;
-                }
-              },
-              parseToken: function (alert) {
-                if (alert.publisherConfig) {
-                  let value = JSON.parse(alert.publisherConfig);
-                  if (value) {
-                    return value.token;
-                  }
-                  return null;
-                }
-              },
-              parseTokenHeader: function (alert) {
-                if (alert.publisherConfig) {
-                  let value = JSON.parse(alert.publisherConfig);
-                  if (value) {
-                    return value.tokenHeader;
-                  }
-                  return null;
-                }
-              },
-              parseJiraTicketType: function (alert) {
-                if (alert.publisherConfig) {
-                  let value = JSON.parse(alert.publisherConfig);
-                  if (value) {
-                    return value.jiraTicketType;
-                  }
-                  return null;
-                }
-              },
-              updateNotificationRule: function () {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_NOTIFICATION_RULE}`;
-                this.axios
-                  .post(url, {
-                    uuid: this.uuid,
-                    name: this.name,
-                    enabled: this.enabled,
-                    logSuccessfulPublish: this.logSuccessfulPublish,
-                    notifyChildren: this.notifyChildren,
-                    notificationLevel: this.notificationLevel,
-                    publisherConfig: JSON.stringify({
-                      destination: this.destination,
-                      jiraTicketType: this.jiraTicketType,
-                      token: this.token,
-                      tokenHeader: this.tokenHeader,
-                    }),
-                    notifyOn: this.notifyOn,
-                    tags: this.tags.map((tag) => {
-                      return { name: tag.text };
-                    }),
-                  })
-                  .then((response) => {
-                    this.alert = response.data;
-                    this.destination = this.parseDestination(this.alert);
-                    this.token = this.parseToken(this.alert);
-                    this.tokenHeader = this.parseTokenHeader(this.alert);
-                    this.jiraTicketType = this.parseJiraTicketType(this.alert);
-                    EventBus.$emit('admin:alerts:rowUpdate', index, this.alert);
-                    this.$toastr.s(this.$t('message.updated'));
-                  })
-                  .catch((error) => {
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              deleteNotificationRule: function () {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_NOTIFICATION_RULE}`;
-                this.axios
-                  .delete(url, {
-                    data: {
-                      uuid: this.alert.uuid,
-                    },
-                  })
-                  .then((response) => {
-                    EventBus.$emit('admin:alerts:rowDeleted', index);
-                    this.$toastr.s(this.$t('admin.alert_deleted'));
-                  })
-                  .catch((error) => {
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              deleteLimiter: function (projectUuid) {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_NOTIFICATION_RULE}/${this.uuid}/project/${projectUuid}`;
-                this.axios
-                  .delete(url)
-                  .then((response) => {
-                    let p = [];
-                    for (let i = 0; i < this.projects.length; i++) {
-                      if (this.projects[i].uuid !== projectUuid) {
-                        p.push(this.projects[i]);
-                      }
-                    }
-                    this.projects = p;
-                    this.$toastr.s(this.$t('message.updated'));
-                  })
-                  .catch((error) => {
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              testNotification: function () {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_NOTIFICATION_PUBLISHER}/test/${this.uuid}`;
-                let params = new URLSearchParams();
-                params.append('destination', this.destination);
-                this.axios
-                  .post(url, params, {
-                    headers: {
-                      'Content-Type': 'application/x-www-form-urlencoded',
-                    },
-                  })
-                  .then((response) => {
-                    this.alert = response.data;
-                    this.$toastr.s(this.$t('admin.test_notification_queued'));
-                  })
-                  .catch((error) => {
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              updateProjectSelection: function (selections) {
-                this.$root.$emit('bv::hide::modal', 'selectProjectModal');
-                for (let i = 0; i < selections.length; i++) {
-                  let selection = selections[i];
-                  let url = `${this.$api.BASE_URL}/${this.$api.URL_NOTIFICATION_RULE}/${this.uuid}/project/${selection.uuid}`;
-                  this.axios
-                    .post(url)
-                    .then((response) => {
-                      this.projects.push(selection);
-                      this.$toastr.s(this.$t('message.updated'));
-                    })
-                    .catch((error) => {
-                      if (error.response.status === 304) {
-                        //this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                      } else {
-                        this.$toastr.w(
-                          this.$t('condition.unsuccessful_action'),
-                        );
-                      }
-                    });
-                }
-              },
-              updateTeamSelection: function (selections) {
-                this.$root.$emit('bv::hide::modal', 'selectTeamModal');
-                for (let i = 0; i < selections.length; i++) {
-                  let selection = selections[i];
-                  let url = `${this.$api.BASE_URL}/${this.$api.URL_NOTIFICATION_RULE}/${this.uuid}/team/${selection.uuid}`;
-                  this.axios
-                    .post(url)
-                    .then((response) => {
-                      if (this.teams) {
-                        this.teams.push(selection);
-                      } else {
-                        this.teams = [];
-                        let team = {
-                          uuid: selection.uuid,
-                          name: selection.name,
-                        };
-                        this.teams.push(team);
-                      }
-                    })
-                    .catch((error) => {
-                      if (error.response.status === 304) {
-                        //this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                      } else {
-                        this.$toastr.w(
-                          this.$t('condition.unsuccessful_action'),
-                        );
-                      }
-                    });
-                }
-              },
-              removeSelectedTeam: function (teamUuid) {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_NOTIFICATION_RULE}/${this.uuid}/team/${teamUuid}`;
-                this.axios
-                  .delete(url)
-                  .then((response) => {
-                    let newTeams = [];
-                    for (let i = 0; i < this.teams.length; i++) {
-                      if (this.teams[i].uuid !== teamUuid) {
-                        newTeams.push(this.teams[i]);
-                      }
-                    }
-                    this.teams = newTeams;
-                  })
-                  .catch((error) => {
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              searchTags: function () {
-                if (!this.tag) {
-                  return;
-                }
-                clearTimeout(this.tagsAutoCompleteDebounce);
-                this.tagsAutoCompleteDebounce = setTimeout(() => {
-                  const url = `${this.$api.BASE_URL}/${this.$api.URL_TAG}?searchText=${encodeURIComponent(this.tag)}&pageNumber=1&pageSize=6`;
-                  this.axios.get(url).then((response) => {
-                    this.tagsAutoCompleteItems = response.data.map((tag) => {
-                      return { text: tag.name };
-                    });
-                  });
-                }, 250);
-              },
-            },
+            render: () => <AlertDetails alert={row} index={index} />,
           });
         },
         onExpandRow: this.vueFormatterInit,
diff --git a/src/views/audit/PolicyViolationAudit.vue b/src/views/audit/PolicyViolationAudit.vue
index 64918916c..08545bd81 100644
--- a/src/views/audit/PolicyViolationAudit.vue
+++ b/src/views/audit/PolicyViolationAudit.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="animated fadeIn" v-permission="PERMISSIONS.VIEW_POLICY_VIOLATION">
+  <div class="animated fadeIn" v-permission="PERMISSIONS.POLICY_MANAGEMENT">
     <b-row>
       <b-col xs="6" sm="4" md="4" lg="2" id="filter-controls">
         <div>
@@ -145,8 +145,6 @@ import permissionsMixin from '../../mixins/permissionsMixin';
 import common from '@/shared/common';
 import xssFilters from 'xss-filters';
 import { loadUserPreferencesForBootstrapTable } from '@/shared/utils';
-import { hasPermission } from '@/shared/permissions';
-import * as permissions from '@/shared/permissions';
 
 export default {
   mixins: [permissionsMixin],
@@ -173,27 +171,22 @@ export default {
   },
   methods: {
     initializePolicies: function () {
-      let policyUrl = `${this.$api.BASE_URL}/${this.$api.URL_POLICY}`;
-      if (
-        hasPermission(permissions.POLICY_MANAGEMENT, this.decodedToken) ||
-        hasPermission(permissions.ACCESS_MANAGEMENT, this.decodedToken)
-      ) {
-        this.axios
-          .get(policyUrl)
-          .then((response) => {
-            if (response.data) {
-              response.data.forEach((policy) =>
-                this.policyOptions.push({
-                  text: policy.name,
-                  value: policy.uuid,
-                }),
-              );
-            }
-          })
-          .catch((error) => {
-            this.$toastr.w(this.$t('condition.unsuccessful_action'));
-          });
-      }
+      if (!this.hasPermission(this.PERMISSIONS.POLICY_MANAGEMENT)) return;
+      const policyUrl = `${this.$api.BASE_URL}/${this.$api.URL_POLICY}`;
+
+      this.axios
+        .get(policyUrl)
+        .then((response) => {
+          if (Array.isArray(response.data)) {
+            this.policyOptions = response.data.map((policy) => ({
+              text: policy.name,
+              value: policy.uuid,
+            }));
+          }
+        })
+        .catch((error) => {
+          this.$toastr.w(this.$t('condition.unsuccessful_action'));
+        });
     },
     initializeWatchers: function () {
       this.simpleWatcher = this.$watch('watchers', () => this.refreshTable());
diff --git a/src/views/components/BToggleableDisplayButton.vue b/src/views/components/BToggleableDisplayButton.vue
index 009ad89bc..2f78f8dbd 100644
--- a/src/views/components/BToggleableDisplayButton.vue
+++ b/src/views/components/BToggleableDisplayButton.vue
@@ -1,31 +1,23 @@
 <template>
-  <b-button
-    :pressed.sync="toggle"
-    :variant="variant"
-    v-on:click="$emit('toggle')"
-    ><i :class="iconClass"></i> {{ label }}</b-button
-  >
+  <b-button :pressed="value" :variant="variant" @click="$emit('input', !value)">
+    <i :class="iconClass"></i> {{ label }}
+  </b-button>
 </template>
 
 <script>
 export default {
   props: {
+    value: {
+      type: Boolean,
+      default: false,
+    },
     variant: String,
     label: String,
   },
   computed: {
-    iconClass: function () {
-      if (this.toggle === true) {
-        return 'fa fa-chevron-up';
-      } else {
-        return 'fa fa-chevron-down';
-      }
+    iconClass() {
+      return `fa fa-chevron-${this.value ? 'up' : 'down'}`;
     },
   },
-  data() {
-    return {
-      toggle: false,
-    };
-  },
 };
 </script>
diff --git a/src/views/components/detail-formatters/AlertDetails.vue b/src/views/components/detail-formatters/AlertDetails.vue
new file mode 100644
index 000000000..1ee442269
--- /dev/null
+++ b/src/views/components/detail-formatters/AlertDetails.vue
@@ -0,0 +1,635 @@
+<template>
+  <b-row class="expanded-row">
+    <b-col sm="6">
+      <b-input-group-form-input
+        id="input-name"
+        :label="$t('message.name')"
+        input-group-size="mb-3"
+        required="true"
+        type="text"
+        v-model="name"
+        lazy="true"
+      />
+      <b-form-group>
+        <c-switch
+          id="notificationEnabled"
+          color="primary"
+          v-model="enabled"
+          label
+          v-bind="labelIcon"
+        />
+        {{ $t('admin.enabled') }}
+        <br />
+        <c-switch
+          id="notificationLogSuccessfulPublish"
+          color="primary"
+          v-model="logSuccessfulPublish"
+          label
+          v-bind="labelIcon"
+          :title="$t('admin.alert_log_successful_publish_help')"
+        />
+        {{ $t('admin.alert_log_successful_publish') }}
+      </b-form-group>
+      <b-form-group
+        id="fieldset-2"
+        :label="this.$t('admin.publisher')"
+        label-for="input-2"
+      >
+        <b-form-input
+          id="input-2"
+          v-model="publisherName"
+          disabled
+          class="form-control disabled"
+          readonly
+          trim
+        />
+      </b-form-group>
+      <b-form-group
+        id="fieldset-2"
+        :label="this.$t('admin.publisher_class')"
+        label-for="input-2"
+      >
+        <b-form-input
+          id="input-2"
+          v-model="publisherClass"
+          disabled
+          class="form-control disabled"
+          readonly
+          trim
+        />
+      </b-form-group>
+      <b-form-group
+        id="fieldset-3"
+        :label="this.$t('admin.notification_level')"
+        label-for="input-3"
+      >
+        <b-form-select
+          id="input-3"
+          v-model="notificationLevel"
+          :options="availableLevels"
+          required
+        ></b-form-select>
+      </b-form-group>
+      <b-input-group-form-input
+        id="input-destination"
+        :label="$t('admin.destination')"
+        input-group-size="mb-3"
+        :required="
+          (!(
+            this.alert.hasOwnProperty('teams') &&
+            this.alert.teams != null &&
+            this.alert.teams.length > 0
+          )).toString()
+        "
+        type="text"
+        v-model="destination"
+        lazy="true"
+      />
+      <b-input-group-form-input
+        v-if="
+          this.publisherClass ===
+          'org.dependencytrack.notification.publisher.WebhookPublisher'
+        "
+        id="input-token-header"
+        :label="$t('admin.api_token_header')"
+        input-group-size="mb-3"
+        type="password"
+        v-model="tokenHeader"
+        lazy="true"
+      />
+      <b-input-group-form-input
+        v-if="
+          this.publisherClass ===
+          'org.dependencytrack.notification.publisher.WebhookPublisher'
+        "
+        id="input-token"
+        :label="$t('admin.api_token')"
+        input-group-size="mb-3"
+        type="password"
+        v-model="token"
+        lazy="true"
+      />
+      <b-input-group-form-input
+        v-if="
+          this.publisherClass ===
+          'org.dependencytrack.notification.publisher.JiraPublisher'
+        "
+        id="input-jira-ticket-type"
+        :label="$t('admin.jira_ticket_type')"
+        :required="true"
+        type="text"
+        v-model="jiraTicketType"
+        lazy="true"
+      />
+      <b-form-group
+        v-if="
+          this.publisherClass ===
+          'org.dependencytrack.notification.publisher.SendMailPublisher'
+        "
+        id="teamDestinationList"
+        :label="this.$t('admin.select_team_as_recipient')"
+      >
+        <div class="list group">
+          <span v-for="team in teams" :key="team.uuid">
+            <actionable-list-group-item
+              :value="team.name"
+              :delete-icon="true"
+              v-on:actionClicked="removeSelectedTeam(team.uuid)"
+            ></actionable-list-group-item>
+          </span>
+          <actionable-list-group-item
+            :add-icon="true"
+            v-on:actionClicked="
+              $root.$emit('bv::show::modal', 'selectTeamModal')
+            "
+          ></actionable-list-group-item>
+        </div>
+      </b-form-group>
+      <b-collapse v-model="limitToVisible">
+        <b-form-group
+          id="projectLimitsList"
+          :label="this.$t('admin.limit_to_projects')"
+        >
+          <div class="list-group">
+            <span v-for="project in projects" :key="project.uuid">
+              <actionable-list-group-item
+                :value="formatProjectLabel(project.name, project.version)"
+                :delete-icon="true"
+                v-on:actionClicked="deleteLimiter(project.uuid)"
+              />
+            </span>
+            <actionable-list-group-item
+              :add-icon="true"
+              v-on:actionClicked="
+                $root.$emit('bv::show::modal', 'selectProjectModal')
+              "
+            />
+          </div>
+        </b-form-group>
+        <b-form-group id="tagLimits" :label="this.$t('admin.limit_to_tags')">
+          <vue-tags-input
+            id="limitToTagsInput"
+            v-model="tag"
+            :tags="tags"
+            :add-on-key="addOnKeys"
+            :placeholder="$t('message.add_tag')"
+            :autocomplete-items="tagsAutoCompleteItems"
+            @tags-changed="(newTags) => (this.tags = newTags)"
+            class="mw-100 bg-transparent text-lowercase"
+          />
+        </b-form-group>
+        <div>
+          <c-switch
+            id="isNotifyChildrenEnabled"
+            color="primary"
+            v-model="notifyChildren"
+            label
+            v-bind="labelIcon"
+          />
+          {{ $t('admin.include_active_children') }}
+        </div>
+      </b-collapse>
+    </b-col>
+    <b-col sm="6">
+      <b-form-group
+        id="fieldset-5"
+        :label="this.$t('admin.scope')"
+        label-for="input-5"
+      >
+        <b-form-input
+          id="input-5"
+          v-model="scope"
+          disabled
+          class="form-control disabled"
+          readonly
+          trim
+        />
+      </b-form-group>
+      <b-form-group
+        id="fieldset-6"
+        :label="this.$t('admin.group')"
+        label-for="input-6"
+      >
+        <div class="list-group" v-if="this.scope === 'PORTFOLIO'">
+          <b-form-checkbox-group
+            id="checkbox-group-notify-on"
+            v-model="notifyOn"
+          >
+            <div class="list-group-item">
+              <b-form-checkbox value="NEW_VULNERABILITY"
+                >NEW_VULNERABILITY</b-form-checkbox
+              >
+            </div>
+            <div class="list-group-item">
+              <b-form-checkbox value="NEW_VULNERABLE_DEPENDENCY"
+                >NEW_VULNERABLE_DEPENDENCY</b-form-checkbox
+              >
+            </div>
+            <div class="list-group-item">
+              <b-form-checkbox value="PROJECT_AUDIT_CHANGE"
+                >PROJECT_AUDIT_CHANGE</b-form-checkbox
+              >
+            </div>
+            <div class="list-group-item">
+              <b-form-checkbox value="BOM_CONSUMED"
+                >BOM_CONSUMED</b-form-checkbox
+              >
+            </div>
+            <div class="list-group-item">
+              <b-form-checkbox value="BOM_PROCESSED"
+                >BOM_PROCESSED</b-form-checkbox
+              >
+            </div>
+            <div class="list-group-item">
+              <b-form-checkbox value="BOM_PROCESSING_FAILED"
+                >BOM_PROCESSING_FAILED</b-form-checkbox
+              >
+            </div>
+            <div class="list-group-item">
+              <b-form-checkbox value="BOM_VALIDATION_FAILED"
+                >BOM_VALIDATION_FAILED</b-form-checkbox
+              >
+            </div>
+            <div class="list-group-item">
+              <b-form-checkbox value="VEX_CONSUMED"
+                >VEX_CONSUMED</b-form-checkbox
+              >
+            </div>
+            <div class="list-group-item">
+              <b-form-checkbox value="VEX_PROCESSED"
+                >VEX_PROCESSED</b-form-checkbox
+              >
+            </div>
+            <div class="list-group-item">
+              <b-form-checkbox value="POLICY_VIOLATION"
+                >POLICY_VIOLATION</b-form-checkbox
+              >
+            </div>
+            <div class="list-group-item">
+              <b-form-checkbox value="PROJECT_CREATED"
+                >PROJECT_CREATED</b-form-checkbox
+              >
+            </div>
+          </b-form-checkbox-group>
+        </div>
+        <div class="list-group" v-if="this.scope === 'SYSTEM'">
+          <b-form-checkbox-group
+            id="checkbox-group-notify-on"
+            v-model="notifyOn"
+          >
+            <div class="list-group-item">
+              <b-form-checkbox value="ANALYZER">ANALYZER</b-form-checkbox>
+            </div>
+            <div class="list-group-item">
+              <b-form-checkbox value="DATASOURCE_MIRRORING"
+                >DATASOURCE_MIRRORING</b-form-checkbox
+              >
+            </div>
+            <div class="list-group-item">
+              <b-form-checkbox value="FILE_SYSTEM">FILE_SYSTEM</b-form-checkbox>
+            </div>
+            <div class="list-group-item">
+              <b-form-checkbox value="INDEXING_SERVICE"
+                >INDEXING_SERVICE</b-form-checkbox
+              >
+            </div>
+            <div class="list-group-item">
+              <b-form-checkbox value="REPOSITORY">REPOSITORY</b-form-checkbox>
+            </div>
+            <div class="list-group-item">
+              <b-form-checkbox value="USER_CREATED"
+                >USER_CREATED</b-form-checkbox
+              >
+            </div>
+            <div class="list-group-item">
+              <b-form-checkbox value="USER_DELETED"
+                >USER_DELETED</b-form-checkbox
+              >
+            </div>
+          </b-form-checkbox-group>
+        </div>
+      </b-form-group>
+      <div style="text-align: right">
+        <b-button variant="outline-primary" @click="testNotification">{{
+          $t('admin.perform_test')
+        }}</b-button>
+        <b-toggleable-display-button
+          variant="outline-primary"
+          :label="$t('admin.limit_to')"
+          v-model="limitToVisible"
+          v-if="this.scope === 'PORTFOLIO'"
+        />
+        <b-button variant="outline-danger" @click="deleteNotificationRule">{{
+          $t('admin.delete_alert')
+        }}</b-button>
+        <b-button variant="primary" @click="updateNotificationRule">{{
+          $t('admin.submit')
+        }}</b-button>
+      </div>
+    </b-col>
+    <select-project-modal v-on:selection="updateProjectSelection" />
+    <select-team-modal v-on:selection="updateTeamSelection"></select-team-modal>
+  </b-row>
+</template>
+<script>
+import i18n from '../../../i18n';
+import SelectProjectModal from '../../portfolio/projects/SelectProjectModal.vue';
+import ActionableListGroupItem from '../ActionableListGroupItem.vue';
+import SelectTeamModal from '../../administration/accessmanagement/SelectTeamModal.vue';
+import BToggleableDisplayButton from '../BToggleableDisplayButton.vue';
+import BInputGroupFormInput from '../../../forms/BInputGroupFormInput.vue';
+import VueTagsInput from '@johmun/vue-tags-input';
+import { Switch as cSwitch } from '@coreui/vue';
+import EventBus from '../../../shared/eventbus';
+
+export default {
+  i18n,
+  props: {
+    index: {
+      type: Number,
+      required: true,
+    },
+    row: {
+      type: Object,
+      required: true,
+    },
+  },
+  components: {
+    ActionableListGroupItem,
+    SelectProjectModal,
+    SelectTeamModal,
+    BToggleableDisplayButton,
+    BInputGroupFormInput,
+    VueTagsInput,
+    cSwitch,
+  },
+  data() {
+    return {
+      alert: this.row,
+      uuid: this.row.uuid,
+      name: this.row.name,
+      enabled: this.row.enabled,
+      logSuccessfulPublish: this.row.logSuccessfulPublish,
+      notifyChildren: this.row.notifyChildren,
+      publisherName: this.row.publisher.name,
+      publisherClass: this.row.publisher.publisherClass,
+      notificationLevel: this.row.notificationLevel,
+      destination: this.parseDestination(this.row),
+      token: this.parseToken(this.row),
+      tokenHeader: this.parseTokenHeader(this.row),
+      jiraTicketType: this.parseJiraTicketType(this.row),
+      scope: this.row.scope,
+      notifyOn: this.row.notifyOn,
+      projects: this.row.projects,
+      teams: this.row.teams,
+      limitToVisible: false,
+      tag: '', // The contents of a tag as its being typed into the vue-tag-input
+      tags: [], // An array of tags bound to the vue-tag-input
+      tagsAutoCompleteItems: [],
+      tagsAutoCompleteDebounce: null,
+      addOnKeys: [9, 13, 32, ':', ';', ','], // Separators used when typing tags into the vue-tag-input
+      labelIcon: {
+        dataOn: '\u2713',
+        dataOff: '\u2715',
+      },
+      availableLevels: [
+        {
+          value: 'INFORMATIONAL',
+          text: 'Informational',
+          selected: true,
+        },
+        { value: 'WARNING', text: 'Warning' },
+        { value: 'ERROR', text: 'Error' },
+      ],
+    };
+  },
+  created() {
+    this.initializeTags();
+    this.parseDestination(this.alert);
+    this.parseToken(this.alert);
+    this.parseTokenHeader(this.alert);
+    this.parseJiraTicketType(this.alert);
+  },
+  watch: {
+    alert() {
+      this.initializeTags();
+    },
+    tag: 'searchTags',
+  },
+  methods: {
+    initializeTags: function () {
+      this.tags = (this.alert.tags || []).map((tag) => ({
+        text: tag.name,
+      }));
+    },
+    formatProjectLabel: function (projectName, projectVersion) {
+      if (projectName && projectVersion) {
+        return projectName + ' ' + projectVersion;
+      } else {
+        return projectName;
+      }
+    },
+    parseDestination: function (alert) {
+      if (alert.publisherConfig) {
+        let value = JSON.parse(alert.publisherConfig);
+        if (value) {
+          return value.destination;
+        }
+        return null;
+      }
+    },
+    parseToken: function (alert) {
+      if (alert.publisherConfig) {
+        let value = JSON.parse(alert.publisherConfig);
+        if (value) {
+          return value.token;
+        }
+        return null;
+      }
+    },
+    parseTokenHeader: function (alert) {
+      if (alert.publisherConfig) {
+        let value = JSON.parse(alert.publisherConfig);
+        if (value) {
+          return value.tokenHeader;
+        }
+        return null;
+      }
+    },
+    parseJiraTicketType: function (alert) {
+      if (alert.publisherConfig) {
+        let value = JSON.parse(alert.publisherConfig);
+        if (value) {
+          return value.jiraTicketType;
+        }
+        return null;
+      }
+    },
+    updateNotificationRule: function () {
+      const url = `${this.$api.BASE_URL}/${this.$api.URL_NOTIFICATION_RULE}`;
+      this.axios
+        .post(url, {
+          uuid: this.uuid,
+          name: this.name,
+          enabled: this.enabled,
+          logSuccessfulPublish: this.logSuccessfulPublish,
+          notifyChildren: this.notifyChildren,
+          notificationLevel: this.notificationLevel,
+          publisherConfig: JSON.stringify({
+            destination: this.destination,
+            jiraTicketType: this.jiraTicketType,
+            token: this.token,
+            tokenHeader: this.tokenHeader,
+          }),
+          notifyOn: this.notifyOn,
+          tags: this.tags.map((tag) => {
+            return { name: tag.text };
+          }),
+        })
+        .then((response) => {
+          this.alert = response.data;
+          this.destination = this.parseDestination(this.alert);
+          this.token = this.parseToken(this.alert);
+          this.tokenHeader = this.parseTokenHeader(this.alert);
+          this.jiraTicketType = this.parseJiraTicketType(this.alert);
+          EventBus.$emit('admin:alerts:rowUpdate', this.index, this.alert);
+          this.$toastr.s(this.$t('message.updated'));
+        })
+        .catch(() => {
+          this.$toastr.w(this.$t('condition.unsuccessful_action'));
+        });
+    },
+    deleteNotificationRule: function () {
+      const url = `${this.$api.BASE_URL}/${this.$api.URL_NOTIFICATION_RULE}`;
+      this.axios
+        .delete(url, {
+          data: {
+            uuid: this.alert.uuid,
+          },
+        })
+        .then(() => {
+          EventBus.$emit('admin:alerts:rowDeleted', this.index);
+          this.$toastr.s(this.$t('admin.alert_deleted'));
+        })
+        .catch(() => {
+          this.$toastr.w(this.$t('condition.unsuccessful_action'));
+        });
+    },
+    deleteLimiter: function (projectUuid) {
+      const url = `${this.$api.BASE_URL}/${this.$api.URL_NOTIFICATION_RULE}/${this.uuid}/project/${projectUuid}`;
+      this.axios
+        .delete(url)
+        .then(() => {
+          let p = [];
+          for (let i = 0; i < this.projects.length; i++) {
+            if (this.projects[i].uuid !== projectUuid) {
+              p.push(this.projects[i]);
+            }
+          }
+          this.projects = p;
+          this.$toastr.s(this.$t('message.updated'));
+        })
+        .catch(() => {
+          this.$toastr.w(this.$t('condition.unsuccessful_action'));
+        });
+    },
+    testNotification: function () {
+      const url = `${this.$api.BASE_URL}/${this.$api.URL_NOTIFICATION_PUBLISHER}/test/${this.uuid}`;
+      let params = new URLSearchParams();
+      params.append('destination', this.destination);
+      this.axios
+        .post(url, params, {
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+          },
+        })
+        .then((response) => {
+          this.alert = response.data;
+          this.$toastr.s(this.$t('admin.test_notification_queued'));
+        })
+        .catch(() => {
+          this.$toastr.w(this.$t('condition.unsuccessful_action'));
+        });
+    },
+    updateProjectSelection: function (selections) {
+      this.$root.$emit('bv::hide::modal', 'selectProjectModal');
+      for (let i = 0; i < selections.length; i++) {
+        let selection = selections[i];
+        const url = `${this.$api.BASE_URL}/${this.$api.URL_NOTIFICATION_RULE}/${this.uuid}/project/${selection.uuid}`;
+        this.axios
+          .post(url)
+          .then(() => {
+            this.projects.push(selection);
+            this.$toastr.s(this.$t('message.updated'));
+          })
+          .catch((error) => {
+            if (error.response.status === 304) {
+              //this.$toastr.w(this.$t('condition.unsuccessful_action'));
+            } else {
+              this.$toastr.w(this.$t('condition.unsuccessful_action'));
+            }
+          });
+      }
+    },
+    updateTeamSelection: function (selections) {
+      this.$root.$emit('bv::hide::modal', 'selectTeamModal');
+      for (let i = 0; i < selections.length; i++) {
+        let selection = selections[i];
+        const url = `${this.$api.BASE_URL}/${this.$api.URL_NOTIFICATION_RULE}/${this.uuid}/team/${selection.uuid}`;
+        this.axios
+          .post(url)
+          .then(() => {
+            if (this.teams) {
+              this.teams.push(selection);
+            } else {
+              this.teams = [];
+              let team = {
+                uuid: selection.uuid,
+                name: selection.name,
+              };
+              this.teams.push(team);
+            }
+          })
+          .catch((error) => {
+            if (error.response.status === 304) {
+              //this.$toastr.w(this.$t('condition.unsuccessful_action'));
+            } else {
+              this.$toastr.w(this.$t('condition.unsuccessful_action'));
+            }
+          });
+      }
+    },
+    removeSelectedTeam: function (teamUuid) {
+      const url = `${this.$api.BASE_URL}/${this.$api.URL_NOTIFICATION_RULE}/${this.uuid}/team/${teamUuid}`;
+      this.axios
+        .delete(url)
+        .then(() => {
+          let newTeams = [];
+          for (let i = 0; i < this.teams.length; i++) {
+            if (this.teams[i].uuid !== teamUuid) {
+              newTeams.push(this.teams[i]);
+            }
+          }
+          this.teams = newTeams;
+        })
+        .catch(() => {
+          this.$toastr.w(this.$t('condition.unsuccessful_action'));
+        });
+    },
+    searchTags: function () {
+      if (!this.tag) {
+        return;
+      }
+      clearTimeout(this.tagsAutoCompleteDebounce);
+      this.tagsAutoCompleteDebounce = setTimeout(() => {
+        const url = `${this.$api.BASE_URL}/${this.$api.URL_TAG}?searchText=${encodeURIComponent(this.tag)}&pageNumber=1&pageSize=6`;
+        this.axios.get(url).then((response) => {
+          this.tagsAutoCompleteItems = response.data.map((tag) => {
+            return { text: tag.name };
+          });
+        });
+      }, 250);
+    },
+  },
+};
+</script>
diff --git a/src/views/components/detail-formatters/LicenseGroupListDetails.vue b/src/views/components/detail-formatters/LicenseGroupListDetails.vue
new file mode 100644
index 000000000..635a87525
--- /dev/null
+++ b/src/views/components/detail-formatters/LicenseGroupListDetails.vue
@@ -0,0 +1,163 @@
+<template>
+  <div>
+    <b-row class="expanded-row">
+      <b-col sm="6">
+        <b-input-group-form-input
+          id="input-license-group-name"
+          :label="$t('message.name')"
+          input-group-size="mb-3"
+          required="true"
+          type="text"
+          v-model="name"
+          lazy="true"
+          autofocus="true"
+          v-debounce:750ms="updateLicenseGroup"
+          :debounce-events="'keyup'"
+          :disabled="`${!hasPermission(PERMISSIONS.POLICY_MANAGEMENT)}`"
+        />
+      </b-col>
+      <b-col sm="6"> </b-col>
+    </b-row>
+    <b-row class="expanded-row">
+      <b-col sm="12">
+        <b-form-group :label="this.$t('message.licenses')">
+          <div class="list-group">
+            <span v-for="license in licenses" :key="license.uuid">
+              <actionable-list-group-item
+                :value="license.name"
+                :delete-icon="hasPermission(PERMISSIONS.POLICY_MANAGEMENT)"
+                v-on:actionClicked="removeLicense(license)"
+              />
+            </span>
+            <actionable-list-group-item
+              v-permission="PERMISSIONS.POLICY_MANAGEMENT"
+              :add-icon="true"
+              v-on:actionClicked="
+                $root.$emit('bv::show::modal', 'selectLicenseModal')
+              "
+            />
+          </div>
+        </b-form-group>
+        <div style="text-align: right">
+          <b-button
+            v-permission="PERMISSIONS.POLICY_MANAGEMENT"
+            variant="outline-danger"
+            @click="deleteLicenseGroup"
+            >{{ $t('message.delete_license_group') }}</b-button
+          >
+        </div>
+      </b-col>
+    </b-row>
+    <select-license-modal v-on:selection="updateLicenseSelection" />
+  </div>
+</template>
+
+<script>
+import BInputGroupFormInput from '../../../forms/BInputGroupFormInput.vue';
+import permissionsMixin from '../../../mixins/permissionsMixin';
+import ActionableListGroupItem from '../ActionableListGroupItem.vue';
+import SelectLicenseModal from '../../policy/SelectLicenseModal.vue';
+import i18n from '../../../i18n';
+import EventBus from '../../../shared/eventbus';
+
+export default {
+  i18n,
+  mixins: [permissionsMixin],
+  components: {
+    ActionableListGroupItem,
+    BInputGroupFormInput,
+    SelectLicenseModal,
+  },
+  props: {
+    row: {
+      type: Object,
+      required: true,
+    },
+    index: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      licenseGroup: this.row,
+      name: this.row.name,
+      licenses: this.row.licenses,
+    };
+  },
+  methods: {
+    updateLicenseGroup: function () {
+      const url = `${this.$api.BASE_URL}/${this.$api.URL_LICENSE_GROUP}`;
+      this.axios
+        .post(url, {
+          uuid: this.licenseGroup.uuid,
+          name: this.name,
+        })
+        .then((response) => {
+          this.licenseGroup = response.data;
+          EventBus.$emit(
+            'policyManagement:licenseGroups:rowUpdate',
+            this.index,
+            this.licenseGroup,
+          );
+          this.$toastr.s(this.$t('message.updated'));
+        })
+        .catch(() => {
+          this.$toastr.w(this.$t('condition.unsuccessful_action'));
+        });
+    },
+    deleteLicenseGroup: function () {
+      const url = `${this.$api.BASE_URL}/${this.$api.URL_LICENSE_GROUP}/${this.licenseGroup.uuid}`;
+      this.axios
+        .delete(url)
+        .then(() => {
+          EventBus.$emit(
+            'policyManagement:licenseGroups:rowDeleted',
+            this.index,
+          );
+          this.$toastr.s(this.$t('message.license_group_deleted'));
+        })
+        .catch(() => {
+          this.$toastr.w(this.$t('condition.unsuccessful_action'));
+        });
+    },
+    removeLicense: function (license) {
+      const url = `${this.$api.BASE_URL}/${this.$api.URL_LICENSE_GROUP}/${this.licenseGroup.uuid}/license/${license.uuid}`;
+      this.axios
+        .delete(url)
+        .then((response) => {
+          this.syncVariables(response.data);
+          this.$toastr.s(this.$t('message.updated'));
+        })
+        .catch(() => {
+          this.$toastr.w(this.$t('condition.unsuccessful_action'));
+        });
+    },
+    updateLicenseSelection: function (selections) {
+      this.$root.$emit('bv::hide::modal', 'selectLicenseModal');
+      for (let i = 0; i < selections.length; i++) {
+        let selection = selections[i];
+        const url = `${this.$api.BASE_URL}/${this.$api.URL_LICENSE_GROUP}/${this.licenseGroup.uuid}/license/${selection.uuid}`;
+        this.axios
+          .post(url)
+          .then((response) => {
+            this.syncVariables(response.data);
+            this.$toastr.s(this.$t('message.updated'));
+          })
+          .catch((error) => {
+            if (error.response.status === 304) {
+              //this.$toastr.w(this.$t('condition.unsuccessful_action'));
+            } else {
+              this.$toastr.w(this.$t('condition.unsuccessful_action'));
+            }
+          });
+      }
+    },
+    syncVariables: function (licenseGroup) {
+      this.licenseGroup = licenseGroup;
+      this.name = licenseGroup.name;
+      this.licenses = licenseGroup.licenses;
+    },
+  },
+};
+</script>
diff --git a/src/views/components/detail-formatters/PolicyListDetails.vue b/src/views/components/detail-formatters/PolicyListDetails.vue
new file mode 100644
index 000000000..a0bc75311
--- /dev/null
+++ b/src/views/components/detail-formatters/PolicyListDetails.vue
@@ -0,0 +1,364 @@
+<template>
+  <div>
+    <b-row class="expanded-row">
+      <b-col sm="6">
+        <b-input-group-form-input
+          id="identifier"
+          :label="this.$t('message.name')"
+          input-group-size="mb-3"
+          required="true"
+          type="text"
+          v-model="name"
+          lazy="true"
+          autofocus="true"
+          v-debounce:750ms="updatePolicy"
+          :debounce-events="'keyup'"
+        />
+      </b-col>
+      <b-col sm="3">
+        <b-input-group-form-select
+          id="input-repository-type"
+          required="true"
+          v-model="operator"
+          :options="operators"
+          :label="$t('message.operator')"
+        />
+      </b-col>
+      <b-col sm="3">
+        <b-input-group-form-select
+          id="input-repository-type"
+          required="true"
+          v-model="violationState"
+          :options="violationStates"
+          :label="$t('message.violation_state')"
+        />
+      </b-col>
+    </b-row>
+    <b-row class="expanded-row">
+      <b-col sm="12">
+        <b-form-group :label="this.$t('message.conditions')">
+          <div class="list-group">
+            <span
+              v-for="(condition, conditionIndex) in conditions"
+              :key="conditionIndex"
+            >
+              <policy-condition
+                :policy="policy"
+                :condition="condition"
+                v-on:conditionRemoved="
+                  removeCondition(condition, conditionIndex, index)
+                "
+              />
+            </span>
+            <actionable-list-group-item
+              :add-icon="true"
+              v-on:actionClicked="addCondition"
+            />
+          </div>
+        </b-form-group>
+
+        <b-collapse v-model="limitToVisible">
+          <b-form-group
+            id="projectLimitsList"
+            :label="this.$t('admin.limit_to_projects')"
+          >
+            <div class="list-group">
+              <span v-for="project in projects" :key="project.uuid">
+                <actionable-list-group-item
+                  :value="formatLabel(project.name, project.version)"
+                  :delete-icon="true"
+                  v-on:actionClicked="deleteProjectLimiter(project.uuid)"
+                />
+              </span>
+              <actionable-list-group-item
+                :add-icon="true"
+                v-on:actionClicked="
+                  $root.$emit('bv::show::modal', 'selectProjectModal')
+                "
+              />
+            </div>
+          </b-form-group>
+          <div style="margin-bottom: 1.5rem">
+            <b-row>
+              <b-col cols="auto">
+                <b-input-group-form-switch
+                  id="isNotifyChildrenEnabled"
+                  :label="$t('admin.include_children')"
+                  v-model="includeChildren"
+                />
+              </b-col>
+              <b-col>
+                <b-input-group-form-switch
+                  id="isOnlyLatestProjectVersion"
+                  :label="
+                    $t('message.policy_is_only_for_latest_project_version')
+                  "
+                  v-model="onlyLatestProjectVersion"
+                />
+              </b-col>
+            </b-row>
+          </div>
+          <b-form-group
+            id="tagLimitsList"
+            :label="this.$t('admin.limit_to_tags')"
+          >
+            <div class="list-group">
+              <span v-for="tag in tags" :key="tag.name">
+                <actionable-list-group-item
+                  :value="formatLabel(tag.name, tag.id)"
+                  :delete-icon="true"
+                  v-on:actionClicked="deleteTagLimiter(tag.name)"
+                />
+              </span>
+              <actionable-list-group-item
+                :add-icon="true"
+                v-on:actionClicked="
+                  $root.$emit('bv::show::modal', 'selectTagModal')
+                "
+              />
+            </div>
+          </b-form-group>
+        </b-collapse>
+        <div class="d-flex justify-content-end" style="gap: 0.625rem">
+          <b-toggleable-display-button
+            variant="outline-primary"
+            :label="$t('admin.limit_to')"
+            v-model="limitToVisible"
+          />
+          <b-button variant="outline-danger" @click="deletePolicy">{{
+            $t('message.delete_policy')
+          }}</b-button>
+        </div>
+      </b-col>
+    </b-row>
+    <select-project-modal v-on:selection="updateProjectSelection" />
+    <select-tag-modal :policy="policy" v-on:selection="updateTagSelection" />
+  </div>
+</template>
+
+<script>
+import i18n from '../../../i18n';
+import ActionableListGroupItem from '../ActionableListGroupItem.vue';
+import BInputGroupFormInput from '../../../forms/BInputGroupFormInput.vue';
+import BInputGroupFormSelect from '../../../forms/BInputGroupFormSelect.vue';
+import BInputGroupFormSwitch from '../../../forms/BInputGroupFormSwitch.vue';
+import BToggleableDisplayButton from '../BToggleableDisplayButton.vue';
+import SelectProjectModal from '../../portfolio/projects/SelectProjectModal.vue';
+import SelectTagModal from '@/views/portfolio/tags/SelectTagModal';
+import PolicyCondition from '@/views/policy/PolicyCondition';
+import EventBus from '../../../shared/eventbus';
+
+export default {
+  i18n,
+  components: {
+    ActionableListGroupItem,
+    BInputGroupFormInput,
+    BInputGroupFormSelect,
+    BToggleableDisplayButton,
+    SelectProjectModal,
+    SelectTagModal,
+    PolicyCondition,
+    BInputGroupFormSwitch,
+  },
+  props: {
+    row: {
+      type: Object,
+      required: true,
+    },
+    index: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      policy: this.row,
+      name: this.row.name,
+      operator: this.row.operator,
+      violationState: this.row.violationState,
+      conditions: this.row.policyConditions,
+      operators: [
+        { value: 'ANY', text: 'Any' },
+        { value: 'ALL', text: 'All' },
+      ],
+      violationStates: [
+        { value: 'INFO', text: this.$t('violation.info') },
+        { value: 'WARN', text: this.$t('violation.warn') },
+        { value: 'FAIL', text: this.$t('violation.fail') },
+      ],
+      projects: this.row.projects || [],
+      limitToVisible: false,
+      tags: this.row.tags,
+      includeChildren: this.row.includeChildren,
+      onlyLatestProjectVersion: this.row.onlyLatestProjectVersion,
+    };
+  },
+  methods: {
+    formatLabel: function (labelName, labelProperty) {
+      if (labelName && labelProperty) {
+        return labelName + ' ' + labelProperty;
+      } else {
+        return labelName;
+      }
+    },
+    addCondition: function () {
+      if (!this.conditions) {
+        this.conditions = [];
+      }
+      this.conditions.push({});
+    },
+    removeCondition: function (condition, conditionIndex, index) {
+      this.conditions = [];
+      this.refreshPolicy();
+      //this.conditions.splice(conditionIndex, 1);
+    },
+    refreshPolicy: function () {
+      let url = `${this.$api.BASE_URL}/${this.$api.URL_POLICY}/${this.policy.uuid}`;
+      this.axios.get(url).then((response) => {
+        this.policy = response.data;
+        EventBus.$emit(
+          'policyManagement:policies:rowUpdate',
+          this.index,
+          this.policy,
+        );
+      });
+    },
+    updatePolicy: function () {
+      let url = `${this.$api.BASE_URL}/${this.$api.URL_POLICY}`;
+      let refreshTableRow =
+        this.policy.uuid === null || this.name !== this.policy.name;
+      this.axios
+        .post(url, {
+          uuid: this.policy.uuid,
+          name: this.name,
+          operator: this.operator,
+          violationState: this.violationState,
+          includeChildren: this.includeChildren,
+          onlyLatestProjectVersion: this.onlyLatestProjectVersion,
+        })
+        .then((response) => {
+          // prevent that "limit to" details are hidden after updates where table does not need to refresh
+          if (refreshTableRow) {
+            this.policy = response.data;
+            EventBus.$emit(
+              'policyManagement:policies:rowUpdate',
+              this.index,
+              this.policy,
+            );
+          }
+          this.$toastr.s(this.$t('message.updated'));
+        })
+        .catch(() => {
+          this.$toastr.w(this.$t('condition.unsuccessful_action'));
+        });
+    },
+    deletePolicy: function () {
+      let url = `${this.$api.BASE_URL}/${this.$api.URL_POLICY}/${this.policy.uuid}`;
+      this.axios
+        .delete(url)
+        .then(() => {
+          EventBus.$emit('policyManagement:policies:rowDeleted', this.index);
+          this.$toastr.s(this.$t('message.policy_deleted'));
+        })
+        .catch(() => {
+          this.$toastr.w(this.$t('condition.unsuccessful_action'));
+        });
+    },
+    syncVariables: function (policy) {
+      this.policy = policy;
+      this.name = policy.name;
+      this.operator = policy.operator;
+      this.violationState = policy.violationState;
+      this.conditions = policy.policyConditions;
+      this.includeChildren = policy.includeChildren;
+      this.onlyLatestProjectVersion = policy.onlyLatestProjectVersion;
+    },
+    deleteProjectLimiter: function (projectUuid) {
+      let url = `${this.$api.BASE_URL}/${this.$api.URL_POLICY}/${this.policy.uuid}/project/${projectUuid}`;
+      this.axios
+        .delete(url)
+        .then(() => {
+          let p = [];
+          for (let i = 0; i < this.projects.length; i++) {
+            if (this.projects[i].uuid !== projectUuid) {
+              p.push(this.projects[i]);
+            }
+          }
+          this.projects = p;
+          this.$toastr.s(this.$t('message.updated'));
+        })
+        .catch(() => {
+          this.$toastr.w(this.$t('condition.unsuccessful_action'));
+        });
+    },
+    deleteTagLimiter: function (tagName) {
+      let url = `${this.$api.BASE_URL}/${this.$api.URL_TAG}/${encodeURIComponent(tagName)}/policy`;
+      this.axios.delete(url, { data: [this.policy.uuid] }).then(() => {
+        let p = [];
+        for (let i = 0; i < this.tags.length; i++) {
+          if (this.tags[i].name !== tagName) {
+            p.push(this.tags[i]);
+          }
+        }
+        this.tags = p;
+        this.$toastr.s(this.$t('message.updated'));
+      });
+    },
+    updateProjectSelection: function (selections) {
+      this.$root.$emit('bv::hide::modal', 'selectProjectModal');
+      for (let i = 0; i < selections.length; i++) {
+        let selection = selections[i];
+        let url = `${this.$api.BASE_URL}/${this.$api.URL_POLICY}/${this.policy.uuid}/project/${selection.uuid}`;
+        this.axios
+          .post(url)
+          .then(() => {
+            this.projects.push(selection);
+            this.$toastr.s(this.$t('message.updated'));
+          })
+          .catch((error) => {
+            if (error.response.status === 304) {
+              //this.$toastr.w(this.$t('condition.unsuccessful_action'));
+            } else {
+              this.$toastr.w(this.$t('condition.unsuccessful_action'));
+            }
+          });
+      }
+    },
+    updateTagSelection: function (selections) {
+      this.$root.$emit('bv::hide::modal', 'selectTagModal');
+      let promises = [];
+      for (let i = 0; i < selections.length; i++) {
+        let selection = selections[i];
+        let url = `${this.$api.BASE_URL}/${this.$api.URL_TAG}/${encodeURIComponent(selection.name)}/policy`;
+        promises.push(
+          this.axios
+            .post(url, [this.policy.uuid])
+            .then(() => Promise.resolve(selection.name)),
+        );
+      }
+      Promise.all(promises).then((addedTagNames) => {
+        for (const tagName of addedTagNames) {
+          if (!this.tags.some((tag) => tag.name === tagName)) {
+            this.tags.push({ name: tagName });
+          }
+        }
+        this.$toastr.s(this.$t('message.updated'));
+      });
+    },
+  },
+  watch: {
+    operator() {
+      this.updatePolicy();
+    },
+    violationState() {
+      this.updatePolicy();
+    },
+    includeChildren() {
+      this.updatePolicy();
+    },
+    onlyLatestProjectVersion() {
+      this.updatePolicy();
+    },
+  },
+};
+</script>
diff --git a/src/views/components/detail-formatters/ProjectPolicyViolationDetails.vue b/src/views/components/detail-formatters/ProjectPolicyViolationDetails.vue
new file mode 100644
index 000000000..39ef6125a
--- /dev/null
+++ b/src/views/components/detail-formatters/ProjectPolicyViolationDetails.vue
@@ -0,0 +1,315 @@
+<template>
+  <b-row class="expanded-row">
+    <b-col sm="6">
+      <div v-if="violation.policyCondition.subject === 'COORDINATES'">
+        <b-form-group
+          id="fieldset-1"
+          :label="this.$t('message.group')"
+          label-for="input-1"
+        >
+          <b-form-input
+            id="input-1"
+            v-model="violation.component.group"
+            class="form-control disabled"
+            readonly
+            trim
+          />
+        </b-form-group>
+        <b-form-group
+          id="fieldset-2"
+          :label="this.$t('message.name')"
+          label-for="input-2"
+        >
+          <b-form-input
+            id="input-2"
+            v-model="violation.component.name"
+            class="form-control disabled"
+            readonly
+            trim
+          />
+        </b-form-group>
+        <b-form-group
+          id="fieldset-3"
+          :label="this.$t('message.version')"
+          label-for="input-3"
+        >
+          <b-form-input
+            id="input-3"
+            v-model="violation.component.version"
+            class="form-control disabled"
+            readonly
+            trim
+          />
+        </b-form-group>
+      </div>
+
+      <div v-else-if="violation.policyCondition.subject === 'CPE'">
+        <b-form-group
+          v-if="violation.component.cpe"
+          id="fieldset-1"
+          :label="this.$t('message.cpe')"
+          label-for="input-1"
+        >
+          <b-form-input
+            id="input-1"
+            v-model="violation.component.cpe"
+            class="form-control disabled"
+            readonly
+            trim
+          />
+        </b-form-group>
+      </div>
+
+      <div v-else-if="violation.policyCondition.subject === 'PACKAGE_URL'">
+        <b-form-group
+          v-if="violation.component.purl"
+          id="fieldset-1"
+          :label="this.$t('message.purl')"
+          label-for="input-1"
+        >
+          <b-form-input
+            id="input-1"
+            v-model="violation.component.purl"
+            class="form-control disabled"
+            readonly
+            trim
+          />
+        </b-form-group>
+      </div>
+
+      <div v-else-if="violation.policyCondition.subject === 'SWID_TAGID'">
+        <b-form-group
+          v-if="violation.component.swid"
+          id="fieldset-1"
+          :label="this.$t('message.swid')"
+          label-for="input-1"
+        >
+          <b-form-input
+            id="input-1"
+            v-model="violation.component.swid"
+            class="form-control disabled"
+            readonly
+            trim
+          />
+        </b-form-group>
+      </div>
+
+      <div
+        v-else-if="
+          violation.policyCondition.subject === 'LICENSE' ||
+          violation.policyCondition.subject === 'LICENSE_GROUP'
+        "
+      >
+        <b-form-group
+          v-if="violation.component.resolvedLicense"
+          id="fieldset-1"
+          :label="this.$t('message.license')"
+          label-for="input-1"
+        >
+          <b-form-input
+            id="input-1"
+            v-model="violation.component.resolvedLicense.licenseId"
+            class="form-control disabled"
+            readonly
+            trim
+          />
+        </b-form-group>
+      </div>
+
+      <b-form-group
+        id="failedCondition"
+        :label="this.$t('message.condition')"
+        label-for="failedCondition-input"
+      >
+        <b-form-textarea
+          id="failedCondition-input"
+          v-model="conditionString"
+          rows="3"
+          class="form-control disabled"
+          readonly
+          trim
+        />
+      </b-form-group>
+    </b-col>
+    <b-col sm="6">
+      <b-form-group
+        id="fieldset-7"
+        :label="this.$t('message.audit_trail')"
+        label-for="auditTrailField"
+      >
+        <b-form-textarea
+          id="auditTrailField"
+          v-model="auditTrail"
+          rows="7"
+          class="form-control disabled"
+          readonly
+          trim
+        />
+      </b-form-group>
+      <b-form-group
+        id="fieldset-8"
+        v-if="
+          hasPermission(
+            [PERMISSIONS.PROJECT_READ, PERMISSIONS.POLICY_VIOLATION_READ],
+            'or',
+          )
+        "
+        :label="$t('message.comment')"
+        label-for="input-8"
+      >
+        <b-form-textarea
+          id="input-8"
+          v-model="comment"
+          rows="4"
+          class="form-control"
+          trim
+        />
+        <div class="pull-right">
+          <b-button size="sm" variant="outline-primary" @click="addComment"
+            ><span class="fa fa-comment-o"></span
+            >{{ $t('message.add_comment') }}</b-button
+          >
+        </div>
+      </b-form-group>
+      <b-form-group
+        id="fieldset-9"
+        v-if="
+          hasPermission(
+            [PERMISSIONS.PROJECT_READ, PERMISSIONS.POLICY_VIOLATION_READ],
+            'or',
+          )
+        "
+        :label="$t('message.analysis')"
+        label-for="input-9"
+      >
+        <b-input-group id="input-9">
+          <b-form-select
+            v-model="analysisState"
+            :options="analysisChoices"
+            @change="makeAnalysis"
+            style="flex: 0 1 auto; width: auto; margin-right: 2rem"
+          />
+          <bootstrap-toggle
+            v-model="isSuppressed"
+            :options="{
+              on: 'Suppressed',
+              off: 'Suppress',
+              onstyle: 'warning',
+              offstyle: 'outline-disabled',
+            }"
+            :disabled="false"
+          />
+        </b-input-group>
+      </b-form-group>
+    </b-col>
+  </b-row>
+</template>
+
+<script>
+import permissionsMixin from '../../../mixins/permissionsMixin';
+import i18n from '../../../i18n';
+import BootstrapToggle from 'vue-bootstrap-toggle';
+import common from '../../../shared/common';
+
+export default {
+  i18n,
+  props: {
+    row: {
+      type: Object,
+      required: true,
+    },
+    index: {
+      type: Number,
+      required: false,
+    },
+    uuid: {
+      type: String,
+      required: false,
+    },
+  },
+  beforeMount() {
+    this.getAnalysis();
+  },
+  components: {
+    BootstrapToggle,
+  },
+  data() {
+    return {
+      auditTrail: null,
+      comment: null,
+      isSuppressed: null,
+      violation: this.row,
+      analysisChoices: [
+        { value: 'NOT_SET', text: this.$t('message.not_set') },
+        { value: 'APPROVED', text: this.$t('message.approved') },
+        { value: 'REJECTED', text: this.$t('message.rejected') },
+      ],
+      analysisState: null,
+    };
+  },
+  computed: {
+    conditionString() {
+      const { subject, operator, value } = this.violation.policyCondition || {};
+      return `subject == ${subject} && value ${operator} ${value}`;
+    },
+  },
+  watch: {
+    isSuppressed: function (currentValue, oldValue) {
+      if (oldValue != null) {
+        this.callRestEndpoint(this.analysisState, null, currentValue);
+      }
+    },
+  },
+  mixins: [permissionsMixin],
+  methods: {
+    async getAnalysis() {
+      const queryString = `?policyViolation=${this.violation.uuid}&component=${this.violation.component.uuid}`;
+      const url = `${this.$api.BASE_URL}/${this.$api.URL_POLICY_VIOLATION_ANALYSIS}${queryString}`;
+      try {
+        const response = await this.axios.get(url);
+        this.updateAnalysisData(response.data);
+      } catch (error) {
+        this.$toastr.w(this.$t('condition.unsuccessful_action'));
+      }
+    },
+    updateAnalysisData(analysis) {
+      const comments = analysis.analysisComments || [];
+      this.auditTrail = comments
+        .map((comment) => {
+          const commenter = comment.commenter ? `${comment.commenter} - ` : '';
+          const timestamp = common.formatTimestamp(comment.timestamp, true);
+          return `${commenter}${timestamp}\n${comment.comment}\n`;
+        })
+        .join('\n');
+      this.analysisState = analysis.analysisState || null;
+      this.isSuppressed = analysis.isSuppressed ?? false;
+    },
+    makeAnalysis: function () {
+      this.callRestEndpoint(this.analysisState, null, null);
+    },
+    addComment: function () {
+      if (this.comment != null) {
+        this.callRestEndpoint(this.analysisState, this.comment, null);
+      }
+    },
+    callRestEndpoint: function (analysisState, comment, isSuppressed) {
+      const url = `${this.$api.BASE_URL}/${this.$api.URL_POLICY_VIOLATION_ANALYSIS}`;
+      this.axios
+        .put(url, {
+          policyViolation: this.violation.uuid,
+          component: this.violation.component.uuid,
+          analysisState: analysisState,
+          comment: comment,
+          isSuppressed: isSuppressed,
+        })
+        .then((response) => {
+          this.$toastr.s(this.$t('message.updated'));
+          this.updateAnalysisData(response.data);
+        })
+        .catch(() => {
+          this.$toastr.w(this.$t('condition.unsuccessful_action'));
+        });
+    },
+  },
+};
+</script>
diff --git a/src/views/globalAudit/VulnerabilityAudit.vue b/src/views/globalAudit/VulnerabilityAudit.vue
index 8de10af22..95446cab6 100644
--- a/src/views/globalAudit/VulnerabilityAudit.vue
+++ b/src/views/globalAudit/VulnerabilityAudit.vue
@@ -1,37 +1,32 @@
 <template>
-  <div
-    class="animated fadeIn"
-    v-model="tabIndex"
-    v-permission="'VIEW_VULNERABILITY'"
-  >
+  <div class="animated fadeIn">
     <b-tabs
       class="body-bg-color"
       style="border-left: 0; border-right: 0; border-top: 0"
+      v-model="tabIndex"
     >
       <b-tab
         ref="occurrences"
         style="border-left: 0; border-right: 0; border-top: 0"
         @click="routeTo()"
-        :active="tabIndex === 0"
-        :lazy="!visitedTabs.has(0)"
+        lazy
       >
-        <template v-slot:title
-          ><i class="fa fa-shield"></i>
-          {{ $t('message.vulnerabilities_by_occurrence') }}</template
-        >
+        <template v-slot:title>
+          <i class="fa fa-shield"></i>
+          {{ $t('message.vulnerabilities_by_occurrence') }}
+        </template>
         <VulnerabilityAuditByOccurrence />
       </b-tab>
       <b-tab
         ref="grouped"
         style="border-left: 0; border-right: 0; border-top: 0"
         @click="routeTo('grouped')"
-        :active="tabIndex === 1"
-        :lazy="!visitedTabs.has(1)"
+        lazy
       >
-        <template v-slot:title
-          ><i class="fa fa-shield"></i>
-          {{ $t('message.grouped_vulnerabilities') }}</template
-        >
+        <template v-slot:title>
+          <i class="fa fa-shield"></i>
+          {{ $t('message.grouped_vulnerabilities') }}
+        </template>
         <VulnerabilityAuditGroupedByVulnerability />
       </b-tab>
     </b-tabs>
@@ -39,20 +34,24 @@
 </template>
 
 <script>
-import permissionsMixin from '@/mixins/permissionsMixin';
 import VulnerabilityAuditGroupedByVulnerability from '@/views/globalAudit/VulnerabilityAuditGroupedByVulnerability';
 import VulnerabilityAuditByOccurrence from '@/views/globalAudit/VulnerabilityAuditByOccurrence';
 
 export default {
-  mixins: [permissionsMixin],
+  mixins: [],
   components: {
     VulnerabilityAuditByOccurrence,
     VulnerabilityAuditGroupedByVulnerability,
   },
+  data() {
+    return {
+      tabIndex: 0,
+      visitedTabs: new Set(),
+    };
+  },
   methods: {
     routeTo(path) {
       if (path) {
-        this.visitedTabs.add(path === 'grouped' ? 1 : 0);
         if (
           !this.$route.fullPath.toLowerCase().includes('/' + path.toLowerCase())
         ) {
@@ -62,33 +61,24 @@ export default {
         this.$route.fullPath !== '/audit' &&
         this.$route.fullPath !== '/vulnerabilityAudit/'
       ) {
-        this.visitedTabs.add(0);
         this.$router.push({ path: '/vulnerabilityAudit/' });
       }
     },
-    getTabFromRoute: function () {
+    getTabFromRoute() {
       let pattern = new RegExp('/vulnerabilityAudit\\/([^\\/]*)', 'gi');
       let tab = pattern.exec(this.$route.fullPath.toLowerCase());
-      tab && tab[1] && tab[1].toLowerCase() === 'grouped'
-        ? (this.tabIndex = 1)
-        : (this.tabIndex = 0);
+      this.tabIndex =
+        tab && tab[1] && tab[1].toLowerCase() === 'grouped' ? 1 : 0;
       return this.$refs[tab && tab[1] ? tab[1].toLowerCase() : 'occurrences'];
     },
   },
   beforeMount() {
     this.getTabFromRoute();
-    this.visitedTabs.add(this.tabIndex);
   },
   watch: {
     $route(to, from) {
       this.getTabFromRoute().activate();
     },
   },
-  data() {
-    return {
-      tabIndex: 0,
-      visitedTabs: new Set(),
-    };
-  },
 };
 </script>
diff --git a/src/views/pages/Login.vue b/src/views/pages/Login.vue
index 884dd9436..25943a0da 100644
--- a/src/views/pages/Login.vue
+++ b/src/views/pages/Login.vue
@@ -109,9 +109,9 @@ import BValidatedInputGroupFormInput from '../../forms/BValidatedInputGroupFormI
 import InformationalModal from '../modals/InformationalModal';
 import EventBus from '../../shared/eventbus';
 import { getRedirectUrl, getContextPath } from '../../shared/utils';
-const qs = require('querystring');
+import qs from 'querystring';
 import common from '../../shared/common';
-import * as permissions from '../../shared/permissions';
+import { canAccessDashboard } from '../../router/routerGuard';
 
 export default {
   name: 'Login',
@@ -146,76 +146,57 @@ export default {
       showLoginForm: false,
     };
   },
-  beforeMount() {
-    let enabled_url = `${this.$api.BASE_URL}/${this.$api.URL_CONFIG_PROPERTY}/public/general/welcome.message.enabled`;
-    axios
-      .get(enabled_url)
-      .then((response) => {
-        this.isWelcomeMessage = common.toBoolean(response.data.propertyValue);
-      })
-      .then(() => {
-        if (this.isWelcomeMessage) {
-          let message_url = `${this.$api.BASE_URL}/${this.$api.URL_CONFIG_PROPERTY}/public/general/welcome.message.html`;
-          axios.get(message_url).then((response) => {
-            this.welcomeMessage = decodeURIComponent(
-              response.data.propertyValue,
-            );
-          });
-        }
-      });
+  async beforeMount() {
+    try {
+      const enabled_url = `${this.$api.BASE_URL}/${this.$api.URL_CONFIG_PROPERTY}/public/general/welcome.message.enabled`;
+      const enabledResponse = await axios.get(enabled_url);
+      this.isWelcomeMessage = common.toBoolean(
+        enabledResponse.data.propertyValue,
+      );
+
+      if (this.isWelcomeMessage) {
+        const message_url = `${this.$api.BASE_URL}/${this.$api.URL_CONFIG_PROPERTY}/public/general/welcome.message.html`;
+        const messageResponse = await axios.get(message_url);
+        this.welcomeMessage = decodeURIComponent(
+          messageResponse.data.propertyValue,
+        );
+      }
+    } catch (error) {
+      this.isWelcomeMessage = false;
+      this.welcomeMessage = '';
+    }
   },
   methods: {
-    login() {
-      const url = this.$api.BASE_URL + '/' + this.$api.URL_LOGIN;
-      const requestBody = {
-        username: this.input.username,
-        password: this.input.password,
-      };
+    async login() {
+      const url = `${this.$api.BASE_URL}/${this.$api.URL_LOGIN}`;
+      const requestBody = { ...this.input };
       const config = {
-        headers: {
-          'Content-Type': 'application/x-www-form-urlencoded',
-        },
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
       };
       // redirect to url from query param but only if it is save for redirection
       const redirectTo = getRedirectUrl(this.$router);
-      axios
-        .post(url, qs.stringify(requestBody), config)
-        .then((result) => {
-          if (result.status === 200) {
-            // Check for permissions
-            let decodedToken = permissions.decodeToken(result.data);
-            if (
-              permissions.hasPermission(
-                permissions.VIEW_PORTFOLIO,
-                decodedToken,
-              )
-            ) {
-              EventBus.$emit('authenticated', result.data);
-              redirectTo
-                ? this.$router.replace(redirectTo)
-                : this.$router.replace({ name: 'Dashboard' });
-            } else {
-              this.$bvModal.show('modal-informational');
-              this.loginError = this.$t('message.login_permission_required');
-            }
-          }
-        })
-        .catch((err) => {
-          if (err.response.status === 401) {
-            if (err.response.data === this.$api.FORCE_PASSWORD_CHANGE) {
-              this.$router.replace({
-                name: 'PasswordForceChange',
-                query: { redirect: redirectTo },
-              });
-              return;
-            }
-            this.$bvModal.show('modal-informational');
-            this.loginError = this.$t('message.login_unauthorized');
-          } else if (err.response.status === 403) {
-            this.$bvModal.show('modal-informational');
-            this.loginError = this.$t('message.login_forbidden');
+
+      try {
+        const result = await axios.post(url, qs.stringify(requestBody), config);
+        EventBus.$emit('authenticated', result.data);
+        this.handleDashboardRedirect();
+      } catch (err) {
+        const status = err?.response?.status;
+        if (status === 401) {
+          if (err.response.data === this.$api.FORCE_PASSWORD_CHANGE) {
+            this.$router.replace({
+              name: 'PasswordForceChange',
+              query: { redirect: redirectTo },
+            });
+            return;
           }
-        });
+          this.$bvModal.show('modal-informational');
+          this.loginError = this.$t('message.login_unauthorized');
+        } else if (status === 403) {
+          this.$bvModal.show('modal-informational');
+          this.loginError = this.$t('message.login_forbidden');
+        }
+      }
     },
     isOidcAvailableInFrontend() {
       return (
@@ -224,31 +205,22 @@ export default {
         this.oidcUserManager.settings.scope
       );
     },
-    checkOidcAvailability() {
+    async checkOidcAvailability() {
       if (!this.isOidcAvailableInFrontend()) {
         return Promise.resolve(false);
       }
 
-      const url = this.$api.BASE_URL + '/' + this.$api.URL_OIDC_AVAILABLE;
+      const url = `${this.$api.BASE_URL}/${this.$api.URL_OIDC_AVAILABLE}`;
 
+      // Check OIDC availability in backend and return boolean
       return axios
         .get(url)
-        .then((result) => {
-          var oidcAvailableInBackend = false;
-          if (result.status === 200) {
-            oidcAvailableInBackend = result.data === true;
-          }
-          return oidcAvailableInBackend;
-        })
-        .catch((err) => {
-          return Promise.reject(err);
-        });
+        .then((result) => result.data && result.status === 200)
+        .catch((err) => Promise.reject(err));
     },
     oidcLogin() {
       this.oidcUserManager
-        .signinRedirect({
-          state: getRedirectUrl(this.$router),
-        })
+        .signinRedirect({ state: getRedirectUrl(this.$router) })
         .catch((err) => {
           console.log(err);
           this.$toastr.e(this.$t('message.oidc_redirect_failed'));
@@ -263,80 +235,69 @@ export default {
     goToLogin() {
       this.isWelcomeMessage = false;
     },
+    handleDashboardRedirect() {
+      const redirectTo = getRedirectUrl(this.$router);
+      if (canAccessDashboard(this.$router)) {
+        this.$router.replace(redirectTo ?? { name: 'Dashboard' });
+      } else {
+        const dashboardRoute = this.$router.resolve({ name: 'Dashboard' });
+        const meta = dashboardRoute.route.meta || {};
+        const missingPermission =
+          meta.permission ?? meta.permissions ?? meta.complexPermissions;
+        // does not account for inherited permissions
+        this.loginError =
+          this.$t('message.login_permission_required') +
+          (missingPermission ? `: ${missingPermission}` : '');
+        this.$bvModal.show('modal-informational');
+      }
+    },
   },
-  mounted() {
-    this.checkOidcAvailability()
-      .then((oidcAvailable) => {
-        this.oidcAvailable = oidcAvailable;
-        this.showLoginForm = !oidcAvailable;
+  async mounted() {
+    try {
+      const oidcAvailable = await this.checkOidcAvailability();
+      this.oidcAvailable = oidcAvailable;
+      this.showLoginForm = !oidcAvailable;
 
-        if (!oidcAvailable) {
-          return;
-        }
+      if (!oidcAvailable) return;
 
-        this.oidcUserManager.getUser().then((oidcUser) => {
-          // oidcUser will only be set when coming from oidc-callback.html
-          if (oidcUser === null) {
-            return;
-          }
+      const oidcUser = await this.oidcUserManager.getUser();
+      // oidcUser will only be set when coming from oidc-callback.html
+      if (!oidcUser) return;
 
-          // Exchange OAuth2 Access Token for a JWT issued by Dependency-Track
-          const url = this.$api.BASE_URL + '/' + this.$api.URL_USER_OIDC_LOGIN;
-          const requestBody = {
-            accessToken: oidcUser.access_token,
-            idToken: oidcUser.id_token,
-          };
-          const config = {
-            headers: {
-              'Content-Type': 'application/x-www-form-urlencoded',
-            },
-          };
+      // Exchange OAuth2 Access Token for a JWT issued by Dependency-Track
+      const url = `${this.$api.BASE_URL}/${this.$api.URL_USER_OIDC_LOGIN}`;
+      const requestBody = {
+        accessToken: oidcUser.access_token,
+        idToken: oidcUser.id_token,
+      };
+      const config = {
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      };
 
-          this.axios
-            .post(url, qs.stringify(requestBody), config)
-            .then((result) => {
-              if (result.status === 200) {
-                // Check for permissions
-                let decodedToken = permissions.decodeToken(result.data);
-                if (
-                  permissions.hasPermission(
-                    permissions.VIEW_PORTFOLIO,
-                    decodedToken,
-                  )
-                ) {
-                  EventBus.$emit('authenticated', result.data);
-                  // redirect to url from query param but only if it is save for redirection
-                  const redirectTo = getRedirectUrl(this.$router);
-                  redirectTo
-                    ? this.$router.replace(redirectTo)
-                    : this.$router.replace({ name: 'Dashboard' });
-                } else {
-                  this.$bvModal.show('modal-informational');
-                  this.loginError = this.$t(
-                    'message.login_permission_required',
-                  );
-                }
-              }
-            })
-            .catch((err) => {
-              if (err.response.status === 401) {
-                this.$bvModal.show('modal-informational');
-                this.loginError = this.$t('message.login_unauthorized');
-              } else if (err.response.status === 403) {
-                this.$bvModal.show('modal-informational');
-                this.loginError = this.$t('message.login_forbidden');
-              }
-            })
-            .finally(() => {
-              this.oidcUserManager.removeUser();
-            });
-        });
-      })
-      .catch((err) => {
-        // automatic fallback to login form when oidc availability check failed
-        this.showLoginForm = true;
-        this.$toastr.e(this.$t('message.oidc_availability_check_failed'));
-      });
+      try {
+        const result = await this.axios.post(
+          url,
+          qs.stringify(requestBody),
+          config,
+        );
+        EventBus.$emit('authenticated', result.data);
+        this.handleDashboardRedirect();
+      } catch (err) {
+        if (err.response?.status === 401) {
+          this.$bvModal.show('modal-informational');
+          this.loginError = this.$t('message.login_unauthorized');
+        } else if (err.response?.status === 403) {
+          this.$bvModal.show('modal-informational');
+          this.loginError = this.$t('message.login_forbidden');
+        }
+      } finally {
+        this.oidcUserManager.removeUser();
+      }
+    } catch (err) {
+      // automatic fallback to login form when oidc availability check failed
+      this.showLoginForm = true;
+      this.$toastr.e(this.$t('message.oidc_availability_check_failed'));
+    }
   },
 };
 </script>
diff --git a/src/views/policy/LicenseGroupList.vue b/src/views/policy/LicenseGroupList.vue
index dd6b25f68..14adb0f01 100644
--- a/src/views/policy/LicenseGroupList.vue
+++ b/src/views/policy/LicenseGroupList.vue
@@ -1,23 +1,10 @@
 <template>
-  <div
-    class="animated fadeIn"
-    v-permission:or="[
-      'POLICY_MANAGEMENT',
-      'POLICY_MANAGEMENT_CREATE',
-      'POLICY_MANAGEMENT_READ',
-      'POLICY_MANAGEMENT_UPDATE',
-      'POLICY_MANAGEMENT_DELETE',
-    ]"
-  >
+  <div class="animated fadeIn" v-permission="PERMISSIONS.POLICY_MANAGEMENT">
     <div id="licenseGroupsToolbar" class="bs-table-custom-toolbar">
       <b-button
         size="md"
         variant="outline-primary"
         v-b-modal.createLicenseGroupModal
-        v-permission:or="[
-          PERMISSIONS.POLICY_MANAGEMENT,
-          PERMISSIONS.POLICY_MANAGEMENT_CREATE,
-        ]"
       >
         <span class="fa fa-plus"></span>
         {{ $t('message.create_license_group') }}
@@ -39,12 +26,9 @@ import common from '../../shared/common';
 import xssFilters from 'xss-filters';
 import CreateLicenseGroupModal from './CreateLicenseGroupModal';
 import permissionsMixin from '../../mixins/permissionsMixin';
-import i18n from '../../i18n';
-import ActionableListGroupItem from '../components/ActionableListGroupItem';
 import EventBus from '../../shared/eventbus';
 import bootstrapTableMixin from '../../mixins/bootstrapTableMixin';
-import SelectLicenseModal from './SelectLicenseModal';
-import BInputGroupFormInput from '../../forms/BInputGroupFormInput';
+import LicenseGroupListDetails from '../components/detail-formatters/LicenseGroupListDetails.vue';
 
 export default {
   mixins: [permissionsMixin, bootstrapTableMixin],
@@ -114,125 +98,7 @@ export default {
         detailViewByClick: true,
         detailFormatter: (index, row) => {
           return this.vueFormatter({
-            i18n,
-            template: `
-                <div>
-                <b-row class="expanded-row">
-                  <b-col sm="6">
-                    <b-input-group-form-input id="input-license-group-name" :label="$t('message.name')" input-group-size="mb-3"
-                                              required="true" type="text" v-model="name" lazy="true" autofocus="true"
-                                              v-debounce:750ms="updateLicenseGroup" :debounce-events="'keyup'" />
-                  </b-col>
-                  <b-col sm="6">
-                  </b-col>
-                </b-row>
-                <b-row class="expanded-row">
-                  <b-col sm="12">
-                    <b-form-group :label="this.$t('message.licenses')">
-                      <div class="list-group">
-                        <span v-for="license in licenses">
-                          <actionable-list-group-item :value="license.name" v-permission:or="[PERMISSIONS.POLICY_MANAGEMENT, PERMISSIONS.POLICY_MANAGEMENT_UPDATE]" :delete-icon="true" v-on:actionClicked="removeLicense(license)"/>
-                        </span>
-                        <actionable-list-group-item v-permission:or="[PERMISSIONS.POLICY_MANAGEMENT, PERMISSIONS.POLICY_MANAGEMENT_UPDATE]" :add-icon="true" v-on:actionClicked="$root.$emit('bv::show::modal', 'selectLicenseModal')"/>
-                      </div>
-                    </b-form-group>
-                    <div style="text-align:right">
-                       <b-button v-permission:or="['POLICY_MANAGEMENT', 'POLICY_MANAGEMENT_DELETE']" variant="outline-danger" @click="deleteLicenseGroup">{{ $t('message.delete_license_group') }}</b-button>
-                    </div>
-                  </b-col>
-                </b-row>
-                  <select-license-modal v-on:selection="updateLicenseSelection" />
-                </div>
-              `,
-            mixins: [permissionsMixin],
-            components: {
-              ActionableListGroupItem,
-              BInputGroupFormInput,
-              SelectLicenseModal,
-            },
-            data() {
-              return {
-                licenseGroup: row,
-                name: row.name,
-                licenses: row.licenses,
-              };
-            },
-            methods: {
-              updateLicenseGroup: function () {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_LICENSE_GROUP}`;
-                this.axios
-                  .post(url, {
-                    uuid: this.licenseGroup.uuid,
-                    name: this.name,
-                  })
-                  .then((response) => {
-                    this.licenseGroup = response.data;
-                    EventBus.$emit(
-                      'policyManagement:licenseGroups:rowUpdate',
-                      index,
-                      this.licenseGroup,
-                    );
-                    this.$toastr.s(this.$t('message.updated'));
-                  })
-                  .catch((error) => {
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              deleteLicenseGroup: function () {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_LICENSE_GROUP}/${this.licenseGroup.uuid}`;
-                this.axios
-                  .delete(url)
-                  .then((response) => {
-                    EventBus.$emit(
-                      'policyManagement:licenseGroups:rowDeleted',
-                      index,
-                    );
-                    this.$toastr.s(this.$t('message.license_group_deleted'));
-                  })
-                  .catch((error) => {
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              removeLicense: function (license) {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_LICENSE_GROUP}/${this.licenseGroup.uuid}/license/${license.uuid}`;
-                this.axios
-                  .delete(url)
-                  .then((response) => {
-                    this.syncVariables(response.data);
-                    this.$toastr.s(this.$t('message.updated'));
-                  })
-                  .catch((error) => {
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              updateLicenseSelection: function (selections) {
-                this.$root.$emit('bv::hide::modal', 'selectLicenseModal');
-                for (let i = 0; i < selections.length; i++) {
-                  let selection = selections[i];
-                  let url = `${this.$api.BASE_URL}/${this.$api.URL_LICENSE_GROUP}/${this.licenseGroup.uuid}/license/${selection.uuid}`;
-                  this.axios
-                    .post(url)
-                    .then((response) => {
-                      this.syncVariables(response.data);
-                      this.$toastr.s(this.$t('message.updated'));
-                    })
-                    .catch((error) => {
-                      if (error.response.status === 304) {
-                        //this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                      } else {
-                        this.$toastr.w(
-                          this.$t('condition.unsuccessful_action'),
-                        );
-                      }
-                    });
-                }
-              },
-              syncVariables: function (licenseGroup) {
-                this.licenseGroup = licenseGroup;
-                this.name = licenseGroup.name;
-                this.licenses = licenseGroup.licenses;
-              },
-            },
+            render: () => <LicenseGroupListDetails row={row} index={index} />,
           });
         },
         onExpandRow: this.vueFormatterInit,
diff --git a/src/views/policy/PolicyCondition.vue b/src/views/policy/PolicyCondition.vue
index 1c35bc41d..75f3c4ed2 100644
--- a/src/views/policy/PolicyCondition.vue
+++ b/src/views/policy/PolicyCondition.vue
@@ -1,6 +1,5 @@
 <template>
   <actionable-list-group-item
-    v-permission:or="['POLICY_MANAGEMENT', 'POLICY_MANAGEMENT_UPDATE']"
     :delete-icon="true"
     v-on:actionClicked="removeCondition()"
   >
@@ -176,11 +175,13 @@
 <script>
 import BInputGroupFormInput from '../../forms/BInputGroupFormInput';
 import BInputGroupFormSelect from '../../forms/BInputGroupFormSelect';
+import permissionsMixin from '../../mixins/permissionsMixin';
 import common from '../../shared/common';
 import ActionableListGroupItem from '../components/ActionableListGroupItem';
 import MonacoEditor from '@/views/components/MonacoEditor.vue';
 
 export default {
+  mixins: [permissionsMixin],
   props: {
     policy: Object,
     condition: Object,
@@ -287,45 +288,19 @@ export default {
     };
   },
   computed: {
-    isSubjectSelectable: function () {
-      switch (this.subject) {
-        case 'AGE':
-          return false;
-        case 'ANALYZER':
-          return true;
-        case 'BOM':
-          return true;
-        case 'SEVERITY':
-          return true;
-        case 'COORDINATES':
-          return false;
-        case 'LICENSE':
-          return true;
-        case 'LICENSE_GROUP':
-          return true;
-        case 'PACKAGE_URL':
-          return false;
-        case 'CPE':
-          return false;
-        case 'SWID_TAGID':
-          return false;
-        case 'VERSION':
-          return false;
-        case 'COMPONENT_HASH':
-          return false;
-        case 'CWE':
-          return false;
-        case 'VULNERABILITY_ID':
-          return false;
-        case 'VERSION_DISTANCE':
-          return false;
-        case 'EPSS':
-          return false;
-        case 'EXPRESSION':
-          return false;
-        default:
-          return false;
-      }
+    isSubjectSelectable() {
+      // Subjects that are selectable (dropdown)
+      const selectableSubjects = [
+        'ANALYZER',
+        'BOM',
+        'SEVERITY',
+        'LICENSE',
+        'LICENSE_GROUP',
+      ];
+      return selectableSubjects.includes(this.subject);
+    },
+    canEditPolicy() {
+      return this.hasPermission(this.PERMISSIONS.POLICY_MANAGEMENT);
     },
   },
   beforeMount() {
@@ -345,64 +320,41 @@ export default {
   },
   methods: {
     subjectChanged: function () {
+      const subjectOpsMap = {
+        AGE: this.numericOperators,
+        ANALYZER: this.objectOperators,
+        BOM: this.objectOperators,
+        SEVERITY: this.objectOperators,
+        COORDINATES: this.regexOperators,
+        LICENSE: this.objectOperators,
+        LICENSE_GROUP: this.objectOperators,
+        PACKAGE_URL: this.regexOperators,
+        CPE: this.regexOperators,
+        SWID_TAGID: this.regexOperators,
+        VERSION: this.numericOperators,
+        COMPONENT_HASH: this.hashAlgorithms,
+        CWE: this.listOperators,
+        VULNERABILITY_ID: this.objectOperators,
+        VERSION_DISTANCE: this.numericOperators,
+        EPSS: this.numericOperators,
+        EXPRESSION: this.regexOperators,
+      };
+
+      this.operators = subjectOpsMap[this.subject] || [];
+
+      // Handle possibleValues population for specific subjects
       switch (this.subject) {
-        case 'AGE':
-          this.operators = this.numericOperators;
-          break;
-        case 'ANALYZER':
-          this.operators = this.objectOperators;
-          break;
-        case 'BOM':
-          this.operators = this.objectOperators;
-          break;
         case 'SEVERITY':
-          this.operators = this.objectOperators;
           this.populateSeverity();
           break;
-        case 'COORDINATES':
-          this.operators = this.regexOperators;
-          break;
         case 'LICENSE':
-          this.operators = this.objectOperators;
           this.retrieveLicenses();
           break;
         case 'LICENSE_GROUP':
-          this.operators = this.objectOperators;
           this.retrieveLicenseGroups();
           break;
-        case 'PACKAGE_URL':
-          this.operators = this.regexOperators;
-          break;
-        case 'CPE':
-          this.operators = this.regexOperators;
-          break;
-        case 'SWID_TAGID':
-          this.operators = this.regexOperators;
-          break;
-        case 'VERSION':
-          this.operators = this.numericOperators;
-          break;
-        case 'COMPONENT_HASH':
-          this.operators = this.hashAlgorithms;
-          break;
-        case 'CWE':
-          this.operators = this.listOperators;
-          break;
-        case 'VULNERABILITY_ID':
-          this.operators = this.objectOperators;
-          break;
-        case 'VERSION_DISTANCE':
-          this.operators = this.numericOperators;
-          break;
-        case 'EPSS':
-          this.operators = this.numericOperators;
-          break;
-        case 'EXPRESSION':
-          this.operators = this.regexOperators;
-          break;
-        default:
-          this.operators = [];
       }
+
       this.saveCondition();
     },
     createDynamicValue: function () {
@@ -528,14 +480,14 @@ export default {
             this.violationType = response.data.violationType;
             this.$toastr.s(this.$t('message.updated'));
           })
-          .catch((error) => {
+          .catch(() => {
             this.$toastr.w(this.$t('condition.unsuccessful_action'));
           });
       }
     },
     removeCondition: function () {
       if (this.uuid) {
-        let url = `${this.$api.BASE_URL}/${this.$api.URL_POLICY}/condition/${this.uuid}`;
+        const url = `${this.$api.BASE_URL}/${this.$api.URL_POLICY}/condition/${this.uuid}`;
         this.axios
           .delete(url)
           .then((response) => {
@@ -547,7 +499,7 @@ export default {
             this.$toastr.s(this.$t('message.condition_deleted'));
             this.$emit('conditionRemoved');
           })
-          .catch((error) => {
+          .catch(() => {
             this.$toastr.w(this.$t('condition.unsuccessful_action'));
           });
       } else {
diff --git a/src/views/policy/PolicyList.vue b/src/views/policy/PolicyList.vue
index a0a1088d4..5e8f4cc34 100644
--- a/src/views/policy/PolicyList.vue
+++ b/src/views/policy/PolicyList.vue
@@ -1,24 +1,7 @@
 <template>
-  <div
-    class="animated fadeIn"
-    v-permission:or="[
-      'POLICY_MANAGEMENT',
-      'POLICY_MANAGEMENT_CREATE',
-      'POLICY_MANAGEMENT_READ',
-      'POLICY_MANAGEMENT_UPDATE',
-      'POLICY_MANAGEMENT_DELETE',
-    ]"
-  >
+  <div class="animated fadeIn" v-permission="PERMISSIONS.POLICY_MANAGEMENT">
     <div id="policiesToolbar" class="bs-table-custom-toolbar">
-      <b-button
-        size="md"
-        variant="outline-primary"
-        v-b-modal.createPolicyModal
-        v-permission:or="[
-          PERMISSIONS.POLICY_MANAGEMENT,
-          PERMISSIONS.POLICY_MANAGEMENT_CREATE,
-        ]"
-      >
+      <b-button size="md" variant="outline-primary" v-b-modal.createPolicyModal>
         <span class="fa fa-plus"></span> {{ $t('message.create_policy') }}
       </b-button>
     </div>
@@ -39,17 +22,10 @@ import xssFilters from 'xss-filters';
 import CreatePolicyModal from './CreatePolicyModal';
 import permissionsMixin from '../../mixins/permissionsMixin';
 import routerMixin from '../../mixins/routerMixin';
-import i18n from '../../i18n';
-import ActionableListGroupItem from '../components/ActionableListGroupItem';
-import BInputGroupFormInput from '../../forms/BInputGroupFormInput';
 import EventBus from '../../shared/eventbus';
 import bootstrapTableMixin from '../../mixins/bootstrapTableMixin';
-import BInputGroupFormSelect from '../../forms/BInputGroupFormSelect';
-import PolicyCondition from './PolicyCondition';
-import BToggleableDisplayButton from '@/views/components/BToggleableDisplayButton';
-import SelectProjectModal from '@/views/portfolio/projects/SelectProjectModal';
-import SelectTagModal from '@/views/portfolio/tags/SelectTagModal';
 import BInputGroupFormSwitch from '@/forms/BInputGroupFormSwitch.vue';
+import PolicyListDetails from '../components/detail-formatters/PolicyListDetails.vue';
 
 export default {
   mixins: [permissionsMixin, bootstrapTableMixin, routerMixin],
@@ -126,289 +102,7 @@ export default {
         detailViewByClick: true,
         detailFormatter: (index, row) => {
           return this.vueFormatter({
-            i18n,
-            template: `
-                <div>
-                <b-row class="expanded-row">
-                  <b-col sm="6">
-                    <b-input-group-form-input id="identifier" :label="this.$t('message.name')" input-group-size="mb-3"
-                        required="true" type="text" v-model="name" lazy="true" autofocus="true"
-                        v-debounce:750ms="updatePolicy" :debounce-events="'keyup'" />
-                  </b-col>
-                  <b-col sm="3">
-                    <b-input-group-form-select id="input-repository-type" required="true"
-                               v-model="operator" :options="operators"
-                               :label="$t('message.operator')" />
-                  </b-col>
-                  <b-col sm="3">
-                    <b-input-group-form-select id="input-repository-type" required="true"
-                               v-model="violationState" :options="violationStates"
-                               :label="$t('message.violation_state')" />
-                  </b-col>
-                </b-row>
-                <b-row class="expanded-row">
-                  <b-col sm="12">
-                    <b-form-group :label="this.$t('message.conditions')">
-                      <div class="list-group">
-                        <span v-for="(condition, conditionIndex) in conditions">
-                          <policy-condition :policy="policy" :condition="condition" v-on:conditionRemoved="removeCondition(condition, conditionIndex, index)" />
-                        </span>
-                        <actionable-list-group-item v-permission:or="[PERMISSIONS.POLICY_MANAGEMENT, PERMISSIONS.POLICY_MANAGEMENT_UPDATE]" :add-icon="true" v-on:actionClicked="addCondition" />
-                      </div>
-                    </b-form-group>
-                    <b-form-group v-if="limitToVisible === true" id="projectLimitsList" :label="this.$t('admin.limit_to_projects')">
-                      <div class="list-group">
-                        <span v-for="project in projects">
-                          <actionable-list-group-item :value="formatLabel(project.name, project.version)" :delete-icon="true" v-on:actionClicked="deleteProjectLimiter(project.uuid)"/>
-                        </span>
-                        <actionable-list-group-item v-permission:or="[PERMISSIONS.POLICY_MANAGEMENT, PERMISSIONS.POLICY_MANAGEMENT_UPDATE]" :add-icon="true" v-on:actionClicked="$root.$emit('bv::show::modal', 'selectProjectModal')"/>
-                      </div>
-                    </b-form-group>
-                    <div v-if="limitToVisible === true" style="margin-bottom: 1.5rem">
-                      <b-row>
-                        <b-col cols="auto">
-                          <b-input-group-form-switch
-                            id="isNotifyChildrenEnabled"
-                            :label="$t('admin.include_children')"
-                            v-model="includeChildren"
-                          />
-                        </b-col>
-                        <b-col>
-                          <b-input-group-form-switch
-                            id="isOnlyLatestProjectVersion"
-                            :label="$t('message.policy_is_only_for_latest_project_version')"
-                            v-model="onlyLatestProjectVersion"
-                          />
-                        </b-col>
-                      </b-row>
-                    </div>
-                    <b-form-group v-if="limitToVisible === true" id="tagLimitsList" :label="this.$t('admin.limit_to_tags')">
-                      <div class="list-group">
-                        <span v-for="tag in tags">
-                          <actionable-list-group-item :value="formatLabel(tag.name, tag.id)" :delete-icon="true" v-on:actionClicked="deleteTagLimiter(tag.name)"/>
-                        </span>
-                        <actionable-list-group-item v-permission:or="[PERMISSIONS.POLICY_MANAGEMENT, PERMISSIONS.POLICY_MANAGEMENT_UPDATE]" :add-icon="true" v-on:actionClicked="$root.$emit('bv::show::modal', 'selectTagModal')"/>
-                      </div>
-                    </b-form-group>
-                    <div style="text-align:right">
-                      <b-toggleable-display-button variant="outline-primary" :label="$t('admin.limit_to')"
-                          v-permission="PERMISSIONS.VIEW_PORTFOLIO" v-on:toggle="limitToVisible = !limitToVisible" />
-                       <b-button v-permission:or="['POLICY_MANAGEMENT', 'POLICY_MANAGEMENT_DELETE']" variant="outline-danger" @click="deletePolicy">{{ $t('message.delete_policy') }}</b-button>
-                    </div>
-                  </b-col>
-                </b-row>
-                <select-project-modal v-on:selection="updateProjectSelection"/>
-                <select-tag-modal :policy="policy" v-on:selection="updateTagSelection"/>
-              </div>
-              `,
-            mixins: [permissionsMixin],
-            components: {
-              ActionableListGroupItem,
-              BInputGroupFormInput,
-              BInputGroupFormSelect,
-              BToggleableDisplayButton,
-              SelectProjectModal,
-              SelectTagModal,
-              PolicyCondition,
-              BInputGroupFormSwitch,
-            },
-            data() {
-              return {
-                policy: row,
-                name: row.name,
-                operator: row.operator,
-                violationState: row.violationState,
-                conditions: row.policyConditions,
-                operators: [
-                  { value: 'ANY', text: 'Any' },
-                  { value: 'ALL', text: 'All' },
-                ],
-                violationStates: [
-                  { value: 'INFO', text: this.$t('violation.info') },
-                  { value: 'WARN', text: this.$t('violation.warn') },
-                  { value: 'FAIL', text: this.$t('violation.fail') },
-                ],
-                projects: row.projects || [],
-                limitToVisible: false,
-                tags: row.tags,
-                includeChildren: row.includeChildren,
-                onlyLatestProjectVersion: row.onlyLatestProjectVersion,
-              };
-            },
-            methods: {
-              formatLabel: function (labelName, labelProperty) {
-                if (labelName && labelProperty) {
-                  return labelName + ' ' + labelProperty;
-                } else {
-                  return labelName;
-                }
-              },
-              addCondition: function () {
-                if (!this.conditions) {
-                  this.conditions = [];
-                }
-                this.conditions.push({});
-              },
-              removeCondition: function (condition, conditionIndex, index) {
-                this.conditions = [];
-                this.refreshPolicy();
-                //this.conditions.splice(conditionIndex, 1);
-              },
-              refreshPolicy: function () {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_POLICY}/${this.policy.uuid}`;
-                this.axios.get(url).then((response) => {
-                  this.policy = response.data;
-                  EventBus.$emit(
-                    'policyManagement:policies:rowUpdate',
-                    index,
-                    this.policy,
-                  );
-                });
-              },
-              updatePolicy: function () {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_POLICY}`;
-                let refreshTableRow =
-                  this.policy.uuid === null || this.name !== this.policy.name;
-                this.axios
-                  .post(url, {
-                    uuid: this.policy.uuid,
-                    name: this.name,
-                    operator: this.operator,
-                    violationState: this.violationState,
-                    includeChildren: this.includeChildren,
-                    onlyLatestProjectVersion: this.onlyLatestProjectVersion,
-                  })
-                  .then((response) => {
-                    // prevent that "limit to" details are hidden after updates where table does not need to refresh
-                    if (refreshTableRow) {
-                      this.policy = response.data;
-                      EventBus.$emit(
-                        'policyManagement:policies:rowUpdate',
-                        index,
-                        this.policy,
-                      );
-                    }
-                    this.$toastr.s(this.$t('message.updated'));
-                  })
-                  .catch((error) => {
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              deletePolicy: function () {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_POLICY}/${this.policy.uuid}`;
-                this.axios
-                  .delete(url)
-                  .then((response) => {
-                    EventBus.$emit(
-                      'policyManagement:policies:rowDeleted',
-                      index,
-                    );
-                    this.$toastr.s(this.$t('message.policy_deleted'));
-                  })
-                  .catch((error) => {
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              syncVariables: function (policy) {
-                this.policy = policy;
-                this.name = policy.name;
-                this.operator = policy.operator;
-                this.violationState = policy.violationState;
-                this.conditions = policy.policyConditions;
-                this.includeChildren = policy.includeChildren;
-                this.onlyLatestProjectVersion = policy.onlyLatestProjectVersion;
-              },
-              deleteProjectLimiter: function (projectUuid) {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_POLICY}/${this.policy.uuid}/project/${projectUuid}`;
-                this.axios
-                  .delete(url)
-                  .then((response) => {
-                    let p = [];
-                    for (let i = 0; i < this.projects.length; i++) {
-                      if (this.projects[i].uuid !== projectUuid) {
-                        p.push(this.projects[i]);
-                      }
-                    }
-                    this.projects = p;
-                    this.$toastr.s(this.$t('message.updated'));
-                  })
-                  .catch((error) => {
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              deleteTagLimiter: function (tagName) {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_TAG}/${encodeURIComponent(tagName)}/policy`;
-                this.axios
-                  .delete(url, { data: [this.policy.uuid] })
-                  .then(() => {
-                    let p = [];
-                    for (let i = 0; i < this.tags.length; i++) {
-                      if (this.tags[i].name !== tagName) {
-                        p.push(this.tags[i]);
-                      }
-                    }
-                    this.tags = p;
-                    this.$toastr.s(this.$t('message.updated'));
-                  });
-              },
-              updateProjectSelection: function (selections) {
-                this.$root.$emit('bv::hide::modal', 'selectProjectModal');
-                for (let i = 0; i < selections.length; i++) {
-                  let selection = selections[i];
-                  let url = `${this.$api.BASE_URL}/${this.$api.URL_POLICY}/${this.policy.uuid}/project/${selection.uuid}`;
-                  this.axios
-                    .post(url)
-                    .then((response) => {
-                      this.projects.push(selection);
-                      this.$toastr.s(this.$t('message.updated'));
-                    })
-                    .catch((error) => {
-                      if (error.response.status === 304) {
-                        //this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                      } else {
-                        this.$toastr.w(
-                          this.$t('condition.unsuccessful_action'),
-                        );
-                      }
-                    });
-                }
-              },
-              updateTagSelection: function (selections) {
-                this.$root.$emit('bv::hide::modal', 'selectTagModal');
-                let promises = [];
-                for (let i = 0; i < selections.length; i++) {
-                  let selection = selections[i];
-                  let url = `${this.$api.BASE_URL}/${this.$api.URL_TAG}/${encodeURIComponent(selection.name)}/policy`;
-                  promises.push(
-                    this.axios
-                      .post(url, [this.policy.uuid])
-                      .then(() => Promise.resolve(selection.name)),
-                  );
-                }
-                Promise.all(promises).then((addedTagNames) => {
-                  for (const tagName of addedTagNames) {
-                    if (!this.tags.some((tag) => tag.name === tagName)) {
-                      this.tags.push({ name: tagName });
-                    }
-                  }
-                  this.$toastr.s(this.$t('message.updated'));
-                });
-              },
-            },
-            watch: {
-              operator() {
-                this.updatePolicy();
-              },
-              violationState() {
-                this.updatePolicy();
-              },
-              includeChildren() {
-                this.updatePolicy();
-              },
-              onlyLatestProjectVersion() {
-                this.updatePolicy();
-              },
-            },
+            render: () => <PolicyListDetails row={row} index={index} />,
           });
         },
         onExpandRow: this.vueFormatterInit,
diff --git a/src/views/policy/PolicyManagement.vue b/src/views/policy/PolicyManagement.vue
index 536ceff4e..74352c86e 100644
--- a/src/views/policy/PolicyManagement.vue
+++ b/src/views/policy/PolicyManagement.vue
@@ -1,14 +1,5 @@
 <template>
-  <div
-    class="animated fadeIn"
-    v-permission:or="[
-      PERMISSIONS.POLICY_MANAGEMENT,
-      PERMISSIONS.POLICY_MANAGEMENT_CREATE,
-      PERMISSIONS.POLICY_MANAGEMENT_READ,
-      PERMISSIONS.POLICY_MANAGEMENT_UPDATE,
-      PERMISSIONS.POLICY_MANAGEMENT_DELETE,
-    ]"
-  >
+  <div class="animated fadeIn" v-permission="PERMISSIONS.POLICY_MANAGEMENT">
     <b-tabs
       class="body-bg-color"
       style="border-left: 0; border-right: 0; border-top: 0"
@@ -58,10 +49,10 @@
 </template>
 
 <script>
-import permissionsMixin from '../../mixins/permissionsMixin';
 import PolicyList from './PolicyList';
 import LicenseGroupList from './LicenseGroupList';
 import VulnerabilityPolicyList from './VulnerabilityPolicyList';
+import permissionsMixin from '../../mixins/permissionsMixin';
 
 export default {
   mixins: [permissionsMixin],
diff --git a/src/views/policy/VulnerabilityPolicyList.vue b/src/views/policy/VulnerabilityPolicyList.vue
index 15b71e118..662c75515 100644
--- a/src/views/policy/VulnerabilityPolicyList.vue
+++ b/src/views/policy/VulnerabilityPolicyList.vue
@@ -1,14 +1,5 @@
 <template>
-  <div
-    class="animated fadeIn"
-    v-permission:or="[
-      'POLICY_MANAGEMENT',
-      'POLICY_MANAGEMENT_CREATE',
-      'POLICY_MANAGEMENT_READ',
-      'POLICY_MANAGEMENT_UPDATE',
-      'POLICY_MANAGEMENT_DELETE',
-    ]"
-  >
+  <div class="animated fadeIn" v-permission="PERMISSIONS.POLICY_MANAGEMENT">
     <b-alert
       v-if="bundleSyncStatus === 'FAILED'"
       variant="danger"
@@ -28,10 +19,7 @@
         {{ $t('message.policy_bundle_info') }}
       </b-button>
       <b-button
-        v-permission:or="[
-          PERMISSIONS.POLICY_MANAGEMENT,
-          PERMISSIONS.POLICY_MANAGEMENT_UPDATE,
-        ]"
+        v-permission="PERMISSIONS.POLICY_MANAGEMENT"
         variant="outline-primary"
         @click="sync"
         :disabled="bundleSyncStatus === 'PENDING'"
@@ -49,7 +37,7 @@
       @on-load-success="tableLoaded"
     >
     </bootstrap-table>
-    <policy-bundle-info-modal :bundleInfo="cloneDeep(bundleInfo)" />
+    <policy-bundle-info-modal :bundleInfo="cloneDeep(bundleInfo || {})" />
   </div>
 </template>
 
@@ -152,7 +140,7 @@ export default {
         })
         .then((workflowState) => {
           this.getBundleInfo();
-          if (workflowState.status === 'COMPLETED') {
+          if (workflowState?.status === 'COMPLETED') {
             this.refreshTable();
           }
           return workflowState;
diff --git a/src/views/portfolio/components/ComponentSearch.vue b/src/views/portfolio/components/ComponentSearch.vue
index da58b7208..867bef270 100644
--- a/src/views/portfolio/components/ComponentSearch.vue
+++ b/src/views/portfolio/components/ComponentSearch.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="componentSearch animated fadeIn" v-permission="'VIEW_PORTFOLIO'">
+  <div
+    class="componentSearch animated fadeIn"
+    v-permission="PERMISSIONS.PROJECT_READ"
+  >
     <portfolio-widget-row :fetch="true" />
     <div id="componentSearchToolbar">
       <b-row>
diff --git a/src/views/portfolio/licenses/License.vue b/src/views/portfolio/licenses/License.vue
index a1bfefcb8..839956cf4 100644
--- a/src/views/portfolio/licenses/License.vue
+++ b/src/views/portfolio/licenses/License.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="animated fadeIn" v-permission="PERMISSIONS.VIEW_PORTFOLIO">
+  <div class="animated fadeIn">
     <b-tabs
       class="body-bg-color"
       style="border-left: 0; border-right: 0; border-top: 0"
@@ -92,22 +92,27 @@
           {{ license.standardLicenseHeader }}
         </div>
       </b-tab>
+      <template #tabs-end>
+        <li
+          role="presentation"
+          class="nav-item action-group"
+          style="margin-left: auto"
+        >
+          <b-button
+            v-if="license.isCustomLicense"
+            variant="outline-danger"
+            @click="removeCustomLicense"
+            v-permission="PERMISSIONS.SYSTEM_CONFIGURATION"
+          >
+            {{ $t('message.delete') }}
+          </b-button>
+        </li>
+      </template>
     </b-tabs>
-    <b-button
-      v-if="license.isCustomLicense"
-      variant="outline-danger"
-      @click="removeCustomLicense"
-      v-permission:or="[
-        PERMISSIONS.SYSTEM_CONFIGURATION,
-        PERMISSIONS.SYSTEM_CONFIGURATION_DELETE,
-      ]"
-      >{{ $t('message.delete') }}</b-button
-    >
   </div>
 </template>
 
 <script>
-import common from '../../../shared/common';
 import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities';
 import EventBus from '../../../shared/eventbus';
 import permissionsMixin from '../../../mixins/permissionsMixin';
diff --git a/src/views/portfolio/licenses/LicenseList.vue b/src/views/portfolio/licenses/LicenseList.vue
index af64a9ff8..9235b0d7f 100644
--- a/src/views/portfolio/licenses/LicenseList.vue
+++ b/src/views/portfolio/licenses/LicenseList.vue
@@ -1,15 +1,12 @@
 <template>
-  <div class="animated fadeIn" v-permission="PERMISSIONS.VIEW_PORTFOLIO">
+  <div class="animated fadeIn">
     <portfolio-widget-row :fetch="true" />
     <div id="licensesToolbar" class="bs-table-custom-toolbar">
       <b-button
         size="md"
         variant="outline-primary"
         v-b-modal.licenseAddLicenseModal
-        v-permission:or="[
-          PERMISSIONS.SYSTEM_CONFIGURATION,
-          PERMISSIONS.SYSTEM_CONFIGURATION_CREATE,
-        ]"
+        v-permission="PERMISSIONS.SYSTEM_CONFIGURATION"
       >
         <span class="fa fa-plus"></span> {{ $t('message.add_license') }}
       </b-button>
diff --git a/src/views/portfolio/projects/Component.vue b/src/views/portfolio/projects/Component.vue
index e27f0e2aa..c6eed66c5 100644
--- a/src/views/portfolio/projects/Component.vue
+++ b/src/views/portfolio/projects/Component.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="animated fadeIn" v-permission="PERMISSIONS.VIEW_PORTFOLIO">
+  <div class="animated fadeIn" v-permission="PERMISSIONS.PROJECT_READ">
     <b-card :no-body="true" footer-class="px-3 py-2 card-footer-action">
       <b-card-body class="p-3 clearfix">
         <b-row>
@@ -159,7 +159,7 @@
       </b-tab>
     </b-tabs>
     <component-details-modal
-      :component="cloneDeep(component)"
+      :component="component"
       v-on:componentUpdated="syncComponentFields"
     />
     <component-properties-modal :uuid="this.uuid" />
@@ -169,7 +169,6 @@
 
 <script>
 import common from '../../../shared/common';
-import { cloneDeep } from 'lodash-es';
 import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities';
 import VueEasyPieChart from 'vue-easy-pie-chart';
 import PortfolioWidgetRow from '../../dashboard/PortfolioWidgetRow';
@@ -199,7 +198,7 @@ export default {
   title: '',
   computed: {
     projectLabel() {
-      if (this.component.hasOwnProperty('project')) {
+      if (Object.prototype.hasOwnProperty.call(this.component, 'project')) {
         if (this.component.project.name && this.component.project.version) {
           return (
             this.component.project.name + ' ▸ ' + this.component.project.version
@@ -208,6 +207,7 @@ export default {
           return this.component.project.name;
         }
       }
+      return null;
     },
     componentLabel() {
       let label = this.component.name;
@@ -245,9 +245,6 @@ export default {
     };
   },
   methods: {
-    cloneDeep: function (component) {
-      return cloneDeep(component);
-    },
     getStyle: function (style) {
       return getStyle(style);
     },
diff --git a/src/views/portfolio/projects/ComponentDashboard.vue b/src/views/portfolio/projects/ComponentDashboard.vue
index 47de6a2b1..9e88fbce5 100644
--- a/src/views/portfolio/projects/ComponentDashboard.vue
+++ b/src/views/portfolio/projects/ComponentDashboard.vue
@@ -9,10 +9,7 @@
           <div class="small text-muted">
             {{ $t('message.last_measurement') }}: {{ lastMeasurement
             }}<b-link
-              v-permission:or="[
-                'PORTFOLIO_MANAGEMENT',
-                'PORTFOLIO_MANAGEMENT_READ',
-              ]"
+              v-permission="PERMISSIONS.PORTFOLIO_MANAGEMENT"
               class="font-weight-bold"
               style="margin-left: 6px"
               v-on:click="refreshMetrics"
@@ -163,9 +160,11 @@ import ChartComponentVulnerabilities from '../../dashboard/ChartComponentVulnera
 import ChartPortfolioVulnerabilities from '../../dashboard/ChartPortfolioVulnerabilities';
 import ChartPolicyViolationsState from '@/views/dashboard/ChartPolicyViolationsState';
 import ChartPolicyViolationBreakdown from '@/views/dashboard/ChartPolicyViolationBreakdown';
+import permissionsMixin from '../../../mixins/permissionsMixin';
 
 export default {
   name: 'ComponentDashboard',
+  mixins: [permissionsMixin],
   components: {
     ChartComponentVulnerabilities,
     ChartPortfolioVulnerabilities,
diff --git a/src/views/portfolio/projects/ComponentDetailsModal.vue b/src/views/portfolio/projects/ComponentDetailsModal.vue
index 941f8f75f..537079bea 100644
--- a/src/views/portfolio/projects/ComponentDetailsModal.vue
+++ b/src/views/portfolio/projects/ComponentDetailsModal.vue
@@ -17,7 +17,7 @@
             id="component-name-input"
             input-group-size="mb-3"
             type="text"
-            v-model="component.name"
+            v-model="localComponent.name"
             lazy="true"
             required="true"
             feedback="true"
@@ -25,18 +25,13 @@
             :label="$t('message.component_name')"
             :tooltip="this.$t('message.component_name_desc')"
             :feedback-text="$t('message.required_component_name')"
-            :readonly="
-              this.isNotPermitted([
-                PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-              ])
-            "
+            :readonly="!canEditComponent"
           />
           <b-input-group-form-input
             id="component-version-input"
             input-group-size="mb-3"
             type="text"
-            v-model="component.version"
+            v-model="localComponent.version"
             lazy="true"
             required="true"
             feedback="true"
@@ -44,101 +39,71 @@
             :label="$t('message.version')"
             :tooltip="this.$t('message.component_version_desc')"
             :feedback-text="$t('message.required_component_version')"
-            :readonly="
-              this.isNotPermitted([
-                PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-              ])
-            "
+            :readonly="!canEditComponent"
           />
           <b-input-group-form-input
             id="component-group-input"
             input-group-size="mb-3"
             type="text"
-            v-model="component.group"
+            v-model="localComponent.group"
             required="false"
             :label="$t('message.component_namespace_group_vendor')"
             :tooltip="this.$t('message.component_group_desc')"
-            :readonly="
-              this.isNotPermitted([
-                PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-              ])
-            "
+            :readonly="!canEditComponent"
           />
           {{ $t('message.component_classification') }}
           <b-badge
-            :variant="component.isInternal ? 'tab-total' : 'tab-info'"
+            :variant="localComponent.isInternal ? 'tab-total' : 'tab-info'"
             v-b-tooltip.hover
             :title="$t('message.component_classification_desc')"
-            >{{ component.isInternal ? 'INTERNAL' : 'EXTERNAL' }}</b-badge
+            >{{ localComponent.isInternal ? 'INTERNAL' : 'EXTERNAL' }}</b-badge
           >
           <p></p>
           <b-input-group-form-input
             id="component-author-input"
             input-group-size="mb-3"
             type="text"
-            v-model="component.author"
+            v-model="localComponent.author"
             required="false"
             :label="$t('message.component_author')"
             :tooltip="this.$t('message.component_author_desc')"
-            :readonly="
-              this.isNotPermitted([
-                PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-              ])
-            "
+            :readonly="!canEditComponent"
           />
           <b-input-group-form-input
             id="component-purl-input"
             input-group-size="mb-3"
             type="text"
-            v-model="component.purl"
+            v-model="localComponent.purl"
             required="false"
             :label="$t('message.package_url_full')"
             :tooltip="this.$t('message.component_package_url_desc')"
-            :readonly="
-              this.isNotPermitted([
-                PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-              ])
-            "
+            :readonly="!canEditComponent"
           />
           <b-input-group-form-input
             id="component-cpe-input"
             input-group-size="mb-3"
             type="text"
-            v-model="component.cpe"
+            v-model="localComponent.cpe"
             required="false"
             :label="$t('message.cpe_full')"
             :tooltip="$t('message.component_cpe_desc')"
-            :readonly="
-              this.isNotPermitted([
-                PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-              ])
-            "
+            :readonly="!canEditComponent"
           />
           <b-input-group-form-input
             id="component-swidTagId-input"
             input-group-size="mb-3"
             type="text"
-            v-model="component.swidTagId"
+            v-model="localComponent.swidTagId"
             required="false"
             :label="$t('message.swid_tagid')"
             :tooltip="$t('message.component_swid_tagid_desc')"
-            :readonly="
-              this.isNotPermitted([
-                PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-              ])
-            "
+            :readonly="!canEditComponent"
           />
           <b-input-group-form-input
             id="component-uuid"
             input-group-size="mb-3"
             type="text"
-            v-model="component.uuid"
+            v-model="localComponent.uuid"
             lazy="false"
             required="false"
             feedback="false"
@@ -159,31 +124,21 @@
           <b-input-group-form-select
             id="component-classifier-input"
             required="true"
-            v-model="component.classifier"
+            v-model="localComponent.classifier"
             :options="availableClassifiers"
             :label="$t('message.classifier')"
             :tooltip="$t('message.component_classifier_desc')"
-            :disabled="
-              this.isNotPermitted([
-                PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-              ])
-            "
+            :disabled="!canEditComponent"
           />
           <b-input-group-form-input
             id="component-filename-input"
             input-group-size="mb-3"
             type="text"
-            v-model="component.filename"
+            v-model="localComponent.filename"
             required="false"
             :label="$t('message.filename')"
             :tooltip="$t('message.component_filename_desc')"
-            :readonly="
-              this.isNotPermitted([
-                PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-              ])
-            "
+            :readonly="!canEditComponent"
           />
           <b-form-group
             id="component-description-form-group"
@@ -192,14 +147,9 @@
           >
             <b-form-textarea
               id="component-description-description"
-              v-model="component.description"
+              v-model="localComponent.description"
               rows="3"
-              :readonly="
-                this.isNotPermitted([
-                  PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                  PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-                ])
-              "
+              :readonly="!canEditComponent"
             />
           </b-form-group>
         </b-card>
@@ -217,42 +167,27 @@
             :options="selectableLicenses"
             :label="$t('message.license')"
             :tooltip="$t('message.component_spdx_license_desc')"
-            :disabled="
-              this.isNotPermitted([
-                PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-              ])
-            "
+            :disabled="!canEditComponent"
           />
           <b-input-group-form-input
             id="component-license-expression"
             input-group-size="mb-3"
             type="text"
-            v-model="component.licenseExpression"
+            v-model="localComponent.licenseExpression"
             required="false"
             :label="$t('message.license_expression')"
             :tooltip="$t('message.component_license_expression_desc')"
-            :readonly="
-              this.isNotPermitted([
-                PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-              ])
-            "
+            :readonly="!canEditComponent"
           />
           <b-input-group-form-input
             id="component-license-url-input"
             input-group-size="mb-3"
             type="text"
-            v-model="component.licenseUrl"
+            v-model="localComponent.licenseUrl"
             required="false"
             :label="$t('message.license_url')"
             :tooltip="$t('message.component_license_url_desc')"
-            :readonly="
-              this.isNotPermitted([
-                PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-              ])
-            "
+            :readonly="!canEditComponent"
           />
           <b-form-group
             id="component-copyright-form-group"
@@ -261,14 +196,9 @@
           >
             <b-form-textarea
               id="component-description-description"
-              v-model="component.copyright"
+              v-model="localComponent.copyright"
               rows="3"
-              :readonly="
-                this.isNotPermitted([
-                  PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                  PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-                ])
-              "
+              :readonly="!canEditComponent"
             />
           </b-form-group>
         </b-card>
@@ -282,98 +212,68 @@
             id="component-md5-input"
             input-group-size="mb-3"
             type="text"
-            v-model="component.md5"
+            v-model="localComponent.md5"
             required="false"
             :label="$t('hashes.md5')"
             :tooltip="$t('message.component_hash_desc')"
-            :readonly="
-              this.isNotPermitted([
-                PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-              ])
-            "
+            :readonly="!canEditComponent"
           />
           <b-input-group-form-input
             id="component-sha1-input"
             input-group-size="mb-3"
             type="text"
-            v-model="component.sha1"
+            v-model="localComponent.sha1"
             required="false"
             :label="$t('hashes.sha_1')"
             :tooltip="$t('message.component_hash_desc')"
-            :readonly="
-              this.isNotPermitted([
-                PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-              ])
-            "
+            :readonly="!canEditComponent"
           />
           <b-input-group-form-input
             id="component-sha256-input"
             input-group-size="mb-3"
             type="text"
-            v-model="component.sha256"
+            v-model="localComponent.sha256"
             required="false"
             :label="$t('hashes.sha_256')"
             :tooltip="$t('message.component_hash_desc')"
-            :readonly="
-              this.isNotPermitted([
-                PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-              ])
-            "
+            :readonly="!canEditComponent"
           />
           <b-input-group-form-input
             id="component-sha512-input"
             input-group-size="mb-3"
             type="text"
-            v-model="component.sha512"
+            v-model="localComponent.sha512"
             required="false"
             :label="$t('hashes.sha_512')"
             :tooltip="$t('message.component_hash_desc')"
-            :readonly="
-              this.isNotPermitted([
-                PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-              ])
-            "
+            :readonly="!canEditComponent"
           />
           <b-input-group-form-input
             id="component-sha3256-input"
             input-group-size="mb-3"
             type="text"
-            v-model="component.sha3_256"
+            v-model="localComponent.sha3_256"
             required="false"
             :label="$t('hashes.sha3_256')"
             :tooltip="$t('message.component_hash_desc')"
-            :readonly="
-              this.isNotPermitted([
-                PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-              ])
-            "
+            :readonly="!canEditComponent"
           />
           <b-input-group-form-input
             id="component-sha3512-input"
             input-group-size="mb-3"
             type="text"
-            v-model="component.sha3_512"
+            v-model="localComponent.sha3_512"
             required="false"
             :label="$t('hashes.sha3_512')"
             :tooltip="$t('message.component_hash_desc')"
-            :readonly="
-              this.isNotPermitted([
-                PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-              ])
-            "
+            :readonly="!canEditComponent"
           />
         </b-card>
       </b-tab>
       <b-tab
         class="body-bg-color"
         style="border: 0; padding: 0"
-        v-if="component.supplier"
+        v-if="localComponent.supplier"
       >
         <template v-slot:title
           ><i class="fa fa-building-o"></i>
@@ -384,7 +284,7 @@
             id="component-supplier-name-input"
             input-group-size="mb-3"
             type="text"
-            v-model="component.supplier.name"
+            v-model="localComponent.supplier.name"
             required="false"
             readonly
             :label="$t('message.supplier_name')"
@@ -399,7 +299,7 @@
               id="supplierUrlsTable"
               ref="supplierUrlsTable"
               :columns="supplierUrlsTableColumns"
-              :data="component.supplier.urls"
+              :data="localComponent.supplier.urls"
               :options="supplierUrlsTableOptions"
             >
             </bootstrap-table>
@@ -413,7 +313,7 @@
               id="supplierContactsTable"
               ref="supplierContactsTable"
               :columns="supplierContactsTableColumns"
-              :data="component.supplier.contacts"
+              :data="localComponent.supplier.contacts"
               :options="supplierContactsTableOptions"
             >
             </bootstrap-table>
@@ -429,7 +329,7 @@
           <bootstrap-table
             ref="referencesTable"
             :columns="referencesTableColumns"
-            :data="component.externalReferences"
+            :data="localComponent.externalReferences"
             :options="referencesTableOptions"
           >
           </bootstrap-table>
@@ -447,14 +347,9 @@
           >
             <b-form-textarea
               id="component-notes-description"
-              v-model="component.notes"
+              v-model="localComponent.notes"
               rows="3"
-              :readonly="
-                this.isNotPermitted([
-                  PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                  PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-                ])
-              "
+              :readonly="!canEditComponent"
             />
           </b-form-group>
         </b-card>
@@ -465,20 +360,14 @@
         size="md"
         variant="outline-danger"
         @click="deleteComponent()"
-        v-permission:or="[
-          PERMISSIONS.PORTFOLIO_MANAGEMENT,
-          PERMISSIONS.PORTFOLIO_MANAGEMENT_DELETE,
-        ]"
+        v-permission="PERMISSIONS.PORTFOLIO_MANAGEMENT"
         >{{ $t('message.delete') }}</b-button
       >
       <b-button
         size="md"
         variant="outline-primary"
         v-b-modal.componentPropertiesModal
-        v-permission:or="[
-          PERMISSIONS.VIEW_PORTFOLIO,
-          PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-        ]"
+        v-permission="PERMISSIONS.PROJECT_READ"
         >{{ $t('message.properties') }}</b-button
       >
       <b-button size="md" variant="secondary" @click="cancel()">{{
@@ -488,10 +377,7 @@
         size="md"
         variant="primary"
         @click="updateComponent()"
-        v-permission:or="[
-          PERMISSIONS.PORTFOLIO_MANAGEMENT,
-          PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-        ]"
+        v-permission="PERMISSIONS.PORTFOLIO_MANAGEMENT"
         >{{ $t('message.update') }}</b-button
       >
     </template>
@@ -505,6 +391,7 @@ import ComponentPropertiesModal from './ComponentPropertiesModal.vue';
 import permissionsMixin from '../../../mixins/permissionsMixin';
 import xssFilters from 'xss-filters';
 import common from '@/shared/common';
+import { cloneDeep } from 'lodash-es';
 
 export default {
   name: 'ComponentDetailsModal',
@@ -517,6 +404,11 @@ export default {
   props: {
     component: Object,
   },
+  computed: {
+    canEditComponent() {
+      return this.hasPermission(this.PERMISSIONS.PORTFOLIO_MANAGEMENT);
+    },
+  },
   data() {
     return {
       availableClassifiers: [
@@ -621,7 +513,7 @@ export default {
           field: 'url',
           sortable: false,
           formatter(value, row, index) {
-            let url = xssFilters.uriInUnQuotedAttr(
+            const url = xssFilters.uriInUnQuotedAttr(
               common.valueWithDefault(value, ''),
             );
             return `<a href="${url}">${xssFilters.inHTMLData(
@@ -664,8 +556,17 @@ export default {
           return res;
         },
       },
+      localComponent: {},
     };
   },
+  watch: {
+    component: {
+      handler(newVal) {
+        this.localComponent = cloneDeep(newVal);
+      },
+      immediate: true,
+    },
+  },
   beforeMount() {
     this.retrieveLicenses();
   },
@@ -675,33 +576,9 @@ export default {
   methods: {
     updateComponent: function () {
       this.$root.$emit('bv::hide::modal', 'componentDetailsModal');
-      let url = `${this.$api.BASE_URL}/${this.$api.URL_COMPONENT}`;
+      const url = `${this.$api.BASE_URL}/${this.$api.URL_COMPONENT}`;
       this.axios
-        .post(url, {
-          uuid: this.component.uuid,
-          supplier: this.component.supplier,
-          name: this.component.name,
-          version: this.component.version,
-          group: this.component.group,
-          author: this.component.author,
-          description: this.component.description,
-          license: this.selectedLicense,
-          licenseExpression: this.component.licenseExpression,
-          licenseUrl: this.component.licenseUrl,
-          filename: this.component.filename,
-          classifier: this.component.classifier,
-          purl: this.component.purl,
-          cpe: this.component.cpe,
-          swidTagId: this.component.swidTagId,
-          copyright: this.component.copyright,
-          md5: this.component.md5,
-          sha1: this.component.sha1,
-          sha256: this.component.sha256,
-          sha512: this.component.sha512,
-          sha3_256: this.component.sha3_256,
-          sha3_512: this.component.sha3_512,
-          notes: this.component.notes,
-        })
+        .post(url, { ...this.localComponent, license: this.selectedLicense })
         .then((response) => {
           this.$emit('componentUpdated', response.data);
           this.$toastr.s(this.$t('message.component_updated'));
@@ -712,7 +589,7 @@ export default {
     },
     deleteComponent: function () {
       this.$root.$emit('bv::hide::modal', 'componentDetailsModal');
-      let url =
+      const url =
         `${this.$api.BASE_URL}/${this.$api.URL_COMPONENT}/` +
         this.component.uuid;
       this.axios
@@ -728,7 +605,7 @@ export default {
         });
     },
     retrieveLicenses: function () {
-      let url = `${this.$api.BASE_URL}/${this.$api.URL_LICENSE_CONCISE}`;
+      const url = `${this.$api.BASE_URL}/${this.$api.URL_LICENSE_CONCISE}`;
       this.axios
         .get(url)
         .then((response) => {
diff --git a/src/views/portfolio/projects/FindingAudit.vue b/src/views/portfolio/projects/FindingAudit.vue
index 61ffc1e57..01c90079b 100644
--- a/src/views/portfolio/projects/FindingAudit.vue
+++ b/src/views/portfolio/projects/FindingAudit.vue
@@ -130,12 +130,7 @@
       </b-form-group>
       <b-form-group
         id="fieldset-8"
-        v-if="
-          this.isPermitted([
-            this.PERMISSIONS.VULNERABILITY_ANALYSIS,
-            this.PERMISSIONS.VULNERABILITY_ANALYSIS_UPDATE,
-          ])
-        "
+        v-permission="[PERMISSIONS.PROJECT_READ, PERMISSIONS.FINDING_UPDATE]"
         :label="this.$t('message.comment')"
         label-for="input-8"
       >
@@ -155,12 +150,7 @@
       </b-form-group>
       <b-form-group
         id="fieldset-9"
-        v-if="
-          this.isPermitted([
-            this.PERMISSIONS.VULNERABILITY_ANALYSIS,
-            this.PERMISSIONS.VULNERABILITY_ANALYSIS_UPDATE,
-          ])
-        "
+        v-permission="[PERMISSIONS.PROJECT_READ, PERMISSIONS.FINDING_UPDATE]"
         :label="this.$t('message.analysis')"
         label-for="input-9"
       >
@@ -186,12 +176,7 @@
         </b-input-group>
       </b-form-group>
       <b-row
-        v-if="
-          this.isPermitted([
-            this.PERMISSIONS.VULNERABILITY_ANALYSIS,
-            this.PERMISSIONS.VULNERABILITY_ANALYSIS_UPDATE,
-          ])
-        "
+        v-permission="[PERMISSIONS.PROJECT_READ, PERMISSIONS.FINDING_UPDATE]"
       >
         <b-col sm="6">
           <b-form-group
@@ -234,12 +219,7 @@
       </b-row>
       <b-form-group
         id="fieldset-12"
-        v-if="
-          this.isPermitted([
-            this.PERMISSIONS.VULNERABILITY_ANALYSIS,
-            this.PERMISSIONS.VULNERABILITY_ANALYSIS_UPDATE,
-          ])
-        "
+        v-permission="PERMISSIONS.PROJECT_READ"
         :label="this.$t('message.details')"
         label-for="analysisDetailsField"
       >
@@ -248,19 +228,14 @@
           v-model="analysisDetails"
           rows="7"
           class="form-control"
-          :disabled="
-            analysisState === null ||
-            !this.isPermitted([
-              this.PERMISSIONS.VULNERABILITY_ANALYSIS,
-              this.PERMISSIONS.VULNERABILITY_ANALYSIS_UPDATE,
-            ])
-          "
+          :disabled="analysisState === null"
+          v-permission.disabled="PERMISSIONS.FINDING_UPDATE"
           v-b-tooltip.hover
           :title="this.$t('message.analysis_details_tooltip')"
         />
         <div class="pull-right">
           <b-button
-            v-if="this.isPermitted(this.PERMISSIONS.VULNERABILITY_ANALYSIS)"
+            v-permission="PERMISSIONS.FINDING_UPDATE"
             :disabled="analysisState === null"
             size="sm"
             variant="outline-primary"
diff --git a/src/views/portfolio/projects/Project.vue b/src/views/portfolio/projects/Project.vue
index 6fd0871dd..3a342f083 100644
--- a/src/views/portfolio/projects/Project.vue
+++ b/src/views/portfolio/projects/Project.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="animated fadeIn" v-permission="PERMISSIONS.VIEW_PORTFOLIO">
+  <div class="animated fadeIn">
     <b-card :no-body="true" footer-class="px-3 py-2 card-footer-action">
       <b-card-body class="p-3 clearfix">
         <b-row>
@@ -39,7 +39,10 @@
                         ></i
                       ></a>
                       <ul class="dropdown-menu">
-                        <span v-for="projectVersion in activeProjectVersions">
+                        <span
+                          v-for="projectVersion in activeProjectVersions"
+                          :key="projectVersion.uuid"
+                        >
                           <b-dropdown-item
                             :to="{
                               name: 'Project',
@@ -55,6 +58,7 @@
                         >
                           <span
                             v-for="projectVersion in inactiveProjectVersions"
+                            :key="projectVersion.uuid"
                           >
                             <b-dropdown-item
                               :to="{
@@ -89,7 +93,7 @@
             </div>
             <div class="text-muted font-xs">
               <span class="text-lowercase font-weight-bold">
-                <span v-for="tag in project.tags">
+                <span v-for="tag in project.tags" :key="tag.name">
                   <b-badge
                     :to="{ name: 'Projects', query: { tag: tag.name } }"
                     variant="tag"
@@ -261,7 +265,9 @@
       </b-tab>
       <b-tab
         ref="findings"
-        v-if="isPermitted(PERMISSIONS.VIEW_VULNERABILITY)"
+        v-if="
+          hasPermission([PERMISSIONS.PROJECT_READ, PERMISSIONS.FINDING_READ])
+        "
         @click="routeTo('findings')"
       >
         <template v-slot:title>
@@ -270,14 +276,14 @@
             variant="tab-total"
             v-b-tooltip.hover
             :title="$t('message.total_findings_excluding_aliases')"
-            >{{ totalFindings }}</b-badge
-          >
+            >{{ totalFindings }}
+          </b-badge>
           <b-badge
             variant="tab-info"
             v-b-tooltip.hover
             :title="$t('message.total_findings_including_aliases')"
-            >{{ totalFindingsIncludingAliases }}</b-badge
-          >
+            >{{ totalFindingsIncludingAliases }}
+          </b-badge>
         </template>
         <project-findings
           :key="this.uuid"
@@ -287,7 +293,9 @@
       </b-tab>
       <b-tab
         ref="epss"
-        v-if="isPermitted(PERMISSIONS.VIEW_VULNERABILITY)"
+        v-if="
+          hasPermission([PERMISSIONS.PROJECT_READ, PERMISSIONS.FINDING_READ])
+        "
         @click="routeTo('epss')"
       >
         <template v-slot:title
@@ -302,7 +310,12 @@
       </b-tab>
       <b-tab
         ref="policyviolations"
-        v-if="isPermitted(PERMISSIONS.VIEW_POLICY_VIOLATION)"
+        v-if="
+          hasPermission([
+            PERMISSIONS.PROJECT_READ,
+            PERMISSIONS.POLICY_VIOLATION_READ,
+          ])
+        "
         @click="routeTo('policyViolations')"
       >
         <template v-slot:title
@@ -340,7 +353,7 @@
       </b-tab>
     </b-tabs>
     <project-details-modal
-      :project="cloneDeep(project)"
+      :project="project"
       :uuid="this.uuid"
       v-on:projectUpdated="syncProjectFields"
     />
@@ -352,7 +365,6 @@
 
 <script>
 import common from '../../../shared/common';
-import { cloneDeep } from 'lodash-es';
 import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities';
 import VueEasyPieChart from 'vue-easy-pie-chart';
 import ProjectComponents from './ProjectComponents';
@@ -438,9 +450,6 @@ export default {
     };
   },
   methods: {
-    cloneDeep: function (component) {
-      return cloneDeep(component);
-    },
     getStyle: function (style) {
       return getStyle(style);
     },
@@ -450,7 +459,7 @@ export default {
       this.$title = this.projectLabel;
     },
     initialize: function () {
-      let projectUrl = `${this.$api.BASE_URL}/${this.$api.URL_PROJECT}/${this.uuid}`;
+      const projectUrl = `${this.$api.BASE_URL}/${this.$api.URL_PROJECT}/${this.uuid}`;
       this.axios
         .get(projectUrl)
         .catch((error) => {
diff --git a/src/views/portfolio/projects/ProjectAddComponentModal.vue b/src/views/portfolio/projects/ProjectAddComponentModal.vue
index 46a711593..85a672a86 100644
--- a/src/views/portfolio/projects/ProjectAddComponentModal.vue
+++ b/src/views/portfolio/projects/ProjectAddComponentModal.vue
@@ -241,16 +241,9 @@
       <b-button size="md" variant="secondary" @click="cancel()">{{
         $t('message.close')
       }}</b-button>
-      <b-button
-        size="md"
-        variant="primary"
-        @click="createComponent()"
-        v-permission:or="[
-          PERMISSIONS.PORTFOLIO_MANAGEMENT,
-          PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-        ]"
-        >{{ $t('message.create') }}</b-button
-      >
+      <b-button size="md" variant="primary" @click="createComponent()">{{
+        $t('message.create')
+      }}</b-button>
     </template>
   </b-modal>
 </template>
@@ -306,38 +299,21 @@ export default {
   methods: {
     createComponent: function () {
       this.$root.$emit('bv::hide::modal', 'projectAddComponentModal');
-      let url = `${this.$api.BASE_URL}/${this.$api.URL_COMPONENT}/project/${this.uuid}`;
+      const url = `${this.$api.BASE_URL}/${this.$api.URL_COMPONENT}/project/${this.uuid}`;
+      const payload = {
+        ...this.component,
+        license: this.selectedLicense,
+      };
       this.axios
-        .put(url, {
-          name: this.component.name,
-          version: this.component.version,
-          group: this.component.group,
-          description: this.component.description,
-          license: this.selectedLicense,
-          licenseExpression: this.component.licenseExpression,
-          licenseUrl: this.component.licenseUrl,
-          filename: this.component.filename,
-          classifier: this.component.classifier,
-          purl: this.component.purl,
-          cpe: this.component.cpe,
-          swidTagId: this.component.swidTagId,
-          copyright: this.component.copyright,
-          md5: this.component.md5,
-          sha1: this.component.sha1,
-          sha256: this.component.sha256,
-          sha512: this.component.sha512,
-          sha3_256: this.component.sha3_256,
-          sha3_512: this.component.sha3_512,
-          notes: this.component.notes,
-        })
-        .then((response) => {
+        .put(url, payload)
+        .then(() => {
           this.$emit('refreshTable');
           this.$toastr.s(this.$t('message.component_created'));
+          this.resetValues();
         })
-        .catch((error) => {
+        .catch(() => {
           this.$toastr.w(this.$t('condition.unsuccessful_action'));
         });
-      this.resetValues();
     },
     resetValues: function () {
       this.component = {
@@ -364,19 +340,17 @@ export default {
       };
     },
     retrieveLicenses: function () {
-      let url = `${this.$api.BASE_URL}/${this.$api.URL_LICENSE_CONCISE}`;
+      const url = `${this.$api.BASE_URL}/${this.$api.URL_LICENSE_CONCISE}`;
       this.axios
         .get(url)
         .then((response) => {
-          // Allow for license to be un-selected.
-          this.selectableLicenses.push({ value: '', text: '' });
-          for (let i = 0; i < response.data.length; i++) {
-            let license = response.data[i];
-            this.selectableLicenses.push({
+          this.selectableLicenses = [
+            { value: '', text: '' }, // Allow for license to be un-selected.
+            ...response.data.map((license) => ({
               value: license.licenseId,
               text: license.name,
-            });
-          }
+            })),
+          ];
         })
         .catch((error) => {
           this.$toastr.w(this.$t('condition.unsuccessful_action'));
diff --git a/src/views/portfolio/projects/ProjectComponents.vue b/src/views/portfolio/projects/ProjectComponents.vue
index b6ba96924..40f3363f9 100644
--- a/src/views/portfolio/projects/ProjectComponents.vue
+++ b/src/views/portfolio/projects/ProjectComponents.vue
@@ -6,10 +6,7 @@
           size="md"
           variant="outline-primary"
           v-b-modal.projectAddComponentModal
-          v-permission:or="[
-            PERMISSIONS.PORTFOLIO_MANAGEMENT,
-            PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-          ]"
+          v-permission="PERMISSIONS.PORTFOLIO_MANAGEMENT"
         >
           <span class="fa fa-plus"></span> {{ $t('message.add_component') }}
         </b-button>
@@ -17,10 +14,7 @@
           size="md"
           variant="outline-primary"
           @click="removeDependencies"
-          v-permission:or="[
-            PERMISSIONS.PORTFOLIO_MANAGEMENT,
-            PERMISSIONS.PORTFOLIO_MANAGEMENT_DELETE,
-          ]"
+          v-permission="PERMISSIONS.PORTFOLIO_MANAGEMENT"
         >
           <span class="fa fa-minus"></span> {{ $t('message.remove_component') }}
         </b-button>
@@ -29,24 +23,24 @@
           size="md"
           variant="outline-primary"
           v-b-modal.projectUploadBomModal
-          v-permission="PERMISSIONS.BOM_UPLOAD"
+          v-permission="PERMISSIONS.BOM_CREATE"
         >
           <span class="fa fa-upload"></span> {{ $t('message.upload_bom') }}
         </b-button>
         <b-tooltip target="upload-button" triggers="hover focus">{{
           $t('message.upload_bom_tooltip')
         }}</b-tooltip>
-        <b-dropdown
-          variant="outline-primary"
-          v-permission="PERMISSIONS.VIEW_PORTFOLIO"
-        >
+        <b-dropdown variant="outline-primary">
           <template #button-content>
             <span class="fa fa-download"></span>
             {{ $t('message.download_bom') }}
           </template>
-          <b-dropdown-item @click="downloadBom('inventory')" href="#">{{
-            $t('message.inventory')
-          }}</b-dropdown-item>
+          <b-dropdown-item
+            v-permission:or="[PERMISSIONS.PROJECT_READ, PERMISSIONS.BOM_READ]"
+            @click="downloadBom('inventory')"
+            href="#"
+            >{{ $t('message.inventory') }}</b-dropdown-item
+          >
           <b-dropdown-item
             @click="downloadBom('withVulnerabilities')"
             href="#"
@@ -55,7 +49,7 @@
         </b-dropdown>
         <b-dropdown
           variant="outline-primary"
-          v-permission="PERMISSIONS.VIEW_PORTFOLIO"
+          v-permission="PERMISSIONS.PROJECT_READ"
         >
           <template #button-content>
             <span class="fa fa-download"></span>
diff --git a/src/views/portfolio/projects/ProjectDashboard.vue b/src/views/portfolio/projects/ProjectDashboard.vue
index 1a8f5802a..80ca227cc 100644
--- a/src/views/portfolio/projects/ProjectDashboard.vue
+++ b/src/views/portfolio/projects/ProjectDashboard.vue
@@ -16,10 +16,7 @@
               <td>
                 {{ lastMeasurement }}
                 <b-link
-                  v-permission:or="[
-                    'PORTFOLIO_MANAGEMENT',
-                    'PORTFOLIO_MANAGEMENT_READ',
-                  ]"
+                  v-permission="PERMISSIONS.PORTFOLIO_MANAGEMENT"
                   class="font-weight-bold"
                   style="margin-left: 6px"
                   v-on:click="refreshMetrics"
@@ -214,6 +211,7 @@ import ChartComponentVulnerabilities from '../../dashboard/ChartComponentVulnera
 import ChartPortfolioVulnerabilities from '../../dashboard/ChartPortfolioVulnerabilities';
 import ChartPolicyViolationsState from '@/views/dashboard/ChartPolicyViolationsState';
 import ChartPolicyViolationBreakdown from '@/views/dashboard/ChartPolicyViolationBreakdown';
+import permissionsMixin from '../../../mixins/permissionsMixin';
 
 export default {
   name: 'project-dashboard',
@@ -225,6 +223,7 @@ export default {
     ChartPortfolioVulnerabilities,
     Callout,
   },
+  mixins: [permissionsMixin],
   props: {
     uuid: String,
     project: Object,
@@ -294,13 +293,13 @@ export default {
       );
     },
     refreshMetrics() {
-      let url = `${this.$api.BASE_URL}/${this.$api.URL_METRICS}/project/${this.uuid}/refresh`;
-      this.axios.get(url).then((response) => {
+      const url = `${this.$api.BASE_URL}/${this.$api.URL_METRICS}/project/${this.uuid}/refresh`;
+      this.axios.get(url).then(() => {
         this.$toastr.s(this.$t('message.metric_refresh_requested'));
       });
     },
     fetchMetrics() {
-      let url = `${this.$api.BASE_URL}/${this.$api.URL_METRICS}/project/${this.uuid}/days/${this.metricDays}`;
+      const url = `${this.$api.BASE_URL}/${this.$api.URL_METRICS}/project/${this.uuid}/days/${this.metricDays}`;
       this.axios.get(url).then((response) => {
         this.$refs.chartProjectVulnerabilities.render(response.data);
         this.$refs.chartPolicyViolationsState.render(response.data);
diff --git a/src/views/portfolio/projects/ProjectDetailsModal.vue b/src/views/portfolio/projects/ProjectDetailsModal.vue
index b925b71c2..49d3840ff 100644
--- a/src/views/portfolio/projects/ProjectDetailsModal.vue
+++ b/src/views/portfolio/projects/ProjectDetailsModal.vue
@@ -18,21 +18,16 @@
             id="project-name-input"
             input-group-size="mb-3"
             type="text"
-            v-model="project.name"
+            v-model="localProject.name"
             lazy="true"
             required="true"
             feedback="true"
             autofocus="false"
             :label="$t('message.project_name')"
-            :tooltip="this.$t('message.project_name_desc')"
+            :tooltip="$t('message.project_name_desc')"
             :feedback-text="$t('message.required_project_name')"
             v-on:change="syncReadOnlyNameField"
-            :readonly="
-              this.isNotPermitted([
-                PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-              ])
-            "
+            :readonly="hasPermission(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
           />
           <b-row align-v="stretch">
             <b-col>
@@ -40,50 +35,35 @@
                 id="project-version-input"
                 input-group-size="mb-3"
                 type="text"
-                v-model="project.version"
+                v-model="localProject.version"
                 lazy="true"
                 required="false"
                 feedback="false"
                 autofocus="false"
                 v-on:change="syncReadOnlyVersionField"
                 :label="$t('message.version')"
-                :tooltip="this.$t('message.component_version_desc')"
-                :readonly="
-                  this.isNotPermitted([
-                    PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                    PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-                  ])
-                "
+                :tooltip="$t('message.component_version_desc')"
+                :readonly="!hasPermission(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
               />
             </b-col>
             <b-col cols="auto">
               <b-input-group-form-switch
                 id="project-details-islatest"
                 :label="$t('message.project_is_latest')"
-                v-model="project.isLatest"
+                v-model="localProject.isLatest"
                 :show-placeholder-label="true"
-                :readonly="
-                  this.isNotPermitted([
-                    PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                    PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-                  ])
-                "
+                :readonly="!hasPermission(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
               />
             </b-col>
           </b-row>
           <b-input-group-form-select
             id="v-classifier-input"
             required="true"
-            v-model="project.classifier"
+            v-model="localProject.classifier"
             :options="availableClassifiers"
             :label="$t('message.classifier')"
             :tooltip="$t('message.component_classifier_desc')"
-            :readonly="
-              this.isNotPermitted([
-                PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-              ])
-            "
+            :readonly="!hasPermission(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
           />
           <div style="margin-bottom: 1rem">
             <label>Parent</label>
@@ -112,14 +92,9 @@
           >
             <b-form-textarea
               id="project-description-description"
-              v-model="project.description"
+              v-model="localProject.description"
               rows="3"
-              :readonly="
-                this.isNotPermitted([
-                  PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                  PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-                ])
-              "
+              :readonly="!hasPermission(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
             />
           </b-form-group>
           <b-form-group
@@ -136,26 +111,18 @@
               :autocomplete-items="tagsAutoCompleteItems"
               @tags-changed="(newTags) => (this.tags = newTags)"
               class="mw-100 bg-transparent text-lowercase"
-              :readonly="
-                this.isNotPermitted([
-                  PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                  PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-                ])
-              "
+              :readonly="hasPermission(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
             />
           </b-form-group>
           <b-input-group-form-switch
             id="project-details-active"
             :label-on="$t('message.active')"
-            :label-off="$t(`${inactiveSinceTimestamp}`)"
-            v-model="project.active"
+            :label-off="inactiveSinceTimestamp"
+            v-model="localProject.active"
             :tooltip="$t('message.inactive_active_children')"
             :disabled="
-              this.isNotPermitted([
-                PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-              ]) ||
-              (project.active && this.hasActiveChild(project))
+              !hasPermission(PERMISSIONS.PORTFOLIO_MANAGEMENT) ||
+              (localProject.active && this.hasActiveChild(localProject))
             "
           />
           <p></p>
@@ -163,7 +130,7 @@
             id="project-uuid"
             input-group-size="mb-3"
             type="text"
-            v-model="project.uuid"
+            v-model="localProject.uuid"
             lazy="false"
             required="false"
             feedback="false"
@@ -212,68 +179,48 @@
             id="project-group-input"
             input-group-size="mb-3"
             type="text"
-            v-model="project.group"
+            v-model="localProject.group"
             required="false"
             :label="$t('message.component_namespace_group_vendor')"
             :tooltip="this.$t('message.component_group_desc')"
-            :readonly="
-              this.isNotPermitted([
-                PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-              ])
-            "
+            :readonly="!hasPermission(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
           />
           <b-input-group-form-input
             id="project-purl-input"
             input-group-size="mb-3"
             type="text"
-            v-model="project.purl"
+            v-model="localProject.purl"
             required="false"
             :label="$t('message.package_url_full')"
             :tooltip="this.$t('message.component_package_url_desc')"
-            :readonly="
-              this.isNotPermitted([
-                PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-              ])
-            "
+            :readonly="!hasPermission(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
           />
           <b-input-group-form-input
             id="project-cpe-input"
             input-group-size="mb-3"
             type="text"
-            v-model="project.cpe"
+            v-model="localProject.cpe"
             required="false"
             :label="$t('message.cpe_full')"
             :tooltip="$t('message.component_cpe_desc')"
-            :readonly="
-              this.isNotPermitted([
-                PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-              ])
-            "
+            :readonly="!hasPermission(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
           />
           <b-input-group-form-input
             id="project-swidTagId-input"
             input-group-size="mb-3"
             type="text"
-            v-model="project.swidTagId"
+            v-model="localProject.swidTagId"
             required="false"
             :label="$t('message.swid_tagid')"
             :tooltip="$t('message.component_swid_tagid_desc')"
-            :readonly="
-              this.isNotPermitted([
-                PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-              ])
-            "
+            :readonly="!hasPermission(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
           />
         </b-card>
       </b-tab>
       <b-tab
         class="body-bg-color"
         style="border: 0; padding: 0"
-        v-if="project.manufacturer"
+        v-if="localProject.manufacturer"
       >
         <template v-slot:title
           ><i class="fa fa-industry"></i>
@@ -284,7 +231,7 @@
             id="project-manufacturer-name-input"
             input-group-size="mb-3"
             type="text"
-            v-model="project.manufacturer.name"
+            v-model="localProject.manufacturer.name"
             required="false"
             readonly
             :label="$t('message.manufacturer_name')"
@@ -300,7 +247,7 @@
               id="manufacturerUrlsTable"
               ref="manufacturerUrlsTable"
               :columns="urlsTableColumns"
-              :data="project.manufacturer.urls"
+              :data="localProject.manufacturer.urls"
               :options="urlsTableOptions"
             >
             </bootstrap-table>
@@ -314,7 +261,7 @@
               id="manufacturerContactsTable"
               ref="manufacturerContactsTable"
               :columns="contactsTableColumns"
-              :data="project.manufacturer.contacts"
+              :data="localProject.manufacturer.contacts"
               :options="contactsTableOptions"
             >
             </bootstrap-table>
@@ -324,7 +271,7 @@
       <b-tab
         class="body-bg-color"
         style="border: 0; padding: 0"
-        v-if="project.supplier"
+        v-if="localProject.supplier"
       >
         <template v-slot:title
           ><i class="fa fa-building-o"></i>
@@ -335,7 +282,7 @@
             id="project-supplier-name-input"
             input-group-size="mb-3"
             type="text"
-            v-model="project.supplier.name"
+            v-model="localProject.supplier.name"
             required="false"
             readonly
             :label="$t('message.supplier_name')"
@@ -351,7 +298,7 @@
               id="supplierUrlsTable"
               ref="supplierUrlsTable"
               :columns="urlsTableColumns"
-              :data="project.supplier.urls"
+              :data="localProject.supplier.urls"
               :options="urlsTableOptions"
             >
             </bootstrap-table>
@@ -365,7 +312,7 @@
               id="supplierContactsTable"
               ref="supplierContactsTable"
               :columns="contactsTableColumns"
-              :data="project.supplier.contacts"
+              :data="localProject.supplier.contacts"
               :options="contactsTableOptions"
             >
             </bootstrap-table>
@@ -381,7 +328,7 @@
           <bootstrap-table
             ref="referencesTable"
             :columns="referencesTableColumns"
-            :data="project.externalReferences"
+            :data="localProject.externalReferences"
             :options="referencesTableOptions"
           >
           </bootstrap-table>
@@ -390,8 +337,8 @@
       <b-tab
         style="border: 0; padding: 0"
         v-if="
-          project.metadata &&
-          (project.metadata.authors || project.metadata.supplier)
+          localProject.metadata &&
+          (localProject.metadata.authors || localProject.metadata.supplier)
         "
       >
         <template v-slot:title
@@ -401,7 +348,7 @@
           <b-tabs pills card vertical>
             <b-tab
               :title="$t('message.authors')"
-              v-if="project.metadata.authors"
+              v-if="localProject.metadata.authors"
             >
               <b-card>
                 <b-form-group id="authorsTable-Fieldset">
@@ -409,7 +356,7 @@
                     id="authorsTable"
                     ref="authorsTable"
                     :columns="contactsTableColumns"
-                    :data="project.metadata.authors"
+                    :data="localProject.metadata.authors"
                     :options="contactsTableOptions"
                   >
                   </bootstrap-table>
@@ -418,14 +365,14 @@
             </b-tab>
             <b-tab
               :title="$t('message.supplier')"
-              v-if="project.metadata.supplier"
+              v-if="localProject.metadata.supplier"
             >
               <b-card>
                 <b-input-group-form-input
                   id="project-metadata-supplier-name-input"
                   input-group-size="mb-3"
                   type="text"
-                  v-model="project.metadata.supplier.name"
+                  v-model="localProject.metadata.supplier.name"
                   required="false"
                   readonly
                   :label="$t('message.supplier_name')"
@@ -443,7 +390,7 @@
                     id="supplierUrlsTable"
                     ref="supplierUrlsTable"
                     :columns="urlsTableColumns"
-                    :data="project.metadata.supplier.urls"
+                    :data="localProject.metadata.supplier.urls"
                     :options="urlsTableOptions"
                   >
                   </bootstrap-table>
@@ -457,7 +404,7 @@
                     id="supplierContactsTable"
                     ref="supplierContactsTable"
                     :columns="contactsTableColumns"
-                    :data="project.metadata.supplier.contacts"
+                    :data="localProject.metadata.supplier.contacts"
                     :options="contactsTableOptions"
                   >
                   </bootstrap-table>
@@ -473,30 +420,21 @@
         size="md"
         variant="outline-danger"
         @click="deleteProject()"
-        v-permission:or="[
-          PERMISSIONS.PORTFOLIO_MANAGEMENT,
-          PERMISSIONS.PORTFOLIO_MANAGEMENT_DELETE,
-        ]"
-        >{{ $t('message.delete') }}</b-button
-      >
+        v-permission="PERMISSIONS.PROJECT_DELETE"
+        >{{ $t('message.delete') }}
+      </b-button>
       <b-button
         size="md"
         variant="outline-primary"
         v-b-modal.projectPropertiesModal
-        v-permission:or="[
-          PERMISSIONS.PORTFOLIO_MANAGEMENT,
-          PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-        ]"
+        v-permission:or="PERMISSIONS.PORTFOLIO_MANAGEMENT"
         >{{ $t('message.properties') }}</b-button
       >
       <b-button
         size="md"
         variant="outline-primary"
         v-b-modal.projectAddVersionModal
-        v-permission:or="[
-          PERMISSIONS.PORTFOLIO_MANAGEMENT,
-          PERMISSIONS.PORTFOLIO_MANAGEMENT_CREATE,
-        ]"
+        v-permission:or="PERMISSIONS.PORTFOLIO_MANAGEMENT"
         >{{ $t('message.add_version') }}</b-button
       >
       <b-button size="md" variant="secondary" @click="cancel()">{{
@@ -506,10 +444,7 @@
         size="md"
         variant="primary"
         @click="updateProject()"
-        v-permission:or="[
-          PERMISSIONS.PORTFOLIO_MANAGEMENT,
-          PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-        ]"
+        v-permission:or="PERMISSIONS.PORTFOLIO_MANAGEMENT"
         >{{ $t('message.update') }}</b-button
       >
     </template>
@@ -526,6 +461,7 @@ import common from '../../../shared/common';
 import Multiselect from 'vue-multiselect';
 import xssFilters from 'xss-filters';
 import BInputGroupFormSwitch from '@/forms/BInputGroupFormSwitch.vue';
+import { cloneDeep } from 'lodash-es';
 
 export default {
   name: 'ProjectDetailsModal',
@@ -544,6 +480,7 @@ export default {
   },
   data() {
     return {
+      localProject: {}, // local copy of project
       readOnlyProjectName: '',
       readOnlyProjectVersion: '',
       availableClassifiers: [
@@ -704,31 +641,41 @@ export default {
       },
     };
   },
+  watch: {
+    project: {
+      handler(newVal) {
+        this.localProject = cloneDeep(newVal);
+      },
+      immediate: true,
+      deep: true,
+    },
+    tag: 'searchTags',
+  },
   beforeUpdate() {
-    this.readOnlyProjectName = this.project.name;
-    this.readOnlyProjectVersion = this.project.version;
+    this.readOnlyProjectName = this.localProject.name;
+    this.readOnlyProjectVersion = this.localProject.version;
   },
   beforeMount() {
     this.$root.$on('initializeProjectDetailsModal', async () => {
-      if (!this.retrievedParents && this.project.parent) {
+      if (!this.retrievedParents && this.localProject.parent) {
         this.parent = (
           await this.axios.get(
-            `${this.$api.BASE_URL}/${this.$api.URL_PROJECT}/${this.project.parent.uuid}`,
+            `${this.$api.BASE_URL}/${this.$api.URL_PROJECT}/${this.localProject.parent.uuid}`,
           )
         ).data;
         this.selectedParent = this.parent;
         this.availableParents = [{ name: '', version: '', uuid: null }];
         this.retrievedParents = true;
       }
+      this.localProject = cloneDeep(this.project);
       this.$root.$emit('bv::show::modal', 'projectDetailsModal');
     });
   },
-  watch: {
-    tag: 'searchTags',
-  },
   methods: {
     initializeTags: function () {
-      this.tags = (this.project.tags || []).map((tag) => ({ text: tag.name }));
+      this.tags = (this.localProject.tags || []).map((tag) => ({
+        text: tag.name,
+      }));
     },
     syncReadOnlyNameField: function (value) {
       this.readOnlyProjectName = value;
@@ -736,45 +683,27 @@ export default {
     syncReadOnlyVersionField: function (value) {
       this.readOnlyProjectVersion = value;
     },
-    updateProject: function () {
-      let url = `${this.$api.BASE_URL}/${this.$api.URL_PROJECT}`;
-      let tagsNode = [];
-      let parent = null;
-      if (this.selectedParent) {
-        parent = { uuid: this.selectedParent.uuid };
+    updateProject: async function () {
+      const url = `${this.$api.BASE_URL}/${this.$api.URL_PROJECT}`;
+      const tagsNode = this.tags.map((tag) => ({ name: tag.text }));
+      const parent = this.selectedParent
+        ? { uuid: this.selectedParent.uuid }
+        : null;
+      const payload = {
+        ...this.localProject,
+        parent,
+        tags: tagsNode,
+      };
+      try {
+        const response = await this.axios.post(url, payload);
+        this.$emit('projectUpdated', response.data);
+        this.$toastr.s(this.$t('message.project_updated'));
+        this.parent = this.selectedParent;
+      } catch (error) {
+        this.$toastr.w(this.$t('condition.unsuccessful_action'));
+      } finally {
+        this.$root.$emit('bv::hide::modal', 'projectDetailsModal');
       }
-      this.tags.forEach((tag) => tagsNode.push({ name: tag.text }));
-      this.axios
-        .post(url, {
-          uuid: this.project.uuid,
-          author: this.project.author,
-          publisher: this.project.publisher,
-          supplier: this.project.supplier,
-          group: this.project.group,
-          name: this.project.name,
-          version: this.project.version,
-          description: this.project.description,
-          classifier: this.project.classifier,
-          parent: parent,
-          cpe: this.project.cpe,
-          purl: this.project.purl,
-          swidTagId: this.project.swidTagId,
-          tags: tagsNode,
-          active: this.project.active,
-          isLatest: this.project.isLatest,
-          externalReferences: this.project.externalReferences,
-        })
-        .then((response) => {
-          this.$emit('projectUpdated', response.data);
-          this.$toastr.s(this.$t('message.project_updated'));
-          this.parent = this.selectedParent;
-        })
-        .catch((error) => {
-          this.$toastr.w(this.$t('condition.unsuccessful_action'));
-        })
-        .finally(() => {
-          this.$root.$emit('bv::hide::modal', 'projectDetailsModal');
-        });
     },
     deleteProject: async function () {
       this.$root.$emit('bv::hide::modal', 'projectDetailsModal');
@@ -807,11 +736,7 @@ export default {
       );
     },
     createProjectLabel: function (project) {
-      if (project.version) {
-        return project.name + ' : ' + project.version;
-      } else {
-        return project.name;
-      }
+      return `${project.name}${project.version ? ' - ' + project.version : ''}`;
     },
     asyncFind: function (query) {
       if (query) {
@@ -852,12 +777,12 @@ export default {
     },
   },
   computed: {
-    inactiveSinceTimestamp: function () {
-      return this.project.inactiveSince
-        ? this.$t('message.inactive_since') +
-            ': ' +
-            common.formatTimestamp(this.project.inactiveSince, true)
-        : this.$t('message.inactive');
+    inactiveSinceTimestamp() {
+      const { inactiveSince } = this.project;
+      if (inactiveSince) {
+        return `${this.$t('message.inactive_since')}: ${common.formatTimestamp(inactiveSince, true)}`;
+      }
+      return this.$t('message.inactive');
     },
   },
 };
diff --git a/src/views/portfolio/projects/ProjectFindings.vue b/src/views/portfolio/projects/ProjectFindings.vue
index 9a2b644c5..53ebdce2f 100644
--- a/src/views/portfolio/projects/ProjectFindings.vue
+++ b/src/views/portfolio/projects/ProjectFindings.vue
@@ -10,9 +10,9 @@
         size="md"
         variant="outline-primary"
         v-b-modal.projectUploadVexModal
-        v-permission:or="[
-          PERMISSIONS.VULNERABILITY_ANALYSIS,
-          PERMISSIONS.VULNERABILITY_ANALYSIS_CREATE,
+        v-permission:and="[
+          PERMISSIONS.PROJECT_READ,
+          PERMISSIONS.FINDING_UPDATE,
         ]"
       >
         <span class="fa fa-upload"></span> {{ $t('message.apply_vex') }}
@@ -26,11 +26,7 @@
         size="md"
         variant="outline-primary"
         @click="downloadVex()"
-        v-permission:or="[
-          PERMISSIONS.VIEW_VULNERABILITY,
-          PERMISSIONS.VULNERABILITY_ANALYSIS,
-          PERMISSIONS.VULNERABILITY_ANALYSIS_READ,
-        ]"
+        v-permission:or="[PERMISSIONS.PROJECT_READ, PERMISSIONS.FINDING_READ]"
       >
         <span class="fa fa-download"></span> {{ $t('message.export_vex') }}
       </b-button>
@@ -43,11 +39,7 @@
         size="md"
         variant="outline-primary"
         @click="downloadVdr()"
-        v-permission:or="[
-          PERMISSIONS.VIEW_VULNERABILITY,
-          PERMISSIONS.VULNERABILITY_ANALYSIS,
-          PERMISSIONS.VULNERABILITY_ANALYSIS_READ,
-        ]"
+        v-permission:and="[PERMISSIONS.PROJECT_READ, PERMISSIONS.FINDING_READ]"
       >
         <span class="fa fa-download"></span> {{ $t('message.export_vdr') }}
       </b-button>
@@ -60,7 +52,7 @@
         size="md"
         variant="outline-primary"
         @click="reAnalyze()"
-        v-permission:or="[PERMISSIONS.VIEW_VULNERABILITY]"
+        v-permission:and="[PERMISSIONS.PROJECT_READ, PERMISSIONS.FINDING_READ]"
       >
         <span class="fa fa-refresh"></span>
         {{ $t('message.project_reanalyze') }}
@@ -70,7 +62,7 @@
       }}</b-tooltip>
 
       <!-- Future use when CSAF support is added
-      <b-dropdown variant="outline-primary" v-permission:or="[PERMISSIONS.VIEW_VULNERABILITY, PERMISSIONS.VULNERABILITY_ANALYSIS]">
+      <b-dropdown variant="outline-primary" v-permission:and="[PERMISSIONS.PROJECT_READ, PERMISSIONS.FINDING_READ]">
         <template #button-content>
           <span class="fa fa-download"></span> {{ $t('message.export_vex') }}
         </template>
diff --git a/src/views/portfolio/projects/ProjectList.vue b/src/views/portfolio/projects/ProjectList.vue
index 540ecb6fb..ce02da80c 100644
--- a/src/views/portfolio/projects/ProjectList.vue
+++ b/src/views/portfolio/projects/ProjectList.vue
@@ -1,15 +1,12 @@
 <template>
-  <div class="animated fadeIn" v-permission="'VIEW_PORTFOLIO'">
+  <div class="animated fadeIn">
     <portfolio-widget-row :fetch="true" />
     <div id="projectsToolbar" class="bs-table-custom-toolbar">
       <b-button
         size="md"
         variant="outline-primary"
         @click="initializeProjectCreateProjectModal"
-        v-permission:or="[
-          PERMISSIONS.PORTFOLIO_MANAGEMENT,
-          PERMISSIONS.PORTFOLIO_MANAGEMENT_CREATE,
-        ]"
+        v-permission="PERMISSIONS.PORTFOLIO_MANAGEMENT"
       >
         <span class="fa fa-plus"></span> {{ $t('message.create_project') }}
       </b-button>
@@ -264,7 +261,7 @@ export default {
           field: 'name',
           sortable: true,
           formatter(value, row, index) {
-            let url = xssFilters.uriInUnQuotedAttr('../projects/' + row.uuid);
+            const url = xssFilters.uriInUnQuotedAttr('../projects/' + row.uuid);
             return `<a href="${url}">${xssFilters.inHTMLData(value)}</a>`;
           },
         },
diff --git a/src/views/portfolio/projects/ProjectPolicyViolations.vue b/src/views/portfolio/projects/ProjectPolicyViolations.vue
index 13ab8fcd5..7741dcaa5 100644
--- a/src/views/portfolio/projects/ProjectPolicyViolations.vue
+++ b/src/views/portfolio/projects/ProjectPolicyViolations.vue
@@ -32,22 +32,17 @@
 import { Switch as cSwitch } from '@coreui/vue';
 import common from '../../../shared/common';
 import bootstrapTableMixin from '../../../mixins/bootstrapTableMixin';
-import permissionsMixin from '../../../mixins/permissionsMixin';
 import xssFilters from 'xss-filters';
-import i18n from '../../../i18n';
-import BootstrapToggle from 'vue-bootstrap-toggle';
 import $ from 'jquery';
 import { loadUserPreferencesForBootstrapTable } from '@/shared/utils';
+import ProjectPolicyViolationDetails from '../../components/detail-formatters/ProjectPolicyViolationDetails.vue';
 
 export default {
   props: {
     uuid: String,
   },
   mixins: [bootstrapTableMixin],
-  components: {
-    cSwitch,
-    BootstrapToggle,
-  },
+  components: { cSwitch },
   beforeCreate() {
     this.showSuppressedViolations =
       localStorage &&
@@ -185,202 +180,9 @@ export default {
         detailViewIcon: true,
         detailViewByClick: false,
         detailFormatter: (index, row) => {
-          let projectUuid = this.uuid;
+          const props = { row, index, uuid: this.uuid };
           return this.vueFormatter({
-            i18n,
-            template: `
-                <b-row class="expanded-row">
-                  <b-col sm="6">
-
-                    <div v-if="violation.policyCondition.subject === 'COORDINATES' ">
-                      <b-form-group id="fieldset-1" :label="this.$t('message.group')" label-for="input-1">
-                        <b-form-input id="input-1" v-model="violation.component.group" class="form-control disabled" readonly trim />
-                      </b-form-group>
-                      <b-form-group id="fieldset-2" :label="this.$t('message.name')" label-for="input-2">
-                        <b-form-input id="input-2" v-model="violation.component.name" class="form-control disabled" readonly trim />
-                      </b-form-group>
-                      <b-form-group id="fieldset-3" :label="this.$t('message.version')" label-for="input-3">
-                        <b-form-input id="input-3" v-model="violation.component.version" class="form-control disabled" readonly trim />
-                      </b-form-group>
-                    </div>
-
-                    <div v-else-if="violation.policyCondition.subject === 'CPE' ">
-                      <b-form-group v-if="violation.component.cpe" id="fieldset-1" :label="this.$t('message.cpe')" label-for="input-1">
-                        <b-form-input id="input-1" v-model="violation.component.cpe" class="form-control disabled" readonly trim />
-                      </b-form-group>
-                    </div>
-
-                    <div v-else-if="violation.policyCondition.subject === 'PACKAGE_URL' ">
-                      <b-form-group v-if="violation.component.purl" id="fieldset-1" :label="this.$t('message.purl')" label-for="input-1">
-                        <b-form-input id="input-1" v-model="violation.component.purl" class="form-control disabled" readonly trim />
-                      </b-form-group>
-                    </div>
-
-                    <div v-else-if="violation.policyCondition.subject === 'SWID_TAGID' ">
-                      <b-form-group v-if="violation.component.swid" id="fieldset-1" :label="this.$t('message.swid')" label-for="input-1">
-                        <b-form-input id="input-1" v-model="violation.component.swid" class="form-control disabled" readonly trim />
-                      </b-form-group>
-                    </div>
-
-                    <div v-else-if="violation.policyCondition.subject === 'LICENSE' || violation.policyCondition.subject === 'LICENSE_GROUP' ">
-                      <b-form-group v-if="violation.component.resolvedLicense" id="fieldset-1" :label="this.$t('message.license')" label-for="input-1">
-                        <b-form-input id="input-1" v-model="violation.component.resolvedLicense.licenseId" class="form-control disabled" readonly trim />
-                      </b-form-group>
-                    </div>
-
-                    <b-form-group id="failedCondition" :label="this.$t('message.condition')" label-for="failedCondition-input">
-                      <b-form-textarea id="failedCondition-input" v-model="conditionString" rows="3" class="form-control disabled" readonly trim />
-                    </b-form-group>
-
-                  </b-col>
-                  <b-col sm="6">
-                    <b-form-group id="fieldset-7" :label="this.$t('message.audit_trail')" label-for="auditTrailField">
-                      <b-form-textarea id="auditTrailField" v-model="auditTrail" rows="7" class="form-control disabled" readonly trim />
-                    </b-form-group>
-                    <b-form-group id="fieldset-8" v-if="this.isPermitted(this.PERMISSIONS.POLICY_VIOLATION_ANALYSIS)" :label="this.$t('message.comment')" label-for="input-8">
-                      <b-form-textarea id="input-8" v-model="comment" rows="4" class="form-control" trim />
-                      <div class="pull-right">
-                        <b-button size="sm" variant="outline-primary" @click="addComment"><span class="fa fa-comment-o"></span>{{ $t("message.add_comment") }}</b-button>
-                      </div>
-                    </b-form-group>
-                    <b-form-group id="fieldset-9" v-if="this.isPermitted(this.PERMISSIONS.POLICY_VIOLATION_ANALYSIS)" :label="this.$t('message.analysis')" label-for="input-9">
-                    <b-input-group id="input-9">
-                      <b-form-select v-model="analysisState" :options="analysisChoices" @change="makeAnalysis" style="flex:0 1 auto; width:auto; margin-right:2rem;"/>
-                      <bootstrap-toggle v-model="isSuppressed" :options="{ on: 'Suppressed', off: 'Suppress', onstyle: 'warning', offstyle: 'outline-disabled'}" :disabled="false" />
-                    </b-input-group>
-                    </b-form-group>
-                  </b-col>
-                </b-row>
-              `,
-            data() {
-              return {
-                auditTrail: null,
-                comment: null,
-                isSuppressed: null,
-                violation: row,
-                analysisChoices: [
-                  { value: 'NOT_SET', text: this.$t('message.not_set') },
-                  { value: 'APPROVED', text: this.$t('message.approved') },
-                  { value: 'REJECTED', text: this.$t('message.rejected') },
-                ],
-                analysisState: null,
-                projectUuid: projectUuid,
-              };
-            },
-            computed: {
-              conditionString: function () {
-                return (
-                  'subject == ' +
-                  this.violation.policyCondition.subject +
-                  ' && value ' +
-                  this.violation.policyCondition.operator +
-                  ' ' +
-                  this.violation.policyCondition.value
-                );
-              },
-            },
-            watch: {
-              isSuppressed: function (currentValue, oldValue) {
-                if (oldValue != null) {
-                  this.callRestEndpoint(this.analysisState, null, currentValue);
-                }
-              },
-            },
-            mixins: [permissionsMixin],
-            methods: {
-              getAnalysis: function () {
-                let queryString =
-                  '?policyViolation=' +
-                  this.violation.uuid +
-                  '&component=' +
-                  this.violation.component.uuid;
-                let url =
-                  `${this.$api.BASE_URL}/${this.$api.URL_POLICY_VIOLATION_ANALYSIS}` +
-                  queryString;
-                this.axios.get(url).then((response) => {
-                  this.updateAnalysisData(response.data);
-                });
-              },
-              updateAnalysisData: function (analysis) {
-                if (
-                  Object.prototype.hasOwnProperty.call(
-                    analysis,
-                    'analysisComments',
-                  )
-                ) {
-                  let trail = '';
-                  for (let i = 0; i < analysis.analysisComments.length; i++) {
-                    if (
-                      Object.prototype.hasOwnProperty.call(
-                        analysis.analysisComments[i],
-                        'commenter',
-                      )
-                    ) {
-                      trail += analysis.analysisComments[i].commenter + ' - ';
-                    }
-                    trail += common.formatTimestamp(
-                      analysis.analysisComments[i].timestamp,
-                      true,
-                    );
-                    trail += '\n';
-                    trail += analysis.analysisComments[i].comment;
-                    trail += '\n\n';
-                  }
-                  this.auditTrail = trail;
-                }
-                if (
-                  Object.prototype.hasOwnProperty.call(
-                    analysis,
-                    'analysisState',
-                  )
-                ) {
-                  this.analysisState = analysis.analysisState;
-                }
-                if (
-                  Object.prototype.hasOwnProperty.call(analysis, 'isSuppressed')
-                ) {
-                  this.isSuppressed = analysis.isSuppressed;
-                } else {
-                  this.isSuppressed = false;
-                }
-              },
-              makeAnalysis: function () {
-                this.callRestEndpoint(this.analysisState, null, null);
-              },
-              addComment: function () {
-                if (this.comment != null) {
-                  this.callRestEndpoint(this.analysisState, this.comment, null);
-                }
-              },
-              callRestEndpoint: function (
-                analysisState,
-                comment,
-                isSuppressed,
-              ) {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_POLICY_VIOLATION_ANALYSIS}`;
-                this.axios
-                  .put(url, {
-                    policyViolation: this.violation.uuid,
-                    component: this.violation.component.uuid,
-                    analysisState: analysisState,
-                    comment: comment,
-                    isSuppressed: isSuppressed,
-                  })
-                  .then((response) => {
-                    this.$toastr.s(this.$t('message.updated'));
-                    this.updateAnalysisData(response.data);
-                  })
-                  .catch((error) => {
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-            },
-            beforeMount() {
-              this.getAnalysis();
-            },
-            components: {
-              BootstrapToggle,
-            },
+            render: (h) => h(ProjectPolicyViolationDetails, { props }),
           });
         },
         onExpandRow: this.vueFormatterInit,
diff --git a/src/views/portfolio/projects/ProjectPropertiesModal.vue b/src/views/portfolio/projects/ProjectPropertiesModal.vue
index d71764b73..f5dbeae08 100644
--- a/src/views/portfolio/projects/ProjectPropertiesModal.vue
+++ b/src/views/portfolio/projects/ProjectPropertiesModal.vue
@@ -14,16 +14,9 @@
     >
     </bootstrap-table>
     <template v-slot:modal-footer="{ cancel }">
-      <b-button
-        v-permission:or="[
-          'PORTFOLIO_MANAGEMENT',
-          'PORTFOLIO_MANAGEMENT_DELETE',
-        ]"
-        size="md"
-        variant="outline-danger"
-        @click="deleteProperty"
-        >{{ $t('message.delete') }}</b-button
-      >
+      <b-button size="md" variant="outline-danger" @click="deleteProperty">{{
+        $t('message.delete')
+      }}</b-button>
       <b-button size="md" variant="secondary" @click="cancel()">{{
         $t('message.close')
       }}</b-button>
diff --git a/src/views/portfolio/projects/SelectProjectModal.vue b/src/views/portfolio/projects/SelectProjectModal.vue
index 61d52e038..3e1727bc6 100644
--- a/src/views/portfolio/projects/SelectProjectModal.vue
+++ b/src/views/portfolio/projects/SelectProjectModal.vue
@@ -4,7 +4,6 @@
     size="lg"
     hide-header-close
     no-stacking
-    v-permission="'VIEW_PORTFOLIO'"
     :title="$t('message.select_project')"
   >
     <bootstrap-table
diff --git a/src/views/portfolio/projects/Service.vue b/src/views/portfolio/projects/Service.vue
index fe536a187..fff8fea2d 100644
--- a/src/views/portfolio/projects/Service.vue
+++ b/src/views/portfolio/projects/Service.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="animated fadeIn" v-permission="PERMISSIONS.VIEW_PORTFOLIO">
+  <div class="animated fadeIn">
     <b-card :no-body="true" footer-class="px-3 py-2 card-footer-action">
       <b-card-body class="p-3 clearfix">
         <b-row>
@@ -118,26 +118,22 @@
       </b-tab>
     </b-tabs>
     <service-details-modal
-      :service="cloneDeep(service)"
+      :service="service"
       v-on:serviceUpdated="syncServiceFields"
     />
   </div>
 </template>
 
 <script>
-import common from '../../../shared/common';
-import { cloneDeep } from 'lodash-es';
 import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities';
 import VueEasyPieChart from 'vue-easy-pie-chart';
 import PortfolioWidgetRow from '../../dashboard/PortfolioWidgetRow';
 import ServiceDashboard from './ServiceDashboard';
 import SeverityBarChart from '../../dashboard/SeverityBarChart';
 import EventBus from '../../../shared/eventbus';
-import permissionsMixin from '../../../mixins/permissionsMixin';
 import ServiceDetailsModal from './ServiceDetailsModal';
 
 export default {
-  mixins: [permissionsMixin],
   components: {
     SeverityBarChart,
     ServiceDashboard,
@@ -147,7 +143,7 @@ export default {
   },
   computed: {
     projectLabel() {
-      if (this.service.hasOwnProperty('project')) {
+      if (Object.prototype.hasOwnProperty.call(this.service, 'project')) {
         if (this.service.project.name && this.service.project.version) {
           return (
             this.service.project.name + ' ▸ ' + this.service.project.version
@@ -156,6 +152,7 @@ export default {
           return this.service.project.name;
         }
       }
+      return '';
     },
     serviceLabel() {
       if (this.service.name && this.service.version) {
@@ -187,9 +184,6 @@ export default {
     };
   },
   methods: {
-    cloneDeep: function (service) {
-      return cloneDeep(service);
-    },
     getStyle: function (style) {
       return getStyle(style);
     },
diff --git a/src/views/portfolio/projects/ServiceDashboard.vue b/src/views/portfolio/projects/ServiceDashboard.vue
index 11f6227f6..ecf744a46 100644
--- a/src/views/portfolio/projects/ServiceDashboard.vue
+++ b/src/views/portfolio/projects/ServiceDashboard.vue
@@ -9,10 +9,7 @@
           <div class="small text-muted">
             {{ $t('message.last_measurement') }}: {{ lastMeasurement
             }}<b-link
-              v-permission:or="[
-                'PORTFOLIO_MANAGEMENT',
-                'PORTFOLIO_MANAGEMENT_READ',
-              ]"
+              v-permission="PERMISSIONS.PORTFOLIO_MANAGEMENT"
               class="font-weight-bold"
               style="margin-left: 6px"
               v-on:click="refreshMetrics"
@@ -148,9 +145,11 @@ import ChartComponentVulnerabilities from '../../dashboard/ChartComponentVulnera
 import ChartPortfolioVulnerabilities from '../../dashboard/ChartPortfolioVulnerabilities';
 import ChartPolicyViolationsState from '@/views/dashboard/ChartPolicyViolationsState';
 import ChartPolicyViolationBreakdown from '@/views/dashboard/ChartPolicyViolationBreakdown';
+import permissionsMixin from '../../../mixins/permissionsMixin';
 
 export default {
   name: 'ServiceDashboard',
+  mixins: [permissionsMixin],
   components: {
     ChartComponentVulnerabilities,
     ChartPortfolioVulnerabilities,
diff --git a/src/views/portfolio/projects/ServiceDetailsModal.vue b/src/views/portfolio/projects/ServiceDetailsModal.vue
index 796d56823..eb3cb1a5c 100644
--- a/src/views/portfolio/projects/ServiceDetailsModal.vue
+++ b/src/views/portfolio/projects/ServiceDetailsModal.vue
@@ -16,7 +16,7 @@
             id="service-name-input"
             input-group-size="mb-3"
             type="text"
-            v-model="service.name"
+            v-model="localService.name"
             lazy="true"
             required="true"
             feedback="true"
@@ -24,42 +24,27 @@
             :label="$t('message.service_name')"
             :tooltip="this.$t('message.service_name_desc')"
             :feedback-text="$t('message.required_service_name')"
-            :readonly="
-              this.isNotPermitted([
-                PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-              ])
-            "
+            :readonly="!canUpdateComponent"
           />
           <b-input-group-form-input
             id="service-version-input"
             input-group-size="mb-3"
             type="text"
-            v-model="service.version"
+            v-model="localService.version"
             required="false"
             :label="$t('message.version')"
             :tooltip="this.$t('message.service_version_desc')"
-            :readonly="
-              this.isNotPermitted([
-                PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-              ])
-            "
+            :readonly="!canUpdateComponent"
           />
           <b-input-group-form-input
             id="service-group-input"
             input-group-size="mb-3"
             type="text"
-            v-model="service.group"
+            v-model="localService.group"
             required="false"
             :label="$t('message.component_namespace_group_vendor')"
             :tooltip="this.$t('message.component_group_desc')"
-            :readonly="
-              this.isNotPermitted([
-                PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-              ])
-            "
+            :readonly="!canUpdateComponent"
           />
           <b-form-group
             id="service-notes-form-group"
@@ -68,21 +53,16 @@
           >
             <b-form-textarea
               id="service-notes-description"
-              v-model="service.description"
+              v-model="localService.description"
               rows="3"
-              :readonly="
-                this.isNotPermitted([
-                  PERMISSIONS.PORTFOLIO_MANAGEMENT,
-                  PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-                ])
-              "
+              :readonly="!canUpdateComponent"
             />
           </b-form-group>
           <b-input-group-form-input
             id="service-uuid"
             input-group-size="mb-3"
             type="text"
-            v-model="service.uuid"
+            v-model="localService.uuid"
             lazy="false"
             required="false"
             feedback="false"
@@ -104,7 +84,7 @@
             id="service-provider-name-input"
             input-group-size="mb-3"
             type="text"
-            v-model="service.provider.name"
+            v-model="localService.provider.name"
             required="false"
             :label="$t('message.provider_name')"
             :tooltip="this.$t('message.service_provider_name_desc')"
@@ -118,7 +98,7 @@
               id="providerUrlsTable"
               ref="providerUrlsTable"
               :columns="providerUrlsTableColumns"
-              :data="service.provider.urls"
+              :data="localService.provider.urls"
               :options="providerUrlsTableOptions"
             >
             </bootstrap-table>
@@ -132,7 +112,7 @@
               id="contactsTable"
               ref="contactsTable"
               :columns="contactsTableColumns"
-              :data="service.provider.contacts"
+              :data="localService.provider.contacts"
               :options="contactsTableOptions"
             >
             </bootstrap-table>
@@ -147,7 +127,7 @@
           <bootstrap-table
             ref="endpointTable"
             :columns="endpointTableColumns"
-            :data="service.endpoints"
+            :data="localService.endpoints"
             :options="endpointTableOptions"
           >
           </bootstrap-table>
@@ -161,7 +141,7 @@
           <bootstrap-table
             ref="dataTable"
             :columns="dataTableColumns"
-            :data="service.data"
+            :data="localService.data"
             :options="dataTableOptions"
           >
           </bootstrap-table>
@@ -176,7 +156,7 @@
           <bootstrap-table
             ref="referencesTable"
             :columns="referencesTableColumns"
-            :data="service.externalReferences"
+            :data="localService.externalReferences"
             :options="referencesTableOptions"
           >
           </bootstrap-table>
@@ -188,10 +168,7 @@
         size="md"
         variant="outline-danger"
         @click="deleteService()"
-        v-permission:or="[
-          PERMISSIONS.PORTFOLIO_MANAGEMENT,
-          PERMISSIONS.PORTFOLIO_MANAGEMENT_DELETE,
-        ]"
+        v-permission="PERMISSIONS.PORTFOLIO_MANAGEMENT"
         >{{ $t('message.delete') }}</b-button
       >
       <b-button size="md" variant="secondary" @click="cancel()">{{
@@ -201,10 +178,7 @@
         size="md"
         variant="primary"
         @click="updateService()"
-        v-permission:or="[
-          PERMISSIONS.PORTFOLIO_MANAGEMENT,
-          PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-        ]"
+        v-permission="PERMISSIONS.PORTFOLIO_MANAGEMENT"
         >{{ $t('message.update') }}</b-button
       >
     </template>
@@ -217,6 +191,7 @@ import BInputGroupFormSelect from '../../../forms/BInputGroupFormSelect';
 import permissionsMixin from '../../../mixins/permissionsMixin';
 import xssFilters from 'xss-filters';
 import common from '@/shared/common';
+import { cloneDeep } from 'lodash-es';
 
 export default {
   name: 'ServiceDetailsModal',
@@ -230,6 +205,7 @@ export default {
   },
   data() {
     return {
+      localService: {},
       contactsTableColumns: [
         {
           title: this.$t('message.name'),
@@ -416,13 +392,25 @@ export default {
       },
     };
   },
+  computed: {
+    canUpdateComponent() {
+      return this.hasPermission(this.PERMISSIONS.PORTFOLIO_MANAGEMENT);
+    },
+  },
+  watch: {
+    service: {
+      handler(newVal) {
+        this.localService = cloneDeep(newVal);
+      },
+      immediate: true,
+    },
+  },
   methods: {
     updateService: function () {
       this.$root.$emit('bv::hide::modal', 'serviceDetailsModal');
       let url = `${this.$api.BASE_URL}/${this.$api.URL_SERVICE}`;
-      console.log(this.service);
       this.axios
-        .post(url, this.service)
+        .post(url, this.localService)
         .then((response) => {
           this.$emit('serviceUpdated', response.data);
           this.$toastr.s(this.$t('message.service_updated'));
@@ -434,13 +422,14 @@ export default {
     deleteService: function () {
       this.$root.$emit('bv::hide::modal', 'serviceDetailsModal');
       let url =
-        `${this.$api.BASE_URL}/${this.$api.URL_SERVICE}/` + this.service.uuid;
+        `${this.$api.BASE_URL}/${this.$api.URL_SERVICE}/` +
+        this.localService.uuid;
       this.axios
         .delete(url)
         .then((response) => {
           this.$toastr.s(this.$t('message.service_deleted'));
           this.$router.replace({
-            path: '/projects/' + this.service.project.uuid,
+            path: '/projects/' + this.localService.project.uuid,
           });
         })
         .catch((error) => {
diff --git a/src/views/portfolio/tags/SelectTagModal.vue b/src/views/portfolio/tags/SelectTagModal.vue
index 763b484d8..aba3b7b06 100644
--- a/src/views/portfolio/tags/SelectTagModal.vue
+++ b/src/views/portfolio/tags/SelectTagModal.vue
@@ -4,7 +4,6 @@
     size="lg"
     hide-header-close
     no-stacking
-    v-permission="'VIEW_PORTFOLIO'"
     :title="$t('message.select_tag')"
   >
     <bootstrap-table
diff --git a/src/views/portfolio/tags/TagList.vue b/src/views/portfolio/tags/TagList.vue
index afe0b06f5..e84cd1a50 100644
--- a/src/views/portfolio/tags/TagList.vue
+++ b/src/views/portfolio/tags/TagList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="animated fadeIn" v-permission="PERMISSIONS.VIEW_PORTFOLIO">
+  <div class="animated fadeIn">
     <portfolio-widget-row :fetch="true" />
     <bootstrap-table
       ref="table"
@@ -46,10 +46,9 @@ export default {
   },
   mounted() {
     this.$refs.table.refreshOptions({
-      showBtnDeleteSelected: this.isPermitted([
+      showBtnDeleteSelected: this.hasPermission(
         this.PERMISSIONS.TAG_MANAGEMENT,
-        this.PERMISSIONS.TAG_MANAGEMENT_DELETE,
-      ]),
+      ),
     });
   },
   data() {
diff --git a/src/views/portfolio/tags/TaggedNotificationRuleListModal.vue b/src/views/portfolio/tags/TaggedNotificationRuleListModal.vue
index 8eacf0f42..bed7793c3 100644
--- a/src/views/portfolio/tags/TaggedNotificationRuleListModal.vue
+++ b/src/views/portfolio/tags/TaggedNotificationRuleListModal.vue
@@ -4,7 +4,7 @@
     size="lg"
     hide-header-close
     no-stacking
-    v-permission="'SYSTEM_CONFIGURATION'"
+    v-permission="PERMISSIONS.SYSTEM_CONFIGURATION"
     :title="$t('message.alerts_tagged_with', { tag: this.tag })"
   >
     <bootstrap-table
@@ -57,9 +57,8 @@ export default {
     const interval = setInterval(() => {
       if (this.$refs.table) {
         this.$refs.table.refreshOptions({
-          showBtnDeleteSelected: this.isPermitted([
+          showBtnDeleteSelected: this.hasPermission([
             this.PERMISSIONS.SYSTEM_CONFIGURATION,
-            this.PERMISSIONS.SYSTEM_CONFIGURATION_UPDATE,
           ]),
         });
         clearInterval(interval);
diff --git a/src/views/portfolio/tags/TaggedPoliciesListModal.vue b/src/views/portfolio/tags/TaggedPoliciesListModal.vue
index cb6f6e1b8..fe1a7a955 100644
--- a/src/views/portfolio/tags/TaggedPoliciesListModal.vue
+++ b/src/views/portfolio/tags/TaggedPoliciesListModal.vue
@@ -4,7 +4,7 @@
     size="lg"
     hide-header-close
     no-stacking
-    v-permission="'VIEW_PORTFOLIO'"
+    v-permission="PERMISSIONS.POLICY_MANAGEMENT"
     :title="$t('message.policies_tagged_with', { tag: this.tag })"
   >
     <bootstrap-table
@@ -57,9 +57,8 @@ export default {
     const interval = setInterval(() => {
       if (this.$refs.table) {
         this.$refs.table.refreshOptions({
-          showBtnDeleteSelected: this.isPermitted([
+          showBtnDeleteSelected: this.hasPermission([
             this.PERMISSIONS.POLICY_MANAGEMENT,
-            this.PERMISSIONS.POLICY_MANAGEMENT_UPDATE,
           ]),
         });
         clearInterval(interval);
diff --git a/src/views/portfolio/tags/TaggedProjectListModal.vue b/src/views/portfolio/tags/TaggedProjectListModal.vue
index bda5f11e2..aadb47be8 100644
--- a/src/views/portfolio/tags/TaggedProjectListModal.vue
+++ b/src/views/portfolio/tags/TaggedProjectListModal.vue
@@ -4,7 +4,9 @@
     size="lg"
     hide-header-close
     no-stacking
-    v-permission="'VIEW_PORTFOLIO'"
+    v-permission:complex="{
+      or: [PERMISSIONS.PORTFOLIO_MANAGEMENT, PERMISSIONS.TAG_MANAGEMENT],
+    }"
     :title="$t('message.projects_tagged_with', { tag: this.tag })"
   >
     <bootstrap-table
@@ -59,9 +61,8 @@ export default {
     const interval = setInterval(() => {
       if (this.$refs.table) {
         this.$refs.table.refreshOptions({
-          showBtnDeleteSelected: this.isPermitted([
+          showBtnDeleteSelected: this.hasPermission([
             this.PERMISSIONS.PORTFOLIO_MANAGEMENT,
-            this.PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
           ]),
         });
         clearInterval(interval);
diff --git a/src/views/portfolio/tags/TaggedVulnerabilityListModal.vue b/src/views/portfolio/tags/TaggedVulnerabilityListModal.vue
index de455825d..92ca42867 100644
--- a/src/views/portfolio/tags/TaggedVulnerabilityListModal.vue
+++ b/src/views/portfolio/tags/TaggedVulnerabilityListModal.vue
@@ -4,7 +4,7 @@
     size="lg"
     hide-header-close
     no-stacking
-    v-permission="'VIEW_PORTFOLIO'"
+    v-permission="PERMISSIONS.VULNERABILITY_MANAGEMENT"
     :title="$t('message.vulnerabilities_tagged_with', { tag: this.tag })"
   >
     <bootstrap-table
@@ -59,10 +59,9 @@ export default {
     const interval = setInterval(() => {
       if (this.$refs.table) {
         this.$refs.table.refreshOptions({
-          showBtnDeleteSelected: this.isPermitted([
+          showBtnDeleteSelected: this.hasPermission(
             this.PERMISSIONS.PORTFOLIO_MANAGEMENT,
-            this.PERMISSIONS.PORTFOLIO_MANAGEMENT_UPDATE,
-          ]),
+          ),
         });
         clearInterval(interval);
       }
diff --git a/src/views/portfolio/vulnerabilities/Vulnerability.vue b/src/views/portfolio/vulnerabilities/Vulnerability.vue
index 5d78507ea..fd3c3cb96 100644
--- a/src/views/portfolio/vulnerabilities/Vulnerability.vue
+++ b/src/views/portfolio/vulnerabilities/Vulnerability.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="animated fadeIn" v-permission="PERMISSIONS.VIEW_PORTFOLIO">
+  <div class="animated fadeIn">
     <b-card :no-body="true" footer-class="px-3 py-2 card-footer-action">
       <b-card-body class="p-3 clearfix">
         <b-row>
@@ -14,13 +14,13 @@
             </div>
             <div class="text-muted font-xs">
               <span class="text-lowercase font-weight-bold">
-                <span v-for="tag in vulnerability.tags">
+                <span v-for="tag in vulnerability.tags" :key="tag.name">
                   <b-badge
                     style="margin-right: 0.4rem"
                     :to="{ name: 'Vulnerabilities', query: { tag: tag.name } }"
                     variant="tag"
-                    >{{ tag.name }}</b-badge
-                  >
+                    >{{ tag.name }}
+                  </b-badge>
                 </span>
               </span>
             </div>
@@ -75,7 +75,10 @@
             class="font-weight-bold font-xs"
           >
             Aliases:
-            <span v-for="alias in resolveVulnAliases(vulnerability.aliases)">
+            <span
+              v-for="alias in resolveVulnAliases(vulnerability.aliases)"
+              :key="alias.vulnId"
+            >
               <b-link
                 style="margin-right: 1rem"
                 :href="`/vulnerabilities/${alias.source}/${encodeURIComponent(alias.vulnId)}`"
@@ -265,7 +268,7 @@
       </b-tab>
       <b-tab
         ref="affectedprojects"
-        v-if="isPermitted(PERMISSIONS.VIEW_VULNERABILITY)"
+        v-permission:and="[PERMISSIONS.PROJECT_READ, PERMISSIONS.FINDING_READ]"
         @click="routeTo('affectedProjects')"
       >
         <template v-slot:title
@@ -533,12 +536,12 @@ export default {
     },
   },
   watch: {
-    '$route.params.uuid'(newValue) {
+    '$route.params.uuid'() {
       EventBus.$emit('crumble');
       this.initializeData();
       this.loadData();
     },
-    '$route.params.vulnId'(newValue) {
+    '$route.params.vulnId'() {
       EventBus.$emit('crumble');
       this.initializeData();
       this.loadData();
diff --git a/src/views/portfolio/vulnerabilities/VulnerabilityDetailsModal.vue b/src/views/portfolio/vulnerabilities/VulnerabilityDetailsModal.vue
index 503a67124..4dc24e8cf 100644
--- a/src/views/portfolio/vulnerabilities/VulnerabilityDetailsModal.vue
+++ b/src/views/portfolio/vulnerabilities/VulnerabilityDetailsModal.vue
@@ -81,7 +81,12 @@
           </b-row>
           <b-form-group :label="this.$t('message.aliases')">
             <div class="list-group">
-              <span v-for="alias in resolveVulnAliases(vulnerability.aliases)">
+              <span
+                v-for="(alias, index) in resolveVulnAliases(
+                  vulnerability.aliases,
+                )"
+                :key="index"
+              >
                 <actionable-list-group-item
                   :value="alias.vulnId"
                   :delete-icon="false"
@@ -97,7 +102,7 @@
           </b-form-group>
           <b-form-group :label="this.$t('message.cwe')">
             <div class="list-group">
-              <span v-for="cwe in selectableCwes">
+              <span v-for="(cwe, index) in selectableCwes" :key="index">
                 <actionable-list-group-item
                   :value="'CWE-' + cwe.cweId"
                   :delete-icon="!isReadonly"
@@ -123,12 +128,7 @@
                 @tags-changed="(newTags) => (this.tags = newTags)"
                 class="mw-100 bg-transparent text-lowercase"
                 style="min-width: 90%"
-                :readonly="
-                  this.isNotPermitted([
-                    PERMISSIONS.VULNERABILITY_MANAGEMENT,
-                    PERMISSIONS.VULNERABILITY_MANAGEMENT_UPDATE,
-                  ])
-                "
+                :readonly="!hasPermission(PERMISSIONS.VULNERABILITY_MANAGEMENT)"
               />
               <b-input-group-append v-show="isReadonly">
                 <b-form-group>
@@ -136,10 +136,7 @@
                     size="md"
                     variant="primary"
                     @click="updateVulnerabilityTags()"
-                    v-permission:or="[
-                      PERMISSIONS.VULNERABILITY_MANAGEMENT,
-                      PERMISSIONS.VULNERABILITY_MANAGEMENT_UPDATE,
-                    ]"
+                    v-permission="PERMISSIONS.VULNERABILITY_MANAGEMENT"
                   >
                     {{ $t('message.update') }}
                   </b-button>
@@ -974,10 +971,7 @@
           vulnerability.components && vulnerability.components.length > 0
         "
         v-show="!isReadonly"
-        v-permission:or="[
-          PERMISSIONS.VULNERABILITY_MANAGEMENT,
-          PERMISSIONS.VULNERABILITY_MANAGEMENT_DELETE,
-        ]"
+        v-permission="PERMISSIONS.VULNERABILITY_MANAGEMENT"
         >{{ $t('message.delete') }}</b-button
       >
       <b-button size="md" variant="secondary" @click="cancel()">{{
@@ -988,10 +982,7 @@
         variant="primary"
         @click="updateVulnerability()"
         v-show="!isReadonly"
-        v-permission:or="[
-          PERMISSIONS.VULNERABILITY_MANAGEMENT,
-          PERMISSIONS.VULNERABILITY_MANAGEMENT_UPDATE,
-        ]"
+        v-permission="PERMISSIONS.VULNERABILITY_MANAGEMENT"
         >{{ $t('message.update') }}</b-button
       >
     </template>
@@ -1642,7 +1633,7 @@ export default {
       ];
       this.canChange =
         this.vulnerability.source === 'INTERNAL' &&
-        this.isPermitted(this.PERMISSIONS.VULNERABILITY_MANAGEMENT);
+        this.hasPermission(this.PERMISSIONS.VULNERABILITY_MANAGEMENT);
       if (this.canChange) {
         columns.push({
           title: 'Actions',
@@ -1727,10 +1718,8 @@ export default {
     },
     isReadonly() {
       return (
-        this.isNotPermitted([
-          this.PERMISSIONS.VULNERABILITY_MANAGEMENT,
-          this.PERMISSIONS.VULNERABILITY_MANAGEMENT_UPDATE,
-        ]) || this.vulnerability.source !== 'INTERNAL'
+        !this.hasPermission(this.PERMISSIONS.VULNERABILITY_MANAGEMENT) ||
+        this.vulnerability.source !== 'INTERNAL'
       );
     },
   },
diff --git a/src/views/portfolio/vulnerabilities/VulnerabilityList.vue b/src/views/portfolio/vulnerabilities/VulnerabilityList.vue
index b053c3a7d..f58a43252 100644
--- a/src/views/portfolio/vulnerabilities/VulnerabilityList.vue
+++ b/src/views/portfolio/vulnerabilities/VulnerabilityList.vue
@@ -1,15 +1,12 @@
 <template>
-  <div class="animated fadeIn" v-permission="'VIEW_PORTFOLIO'">
+  <div class="animated fadeIn">
     <portfolio-widget-row :fetch="true" />
     <div id="vulnerabilitiesToolbar" class="bs-table-custom-toolbar">
       <b-button
         size="md"
         variant="outline-primary"
         v-b-modal.vulnerabilityCreateVulnerabilityModal
-        v-permission:or="[
-          PERMISSIONS.VULNERABILITY_MANAGEMENT,
-          PERMISSIONS.VULNERABILITY_MANAGEMENT_CREATE,
-        ]"
+        v-permission="PERMISSIONS.VULNERABILITY_MANAGEMENT"
       >
         <span class="fa fa-plus"></span>
         {{ $t('message.create_vulnerability') }}