diff --git a/packages/nc-gui/composables/index.ts b/packages/nc-gui/composables/index.ts
index 5fd560cb5c..8f49f15ea0 100644
--- a/packages/nc-gui/composables/index.ts
+++ b/packages/nc-gui/composables/index.ts
@@ -2,6 +2,7 @@ export * from './useApi'
 export * from './useDialog'
 export * from './useGlobal'
 export * from './useInjectionState'
+export * from './useRoles'
 export * from './useSidebar'
 export * from './useTheme'
 export * from './useUIPermission'
diff --git a/packages/nc-gui/composables/useProject.ts b/packages/nc-gui/composables/useProject.ts
index 30d075961f..1ed25b61c6 100644
--- a/packages/nc-gui/composables/useProject.ts
+++ b/packages/nc-gui/composables/useProject.ts
@@ -3,7 +3,6 @@ import type { OracleUi, ProjectType, TableType } from 'nocodb-sdk'
 import { SqlUiFactory } from 'nocodb-sdk'
 import { isString } from '@vueuse/core'
 import {
-  USER_PROJECT_ROLES,
   computed,
   createEventHook,
   ref,
@@ -11,12 +10,12 @@ import {
   useGlobal,
   useInjectionState,
   useNuxtApp,
+  useRoles,
   useRoute,
-  useState,
   useTheme,
   watch,
 } from '#imports'
-import type { ProjectMetaInfo, ProjectRole, Roles } from '~/lib'
+import type { ProjectMetaInfo } from '~/lib'
 import type { ThemeConfig } from '@/composables/useTheme'
 
 const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
@@ -30,14 +29,14 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
 
   const { setTheme, theme } = useTheme()
 
+  const { projectRoles, loadProjectRoles } = useRoles()
+
   const projectLoadedHook = createEventHook<ProjectType>()
 
   const project = ref<ProjectType>({})
 
   const tables = ref<TableType[]>([])
 
-  const projectRoles = useState<Roles<ProjectRole>>(USER_PROJECT_ROLES, () => ({}))
-
   const projectMetaInfo = ref<ProjectMetaInfo | undefined>()
 
   const projectId = computed(() => (_projectId ? unref(_projectId) : (route.params.projectId as string)))
@@ -72,26 +71,6 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
     }
   }
 
-  async function loadProjectRoles() {
-    projectRoles.value = {}
-
-    if (isSharedBase.value) {
-      const user = await api.auth.me(
-        {},
-        {
-          headers: {
-            'xc-shared-base-id': route.params.projectId,
-          },
-        },
-      )
-
-      projectRoles.value = user.roles
-    } else if (project.value.id) {
-      const user = await api.auth.me({ project_id: project.value.id })
-      projectRoles.value = user.roles
-    }
-  }
-
   async function loadTables() {
     if (project.value.id) {
       const tablesResponse = await api.dbTable.list(project.value.id, {
@@ -121,7 +100,7 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
       return
     }
 
-    await loadProjectRoles()
+    await loadProjectRoles(project.value.id || (route.params.projectId as string), isSharedBase.value)
 
     await loadTables()
 
diff --git a/packages/nc-gui/composables/useRoles/index.ts b/packages/nc-gui/composables/useRoles/index.ts
new file mode 100644
index 0000000000..ead8ad2355
--- /dev/null
+++ b/packages/nc-gui/composables/useRoles/index.ts
@@ -0,0 +1,62 @@
+import { isString } from '@vueuse/core'
+import { computed, ref, useApi, useGlobal, useInjectionState } from '#imports'
+import type { ProjectRole, Role, Roles } from '~/lib'
+
+const [setup, use] = useInjectionState(() => {
+  const { user } = useGlobal()
+
+  const { api } = useApi()
+
+  const projectRoles = ref<Roles<ProjectRole>>({})
+
+  const userRoles = computed<Roles<Role>>(() => {
+    let userRoles = user.value?.roles ?? {}
+
+    // if string populate key-value paired object
+    if (isString(userRoles)) {
+      userRoles = userRoles.split(',').reduce<Roles>((acc, role) => {
+        acc[role] = true
+        return acc
+      }, {})
+    }
+
+    return userRoles
+  })
+
+  async function loadProjectRoles(projectId: string, isSharedBase: boolean) {
+    projectRoles.value = {}
+
+    if (isSharedBase) {
+      const user = await api.auth.me(
+        {},
+        {
+          headers: {
+            'xc-shared-base-id': projectId,
+          },
+        },
+      )
+
+      projectRoles.value = user.roles
+    } else if (projectId) {
+      const user = await api.auth.me({ project_id: projectId })
+      projectRoles.value = user.roles
+    }
+  }
+
+  const allRoles = computed<Roles>(() => ({
+    ...userRoles.value,
+    ...projectRoles.value,
+  }))
+
+  return { allRoles, userRoles, projectRoles, loadProjectRoles }
+}, 'useRoles')
+
+export function useRoles() {
+  const roles = use()
+
+  if (!roles) {
+    return setup()
+  }
+
+  return roles
+}