diff --git a/app/src/components/AddResourceCard.vue b/app/src/components/AddResourceCard.vue
new file mode 100644
index 00000000..4df7dafb
--- /dev/null
+++ b/app/src/components/AddResourceCard.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="card bg-green-100 flex justify-center items-center border">
+    <div class="card-body flex justify-center items-center">
+      <span class="font-bold">{{ props.text }}</span>
+
+      <div class="w-5 h-5 cursor-pointer" @click="emits('openAddResourceModal')">
+        <PlusCircleIcon class="size-6" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PlusCircleIcon } from '@heroicons/vue/24/outline'
+const emits = defineEmits(['openAddResourceModal'])
+const props = defineProps(['text'])
+</script>
diff --git a/app/src/components/TheDrawer.vue b/app/src/components/TheDrawer.vue
index 78772538..d3132d50 100644
--- a/app/src/components/TheDrawer.vue
+++ b/app/src/components/TheDrawer.vue
@@ -43,6 +43,12 @@
           Transactions
         </RouterLink>
       </li>
+      <li>
+        <RouterLink to="/roles">
+          <IdentificationIcon class="size-6" />
+          Roles
+        </RouterLink>
+      </li>
     </ul>
   </div>
 </template>
@@ -56,7 +62,12 @@ li {
 </style>
 
 <script setup lang="ts">
-import { HomeIcon, UsersIcon, ClipboardDocumentListIcon } from '@heroicons/vue/24/outline'
+import {
+  HomeIcon,
+  UsersIcon,
+  ClipboardDocumentListIcon,
+  IdentificationIcon
+} from '@heroicons/vue/24/outline'
 import { computed } from 'vue'
 
 interface User {
diff --git a/app/src/components/forms/roles/AddEntitlementForm.vue b/app/src/components/forms/roles/AddEntitlementForm.vue
new file mode 100644
index 00000000..d2439a5b
--- /dev/null
+++ b/app/src/components/forms/roles/AddEntitlementForm.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="space-y-2">
+    <label class="input input-bordered flex items-center gap-2 input-md mt-4">
+      <span class="w-24">Type</span>
+      <select v-model="entitlement.entitlementTypeId" class="grow bg-white">
+        <option v-for="item in availableTypes" :key="item.id" :value="item.id">
+          {{ item.name }}
+        </option>
+      </select>
+    </label>
+    <label
+      class="input input-bordered flex items-center gap-2 input-md"
+      :class="{ 'input-error': $v.$errors.length }"
+    >
+      <span class="w-24">Value</span>
+      <EntitlementValueForm v-model="entitlement" />
+    </label>
+    <FormErrorMessage v-if="$v.$errors.length">
+      <div v-for="error of $v.$errors" :key="error.$uid">
+        {{ error.$message }}
+      </div>
+    </FormErrorMessage>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, type ComputedRef, watch } from 'vue'
+import EntitlementValueForm from './entitlement-value/EntitlementValueForm.vue'
+import { useVuelidate } from '@vuelidate/core'
+import FormErrorMessage from '../../ui/FormErrorMessage.vue'
+
+const entitlement = defineModel({
+  default: {
+    entitlementTypeId: 0,
+    value: '',
+    isInit: true //so entitlement value isn't cleared on load
+  }
+})
+
+const $v = useVuelidate()
+
+const props = defineProps<{
+  availableTypes: ComputedRef<{ id: number; name: string }[]>
+}>()
+
+const availableTypes = ref(props.availableTypes)
+
+watch(
+  () => entitlement.value.entitlementTypeId,
+  (newType, oldType) => {
+    if (!entitlement.value.isInit && newType !== oldType && oldType !== 0) {
+      entitlement.value.value = ''
+    }
+  }
+)
+</script>
diff --git a/app/src/components/forms/roles/AddRoleCategoryForm.vue b/app/src/components/forms/roles/AddRoleCategoryForm.vue
new file mode 100644
index 00000000..51474a83
--- /dev/null
+++ b/app/src/components/forms/roles/AddRoleCategoryForm.vue
@@ -0,0 +1,286 @@
+<template>
+  <div>
+    <h1 class="font-bold text-2xl">{{ isNew ? 'Create' : 'Update' }} Role Category</h1>
+    <hr class="mt-4" />
+  </div>
+
+  <div class="max-h-[70vh] overflow-y-auto p-2">
+    <!--General Inputs-->
+    <section class="flex flex-col gap-2">
+      <label
+        class="input input-bordered flex items-center gap-2 input-md mt-4"
+        :class="{ 'input-error': $v.roleCategory.name.$errors.length }"
+      >
+        <span class="w-24">Name</span>
+        <input
+          type="text"
+          class="grow"
+          placeholder="Enter a role category name"
+          v-model="roleCategory.name"
+          @input="
+            async () => {
+              await $v.$validate()
+            }
+          "
+        />
+      </label>
+      <FormErrorMessage v-if="$v.roleCategory.name.$errors.length">
+        <div v-for="error of $v.roleCategory.name.$errors" :key="error.$uid">
+          {{ error.$message }}
+        </div>
+      </FormErrorMessage>
+
+      <label class="input input-bordered flex items-center gap-2 input-md">
+        <span class="w-24">Description</span>
+        <input
+          type="text"
+          class="grow"
+          placeholder="Enter a short description"
+          v-model="roleCategory.description"
+        />
+      </label>
+    </section>
+
+    <div v-if="props.isNew">
+      <!--Roles-->
+      <section class="mt-10">
+        <div
+          v-for="(input, index) in roleCategory.roles"
+          :key="index"
+          class="collapse collapse-plus bg-base-200 border mt-2"
+        >
+          <input type="radio" name="my-accordion-3" />
+          <div class="collapse-title text-xl font-medium">
+            Role - {{ input.name ? input.name : index + 1 }}
+          </div>
+          <div class="collapse-content">
+            <AddRoleForm v-model="roleCategory.roles[index]" />
+          </div>
+        </div>
+      </section>
+
+      <!--Roles Add Remove Roles Buttons-->
+      <div class="flex justify-end pt-3">
+        <div
+          class="w-6 h-6 cursor-pointer"
+          @click="
+            () => {
+              if (roleCategory.roles.length > 1) {
+                roleCategory.roles.pop()
+              }
+            }
+          "
+        >
+          <MinusCircleIcon class="size-6" />
+        </div>
+        <div
+          class="w-6 h-6 cursor-pointer"
+          @click="
+            () => {
+              roleCategory.roles.push({
+                name: '',
+                description: '',
+                entitlements: [
+                  {
+                    entitlementTypeId: 0,
+                    value: ''
+                  }
+                ]
+              })
+            }
+          "
+        >
+          <PlusCircleIcon class="size-6" />
+        </div>
+      </div>
+    </div>
+
+    <!--Role Category Entitlements-->
+    <section class="join join-vertical w-full mt-10">
+      <div
+        v-for="(input, index) in roleCategory.entitlements"
+        :key="index"
+        class="collapse collapse-arrow join-item border-base-300 border"
+      >
+        <input type="radio" name="category-entitlement-accordion" />
+        <div class="collapse-title text-l font-medium">
+          Category Entitlement -
+          {{ getEntitlementName(input.entitlementTypeId as unknown as number) ?? index + 1 }}
+        </div>
+        <div class="collapse-content">
+          <AddEntitlementForm
+            v-model="roleCategory.entitlements[index]"
+            :available-types="getAvailableTypes(index)"
+          />
+        </div>
+      </div>
+    </section>
+
+    <!--Role Category Entitlements Add Remove Buttons-->
+    <div class="flex justify-end pt-3">
+      <div
+        class="w-6 h-6 cursor-pointer"
+        @click="
+          () => {
+            if (roleCategory.entitlements.length > 1) {
+              roleCategory.entitlements.pop()
+            }
+          }
+        "
+      >
+        <MinusCircleIcon class="size-6" />
+      </div>
+      <div
+        class="w-6 h-6 cursor-pointer"
+        @click="
+          () => {
+            roleCategory.entitlements.push({
+              entitlementTypeId: 0,
+              value: ''
+            })
+          }
+        "
+      >
+        <PlusCircleIcon class="size-6" />
+      </div>
+    </div>
+  </div>
+  <!--Submit Button-->
+  <div class="modal-action justify-center">
+    <!-- if there is a button in form, it will close the modal -->
+    <LoadingButton v-if="isLoading" color="primary min-w-24" />
+    <button class="btn btn-primary" @click="handleClickCreate" v-else-if="isNew">Create</button>
+    <button v-else class="btn btn-primary" @click="handleClickUpdate">Update</button>
+    <button class="btn btn-active" @click="emits('closeModal')">Cancel</button>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { PlusCircleIcon, MinusCircleIcon } from '@heroicons/vue/24/outline'
+import FormErrorMessage from '@/components/ui/FormErrorMessage.vue'
+import LoadingButton from '@/components/ui/LoadingButton.vue'
+import AddRoleForm from './AddRoleForm.vue'
+import AddEntitlementForm from './AddEntitlementForm.vue'
+import { useCustomFetch } from '@/composables/useCustomFetch'
+import { useVuelidate } from '@vuelidate/core'
+import { required } from '@vuelidate/validators'
+
+const roleCategory = defineModel({
+  default: {
+    name: '',
+    description: '',
+    roles: [
+      {
+        name: '',
+        description: '',
+        entitlements: [
+          {
+            entitlementTypeId: 0,
+            value: ''
+          }
+        ]
+      }
+    ],
+    entitlements: [
+      {
+        entitlementTypeId: 0,
+        value: ''
+      }
+    ]
+  }
+})
+
+//#region validation
+const rules = {
+  roleCategory: {
+    name: { required }
+  }
+}
+
+const $v = useVuelidate(rules, { roleCategory })
+//#endregion validation
+
+const roleCategoryEndPoint = ref('')
+
+const {
+  //isFetching: isCreateRoleCategoryFetching,
+  //error: isCreateRoleCategoryError,
+  execute: executeCreateRoleCategory /*,
+  data: _roleCategory*/
+} = useCustomFetch(`role-category/`, {
+  immediate: false
+})
+  .post(roleCategory)
+  .json()
+
+const {
+  //error: isGetEntTypesError,
+  execute: executeFetchEntitlementTypes,
+  data: _entTypes
+} = useCustomFetch<{ success: boolean; entTypes: { id: number; name: string } }>(
+  `entitlement/types`,
+  {
+    immediate: false
+  }
+)
+  .get()
+  .json()
+
+const {
+  execute: executeUpdateRoleCategory
+} = useCustomFetch(roleCategoryEndPoint, {
+  immediate: false
+})
+  .put(roleCategory)
+  .json()
+
+const getAvailableTypes = (index: number) => {
+  return computed(() => {
+    const selectedTypes = roleCategory.value.entitlements.map(
+      (entitlement) => entitlement.entitlementTypeId
+    )
+
+    return _entTypes.value?.entTypes.filter(
+      (type: { id: number; name: string }) =>
+        type.id === -1 ||
+        !selectedTypes.includes(type.id) ||
+        roleCategory.value.entitlements[index].entitlementTypeId === type.id
+    )
+  })
+}
+
+const getEntitlementName = (typeId: number) => {
+  const entitlement = _entTypes.value?.entTypes.find(
+    (ent: { id: number; name: string }) => ent.id === typeId
+  )
+  return entitlement ? entitlement.name : undefined
+}
+
+const handleClickCreate = async () => {
+  await $v.value.$validate()
+  if ($v.value.$errors.length) {
+    console.log('Errors found, aborting submission: ', $v.value)
+    return
+  }
+  await executeCreateRoleCategory()
+  emits('createRoleCategory')
+}
+
+const handleClickUpdate = async () => {
+  roleCategoryEndPoint.value = `role-category`
+  await executeUpdateRoleCategory()
+  emits('closeModal')
+  emits('reload')
+}
+
+const emits = defineEmits(['createRoleCategory', 'searchUsers', 'closeModal', 'reload'])
+const props = defineProps<{
+  isNew?: boolean
+  categoryId?: number
+  isLoading: boolean
+}>()
+
+onMounted(async () => {
+  await executeFetchEntitlementTypes()
+})
+</script>
diff --git a/app/src/components/forms/roles/AddRoleForm.vue b/app/src/components/forms/roles/AddRoleForm.vue
new file mode 100644
index 00000000..7236dffc
--- /dev/null
+++ b/app/src/components/forms/roles/AddRoleForm.vue
@@ -0,0 +1,228 @@
+<template>
+  <!--Heading-->
+  <header v-if="props.isSingleView" class="mb-5">
+    <h1 class="font-bold text-2xl">Role Details</h1>
+    <hr class="mt-4" />
+  </header>
+
+  <!--Name, Description Inputs-->
+  <div class="space-y-2">
+    <label
+      class="input input-bordered flex items-center gap-2 input-md mt-4"
+      :class="{ 'input-error': $v.role.$errors.length }"
+    >
+      <span class="w-24">Name</span>
+      <input
+        type="text"
+        class="grow"
+        placeholder="Role name"
+        v-model="role.name"
+        @input="
+          async () => {
+            await $v.$validate()
+          }
+        "
+      />
+    </label>
+    <FormErrorMessage v-if="$v.role.$errors.length">
+      <div v-for="error of $v.role.$errors" :key="error.$uid">{{ error.$message }}</div>
+    </FormErrorMessage>
+    <label class="input input-bordered flex items-center gap-2 input-md">
+      <span class="w-24">Description</span>
+      <input
+        type="text"
+        class="grow"
+        placeholder="Enter a short description"
+        v-model="role.description"
+      />
+    </label>
+  </div>
+
+  <!--Entitlements Section-->
+  <div class="join join-vertical w-full mt-5 bg-white">
+    <div
+      v-for="(input, index) in role.entitlements"
+      :key="index"
+      class="collapse collapse-arrow join-item border-base-300 border"
+    >
+      <input type="radio" name="entitlement-accordion" />
+      <div class="collapse-title text-l font-medium">
+        Entitlement -
+        {{ getEntitlementName(input.entitlementTypeId as unknown as number) ?? index + 1 }}
+      </div>
+      <div class="collapse-content">
+        <AddEntitlementForm
+          v-model="role.entitlements[index]"
+          :available-types="getAvailableTypes(index)"
+        />
+      </div>
+    </div>
+  </div>
+
+  <!--Add, Remove Buttons-->
+  <div class="flex justify-end pt-3">
+    <div
+      class="w-6 h-6 cursor-pointer"
+      @click="
+        () => {
+          if (role.entitlements.length > 1) {
+            role.entitlements.pop()
+          }
+        }
+      "
+    >
+      <MinusCircleIcon class="size-6" />
+    </div>
+    <div
+      class="w-6 h-6 cursor-pointer"
+      @click="
+        () => {
+          role?.entitlements?.push({ entitlementTypeId: 0, value: '' })
+        }
+      "
+    >
+      <PlusCircleIcon class="size-6" />
+    </div>
+  </div>
+
+  <!--Cancel Update Buttons-->
+  <footer v-if="props.isSingleView" class="flex justify-center space-x-2 mt-4">
+    <button
+      v-if="props.categoryId"
+      class="btn btn-primary"
+      @click="handleClickAddRole(props.categoryId)"
+    >
+      Add Role
+    </button>
+    <button v-else class="btn btn-primary" @click="handleClickUpdate()">
+      Update
+    </button>
+    <button
+      class="btn btn-active"
+      @click="
+        () => {
+          emits('closeModal')
+          emits('reload')
+        }
+      "
+    >
+      Cancel
+    </button>
+  </footer>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useCustomFetch } from '@/composables/useCustomFetch'
+import { PlusCircleIcon, MinusCircleIcon } from '@heroicons/vue/24/outline'
+import AddEntitlementForm from './AddEntitlementForm.vue'
+import FormErrorMessage from '../../ui/FormErrorMessage.vue'
+import type { EntitlementType } from '@/types'
+import { useVuelidate } from '@vuelidate/core'
+import { required } from '@vuelidate/validators'
+import { useToastStore } from '@/stores/useToastStore'
+
+const { addErrorToast } = useToastStore()
+
+const getEntitlementName = (typeId: number) => {
+  const entitlement = entTypes.value?.entTypes?.find(
+    (entType: EntitlementType) => entType.id === typeId
+  )
+  return entitlement ? entitlement.name : undefined
+}
+
+const getAvailableTypes = (index: number) => {
+  return computed(() => {
+    const selectedTypes = role?.value?.entitlements?.map(
+      (entitlement) => entitlement.entitlementTypeId
+    )
+    return entTypes.value?.entTypes?.filter(
+      (entType: EntitlementType) =>
+        entType.id === -1 ||
+        !selectedTypes?.includes(entType.id) ||
+        role?.value?.entitlements[index].entitlementTypeId === entType.id
+    )
+  })
+}
+
+const emits = defineEmits(['closeModal', 'reload'])
+
+const role = defineModel({
+  default: {
+    name: '',
+    description: '',
+    entitlements: [
+      {
+        entitlementTypeId: 0,
+        value: ''
+      }
+    ]
+  }
+})
+
+//#region validation
+const rules = {
+  role: {
+    name: { required }
+  }
+}
+
+const $v = useVuelidate(rules, { role })
+//#endregion validation
+
+const props = defineProps<{
+  isSingleView?: boolean
+  categoryId?: number
+}>()
+const roleEndPoint = ref('')
+
+const { execute: executeFetchEntitlementTypes, data: entTypes } = useCustomFetch<{
+  success: boolean
+  entTypes: { id: number; name: string }
+}>(`entitlement/types`, {
+  immediate: false
+})
+  .get()
+  .json()
+
+const { execute: executeUpdateRole } = useCustomFetch(roleEndPoint, {
+  immediate: false
+})
+  .put(role)
+  .json()
+
+const { execute: executeCreateRole } = useCustomFetch(roleEndPoint, {
+  immediate: false
+})
+  .post(role)
+  .json()
+
+const handleClickUpdate = async () => {
+  await $v.value.$validate()
+  if ($v.value.$errors.length) {
+    addErrorToast('Form invalid, arboting...')
+    return
+  }
+  roleEndPoint.value = `role/`
+
+  await executeUpdateRole()
+  emits('reload')
+  emits('closeModal')
+}
+
+const handleClickAddRole = async (id: number) => {
+  await $v.value.$validate()
+  if ($v.value.$errors.length) {
+    addErrorToast('Form invalid, arboting...')
+    return
+  }
+  roleEndPoint.value = `role/${id}`
+  await executeCreateRole()
+  emits('reload')
+  emits('closeModal')
+}
+
+onMounted(async () => {
+  await executeFetchEntitlementTypes()
+})
+</script>
diff --git a/app/src/components/forms/roles/entitlement-value/AccessValueForm.vue b/app/src/components/forms/roles/entitlement-value/AccessValueForm.vue
new file mode 100644
index 00000000..293e0e84
--- /dev/null
+++ b/app/src/components/forms/roles/entitlement-value/AccessValueForm.vue
@@ -0,0 +1,98 @@
+<template>
+  <select
+    v-model="selectedResource"
+    class="grow bg-white"
+    @input="
+      async () => {
+        await $v.$validate()
+      }
+    "
+  >
+    <option>-- Resource --</option>
+    <option v-for="(item, index) in options.resources" :key="index">
+      {{ item }}
+    </option>
+  </select>
+
+  <select
+    v-model="selectedAcessLevel"
+    class="grow bg-white"
+    @input="
+      async () => {
+        await $v.$validate()
+      }
+    "
+  >
+    <option>-- Access Level --</option>
+    <option v-for="(item, index) in options.levels" :key="index">
+      {{ item }}
+    </option>
+  </select>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import { useVuelidate } from '@vuelidate/core'
+import { helpers, required } from '@vuelidate/validators'
+
+const options = ref({
+  resources: ['teams', 'roles', 'app', 'expense-account'],
+  levels: ['create', 'delete', 'update', 'read']
+})
+
+const entitlement = defineModel({
+  default: {
+    value: '',
+    entitlementTypeId: 0
+  }
+})
+
+const initResource = computed(() => {
+  const entValue = entitlement.value.value
+  if (entValue) {
+    return entValue.split(`:`)[0]
+  } else {
+    return `-- Resource --`
+  }
+})
+
+const initAccessLevel = computed(() => {
+  const entValue = entitlement.value.value
+  if (entValue) {
+    return entValue.split(`:`)[1]
+  } else {
+    return `-- Access Level --`
+  }
+})
+
+const selectedResource = ref<string | null>(initResource.value)
+const selectedAcessLevel = ref<string | null>(initAccessLevel.value)
+
+//#region validate
+const customValidators = {
+  validResource: (value: string) => options.value.resources.includes(value),
+  validLevel: (value: string) => options.value.levels.includes(value)
+}
+
+const rules = {
+  selectedResource: {
+    required,
+    validOption: helpers.withMessage('Please select a resource', customValidators.validResource)
+  },
+  selectedAcessLevel: {
+    required,
+    validOption: helpers.withMessage('Please select an access level', customValidators.validLevel)
+  }
+}
+
+const $v = useVuelidate(rules, { selectedResource, selectedAcessLevel })
+//#endregion validate
+
+watch([selectedResource, selectedAcessLevel], ([resource, level]) => {
+  if (resource === `-- Resource --` || level === `-- Access Level --`) {
+    entitlement.value.value = ''
+  } else {
+    entitlement.value.value = `${resource}:${level}`
+  }
+})
+</script>
diff --git a/app/src/components/forms/roles/entitlement-value/DividendValueForm.vue b/app/src/components/forms/roles/entitlement-value/DividendValueForm.vue
new file mode 100644
index 00000000..c76d3521
--- /dev/null
+++ b/app/src/components/forms/roles/entitlement-value/DividendValueForm.vue
@@ -0,0 +1,80 @@
+<template>
+  <input
+    type="text"
+    class="w-24"
+    placeholder="Put amount"
+    v-model="amount"
+    @input="
+      async () => {
+        await $v.$validate()
+      }
+    "
+  />
+  <span>/token,</span>
+  <select v-model="selectedFrequency" class="grow bg-white">
+    <option>-- Frequency --</option>
+    <option v-for="(item, index) in options" :key="index">
+      {{ item }}
+    </option>
+  </select>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import { useVuelidate } from '@vuelidate/core'
+import { numeric, helpers, required, minValue, maxValue } from '@vuelidate/validators'
+
+const options = ref(['quarterly', 'half-yearly', 'yearly'])
+
+const entitlement = defineModel({
+  default: {
+    value: '',
+    entitlementTypeId: 0
+  }
+})
+
+const initAmount = computed(() => {
+  const entValue = entitlement.value.value
+  if (entValue) {
+    return entValue.split(`:`)[0]
+  } else {
+    return ``
+  }
+})
+
+const initFrequency = computed(() => {
+  const entValue = entitlement.value.value
+  if (entValue) {
+    return entValue.split(`:`)[1]
+  } else {
+    return `-- Frequency --`
+  }
+})
+
+const amount = ref<string | null>(initAmount.value)
+const selectedFrequency = ref<string | null>(initFrequency.value)
+
+//#region validate
+const validOption = (value: string) => options.value.includes(value)
+
+const rules = {
+  amount: {
+    numeric,
+    required,
+    minValue: minValue(1),
+    maxValue: maxValue(100)
+  },
+  selectedFrequency: { validOption: helpers.withMessage('Please select a frequency', validOption) }
+}
+
+const $v = useVuelidate(rules, { amount, selectedFrequency })
+//#endregion validate
+
+watch([amount, selectedFrequency], ([amount, frequency]) => {
+  if (amount === `` || frequency === `-- Frequency --`) {
+    entitlement.value.value = ''
+  } else {
+    entitlement.value.value = `${amount}:${frequency}`
+  }
+})
+</script>
diff --git a/app/src/components/forms/roles/entitlement-value/EntitlementValueForm.vue b/app/src/components/forms/roles/entitlement-value/EntitlementValueForm.vue
new file mode 100644
index 00000000..bec66e47
--- /dev/null
+++ b/app/src/components/forms/roles/entitlement-value/EntitlementValueForm.vue
@@ -0,0 +1,48 @@
+<template>
+  <AccessValueForm v-if="entName === `access`" v-model="entitlement" />
+  <WageValueForm v-if="entName === `wage`" v-model="entitlement" />
+  <TokenValueForm v-if="entName === `tokens`" v-model="entitlement" />
+  <DividendValueForm v-if="entName === `dividend`" v-model="entitlement" />
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import { useCustomFetch } from '@/composables/useCustomFetch'
+import AccessValueForm from './AccessValueForm.vue'
+import WageValueForm from './WageValueForm.vue'
+import TokenValueForm from './TokenValueForm.vue'
+import DividendValueForm from './DividendValueForm.vue'
+import { useVuelidate } from '@vuelidate/core'
+
+useVuelidate()
+
+const { execute: getEntTypesAPI, data: entTypes } = useCustomFetch<{
+  success: boolean
+  entTypes: { id: number; name: string }
+}>(`entitlement/types`, {
+  immediate: false
+})
+  .get()
+  .json()
+
+const entitlement = defineModel({
+  default: {
+    value: '',
+    entitlementTypeId: 0
+  }
+})
+
+const entName = computed(() => {
+  const index = entTypes.value?.entTypes?.findIndex((item: { id: number; name: string }) => {
+    return item.id === entitlement.value.entitlementTypeId
+  })
+
+  if (index > -1) {
+    return entTypes.value.entTypes[index].name
+  } else return `-- Create New --`
+})
+
+onMounted(async () => {
+  await getEntTypesAPI()
+})
+</script>
diff --git a/app/src/components/forms/roles/entitlement-value/TokenValueForm.vue b/app/src/components/forms/roles/entitlement-value/TokenValueForm.vue
new file mode 100644
index 00000000..bb729bd5
--- /dev/null
+++ b/app/src/components/forms/roles/entitlement-value/TokenValueForm.vue
@@ -0,0 +1,40 @@
+<template>
+  <input
+    type="text"
+    class="w-24"
+    placeholder="Put percentage"
+    v-model="entitlement.value"
+    @input="
+      async () => {
+        await $v.$validate()
+      }
+    "
+  />
+  <span class="grow">of total supply</span>
+</template>
+
+<script setup lang="ts">
+import { useVuelidate } from '@vuelidate/core'
+import { required, numeric, minValue, maxValue } from '@vuelidate/validators'
+const entitlement = defineModel({
+  default: {
+    value: '',
+    entitlementTypeId: 0
+  }
+})
+
+//#region validate
+const rules = {
+  entitlement: {
+    value: {
+      required,
+      numeric,
+      minValue: minValue(1),
+      maxValue: maxValue(100)
+    }
+  }
+}
+
+const $v = useVuelidate(rules, { entitlement })
+//#endregion validate
+</script>
diff --git a/app/src/components/forms/roles/entitlement-value/WageValueForm.vue b/app/src/components/forms/roles/entitlement-value/WageValueForm.vue
new file mode 100644
index 00000000..4a282a82
--- /dev/null
+++ b/app/src/components/forms/roles/entitlement-value/WageValueForm.vue
@@ -0,0 +1,86 @@
+<template>
+  <input
+    type="text"
+    class="w-24"
+    placeholder="Enter amount"
+    v-model="amount"
+    @input="
+      async () => {
+        await $v.$validate()
+      }
+    "
+  />
+  <span>per</span>
+  <select v-model="selectedFrequency" class="grow bg-white">
+    <option>-- Frequency --</option>
+    <option v-for="(item, index) in options" :key="index">
+      {{ item }}
+    </option>
+  </select>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import { useVuelidate } from '@vuelidate/core'
+import { numeric, required, helpers } from '@vuelidate/validators'
+
+const options = ref(['hour', 'week', 'month'])
+
+const entitlement = defineModel({
+  default: {
+    value: '',
+    entitlementTypeId: 0
+  }
+})
+
+const initAmount = computed(() => {
+  const entValue = entitlement.value.value
+  if (entValue) {
+    return entValue.split(`:`)[0]
+  } else {
+    return ``
+  }
+})
+
+const initFrequency = computed(() => {
+  const entValue = entitlement.value.value
+  if (entValue) {
+    return entValue.split(`:`)[1]
+  } else {
+    return `-- Frequency --`
+  }
+})
+
+const amount = ref<string | null>(initAmount.value)
+const selectedFrequency = ref<string | null>(initFrequency.value)
+
+//#region validate
+const validOption = (value: string) => options.value.includes(value)
+
+const rules = {
+  amount: {
+    numeric,
+    required
+  },
+  selectedFrequency: { validOption: helpers.withMessage('Please select a frequency', validOption) }
+}
+
+const $v = useVuelidate(rules, { amount, selectedFrequency })
+//#endregion validate
+
+watch(initAmount, (newVal) => {
+  amount.value = newVal
+})
+
+watch(initFrequency, (newVal) => {
+  selectedFrequency.value = newVal
+})
+
+watch([amount, selectedFrequency], ([amount, frequency]) => {
+  if (amount === `` || frequency === `-- Frequency --`) {
+    entitlement.value.value = ''
+  } else {
+    entitlement.value.value = `${amount}:${frequency}`
+  }
+})
+</script>
diff --git a/app/src/components/sections/SingleTeamView/MemberCard.vue b/app/src/components/sections/SingleTeamView/MemberCard.vue
index 3991d8c6..772e9b10 100644
--- a/app/src/components/sections/SingleTeamView/MemberCard.vue
+++ b/app/src/components/sections/SingleTeamView/MemberCard.vue
@@ -22,6 +22,13 @@
         >
           {{ copied ? 'Copied!' : 'Copy address' }}
         </button>
+        <!--Add/Edit User Roles-->
+        <button
+          @click="showAddEditMemberRoles = !showAddEditMemberRoles"
+          class="btn btn-active btn-xs"
+        >
+          Add Roles
+        </button>
         <button
           v-if="member.address != ownerAddress && ownerAddress == useUserDataStore().address"
           class="btn btn-error btn-xs"
@@ -40,6 +47,15 @@
         from the team?
       </DeleteConfirmForm>
     </ModalComponent>
+    <ModalComponent v-if="roleCategories" v-model="showAddEditMemberRoles">
+      <AddMemberRolesForm
+        :role-categories="roleCategories"
+        :is-adding-role="isAddingRole"
+        v-model="member.roles"
+        @add-roles="emits('addRoles')"
+        @close-modal="showAddEditMemberRoles = !showAddEditMemberRoles"
+      />
+    </ModalComponent>
   </div>
 </template>
 <script setup lang="ts">
@@ -47,26 +63,33 @@ import { useUserDataStore } from '@/stores/user'
 import DeleteConfirmForm from '@/components/forms/DeleteConfirmForm.vue'
 import ModalComponent from '@/components/ModalComponent.vue'
 import { useRoute } from 'vue-router'
-import type { MemberInput } from '@/types'
+import type { MemberInput, RoleCategory, Role } from '@/types'
 import { useClipboard } from '@vueuse/core'
 import { NETWORK } from '@/constant'
-import { ref, watch } from 'vue'
+import { ref, watch, onMounted } from 'vue'
 import { useToastStore } from '@/stores/useToastStore'
 import { useCustomFetch } from '@/composables/useCustomFetch'
+import AddMemberRolesForm from '@/components/sections/SingleTeamView/forms/AddMemberRolesForm.vue'
+import { useVuelidate } from "@vuelidate/core";
 
 const props = defineProps<{
+  isAddingRole: boolean
   member: Partial<MemberInput>
   teamId: Number
   ownerAddress: String
 }>()
 const { addSuccessToast, addErrorToast } = useToastStore()
 
-const emits = defineEmits(['getTeam'])
+const emits = defineEmits(['getTeam', 'addRoles'])
 
 const route = useRoute()
 
+useVuelidate()
+
 const memberToBeDeleted = ref({ name: '', address: '', id: '' })
 const showDeleteMemberConfirmModal = ref(false)
+const showAddEditMemberRoles = ref(false)
+const roleCategories = ref<null | RoleCategory[]>(null)
 
 // useFetch instance for deleting member
 const {
@@ -86,6 +109,16 @@ const {
 })
   .delete()
   .json()
+
+// useFetch fetch role categories
+const {
+  execute: executeFetchRoleCategories,
+  data: _roleCategories
+} = useCustomFetch('role-category', {
+  immediate: false
+})
+  .get()
+  .json()
 // Watchers for deleting member
 watch([() => memberIsDeleting.value, () => deleteMemberError.value], async () => {
   if (!memberIsDeleting.value && !deleteMemberError.value) {
@@ -107,4 +140,9 @@ const { copy, copied, isSupported } = useClipboard()
 const openExplorer = (address: string) => {
   window.open(`${NETWORK.blockExplorerUrl}/address/${address}`, '_blank')
 }
+
+onMounted(async () => {
+ await executeFetchRoleCategories()
+ roleCategories.value = _roleCategories.value.roleCategories
+})
 </script>
diff --git a/app/src/components/sections/SingleTeamView/MemberSection.vue b/app/src/components/sections/SingleTeamView/MemberSection.vue
index 4d800da3..27e3121b 100644
--- a/app/src/components/sections/SingleTeamView/MemberSection.vue
+++ b/app/src/components/sections/SingleTeamView/MemberSection.vue
@@ -24,11 +24,13 @@
   </div>
   <MemberCard
     v-for="member in team.members"
+    :is-adding-role="isAddingRole"
     :ownerAddress="team.ownerAddress"
     :teamId="Number(team.id)"
     :member="member"
     :key="member.address"
     @getTeam="emits('getTeam')"
+    @add-roles="addRoles(member)"
   />
 </template>
 <script setup lang="ts">
@@ -38,14 +40,18 @@ import MemberCard from '@/components/sections/SingleTeamView/MemberCard.vue'
 import AddMemberCard from '@/components/sections/SingleTeamView/AddMemberCard.vue'
 import AddMemberForm from '@/components/sections/SingleTeamView/forms/AddMemberForm.vue'
 import ModalComponent from '@/components/ModalComponent.vue'
-import type { User } from '@/types'
+import type { User, MemberInput, RoleCategory, Role } from '@/types'
 import { useUserDataStore } from '@/stores/user'
 
 import { useToastStore } from '@/stores/useToastStore'
 import { useRoute } from 'vue-router'
+import { log, parseError } from "@/utils";
+import { useVuelidate } from "@vuelidate/core";
 
 const showAddMemberForm = ref(false)
 const teamMembers = ref([{ name: '', address: '', isValid: false }])
+const isAddingRole = ref(false)
+const v$ = useVuelidate()
 
 const { addSuccessToast, addErrorToast } = useToastStore()
 
@@ -125,4 +131,120 @@ const searchUsers = async (input: { name: string; address: string }) => {
     }
   }
 }
+
+const {
+  execute: executeFetchRoleCategories,
+  data: _roleCategories
+} = useCustomFetch('role-category', {
+  immediate: false
+})
+  .get()
+  .json()
+
+const createContract = async (member: Partial<MemberInput>) => {
+  let contract
+  if (member.roles)
+    for (const memberRole of member.roles) {
+      await executeFetchRoleCategories()
+      const roleCategory = _roleCategories
+        .value
+        .roleCategories
+        .find((category: RoleCategory) => 
+          category.id === (memberRole as any).role.roleCategoryId)
+
+      if (roleCategory && roleCategory.roles) {
+        const role = roleCategory
+          .roles
+          .find(
+            (_role: Role) => 
+              _role.id === (memberRole as any).roleId
+          )
+
+        const entitlements = []
+
+        if (role && role.entitlements) {
+          for (const entitlement of role.entitlements) {
+            if (
+              entitlement.entitlementType &&
+              entitlement.entitlementType.name === 'access' &&
+              entitlement.value.split(':')[0] === 'expense-account'
+            ) {
+              entitlements.push(entitlement.value)
+            }
+          }
+
+          if (entitlements.length > 0) {
+            contract = {
+              role: {
+                name: role.name,
+                entitlement: {
+                  name: "access",
+                  resource: entitlements[0].split(':')[0],
+                  accessLevel: entitlements[0].split(':')[1]
+                }
+              },
+              assignedTo: member.address,
+              assignedBy: useUserDataStore().address
+            }
+          }
+        }
+      }
+    }
+  return contract
+}
+
+const signContract = async (contract: undefined | Object) => {
+  if (!contract) return
+  const params = [
+    useUserDataStore().address,
+    {
+      types: {
+        EIP712Domain: [
+          { name: "name", type: "string" },
+          { name: "version", type: "string" }
+        ],
+        Entitlement: [
+          { name: "name", type: "string" },
+          { name: "resource", type: "string" },
+          { name: "accessLevel", type: "string" }
+        ],
+        Role: [
+          { name: "name", type: "string" },
+          { name: "entitlement", type: "Entitlement" }
+        ],
+        Contract: [
+          { name: "assignedTo", type: "address" },
+          { name: "assignedBy", type: "address" },
+          { name: "role", type: "Role" }
+        ]
+      },
+      primaryType: "Contract",
+      domain: {
+        "name": "CNC Contract",
+        "version": "1"
+      },
+      message: contract
+    }
+  ]
+  try {
+    return await (window as any).ethereum.request({method: "eth_signTypedData_v4", params: params})
+  } catch (error) {
+    log.error(parseError(error))
+  }
+}
+
+const addRoles = async (member: Partial<MemberInput>) => {
+  isAddingRole.value = true
+  if (v$.value.$errors.length > 0) {
+    console.log(`form is invalid... `, v$.value.$model)
+    isAddingRole.value = false
+    return
+  }
+  const contract = await createContract(member)
+  const signature = await signContract(contract)
+  console.log(`member.roles: `, member.roles)
+  console.log(`signature: `, signature)
+  console.log(`contract: `, JSON.stringify(contract))
+  isAddingRole.value = false
+}
 </script>
diff --git a/app/src/components/sections/SingleTeamView/forms/AddMemberRolesForm.vue b/app/src/components/sections/SingleTeamView/forms/AddMemberRolesForm.vue
new file mode 100644
index 00000000..b90dbddc
--- /dev/null
+++ b/app/src/components/sections/SingleTeamView/forms/AddMemberRolesForm.vue
@@ -0,0 +1,177 @@
+<template>
+<!--Heading-->
+  <section class="mb-5">
+    <h1 class="font-bold text-2xl">Role Details</h1>
+    <hr class="mt-4" />
+  </section>
+
+<!--Body-->
+  <section v-if="roleCategories">
+    <div 
+      v-for="(role, index) of memberRoles" :key="index"
+      class="p-4 flex flex-col gap-2"
+    >
+      <label class="input input-bordered flex items-center gap-2 input-md">
+        <select 
+          class="w-1/2 bg-white" 
+          v-model="role.role.roleCategoryId" 
+          @input="async () => { await v$.$validate() }"
+        >
+          <option value="0">-- Select Role Category --</option>
+          <option 
+            v-for="(roleCategory) of roleCategories"
+            :key="roleCategory.id"
+            :value="roleCategory.id"
+          >
+            {{ roleCategory?.name }}
+          </option>
+        </select>
+        <select 
+          class="w-1/2 bg-white" 
+          v-model="role.roleId" 
+          @input="async () => { await v$.$validate() }"
+        >
+          <option value="0">-- Select Role --</option>
+          <option
+            v-for="(role, roleIndex) of getRoles(index)"
+            :key="role?.id? role.id: roleIndex"
+            :value="role?.id"
+          >
+            {{ role?.name }}
+          </option>
+        </select>
+      </label>
+
+      <FormErrorMessage v-if="v$.$errors.length">
+        <div v-for="(message, index) of getErrors()" :key="index">
+          {{ message }}
+        </div>
+      </FormErrorMessage>
+    </div>
+  </section>
+
+<!--Add/Remove Buttons-->
+  <section class="flex justify-end">
+    <div
+      class="w-6 h-6 cursor-pointer"
+      @click="removeRole"
+    >
+      <MinusCircleIcon class="size-6" />
+    </div>
+    <div
+      class="w-6 h-6 cursor-pointer"
+      @click="addRole"
+    >
+      <PlusCircleIcon class="size-6" />
+    </div>
+  </section>
+
+<!--Action Buttons-->
+  <section class="modal-action justify-center">
+    <LoadingButton v-if="isAddingRole" color="primary min-w-24" />
+    <button v-else class="btn btn-primary" @click="emits('add-roles')">Add Roles</button>
+    <button 
+      class="btn btn-active"
+      :disabled="isAddingRole"
+      @click="emits('close-modal')"
+    >
+      Cancel
+    </button>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { watch } from "vue";
+import { PlusCircleIcon, MinusCircleIcon } from '@heroicons/vue/24/outline'
+import LoadingButton from "@/components/ui/LoadingButton.vue"
+import { deepClone } from "@/utils"
+import type { RoleCategory } from "@/types";
+import { useVuelidate } from '@vuelidate/core'
+import { helpers, minValue } from '@vuelidate/validators'
+import FormErrorMessage from "@/components/ui/FormErrorMessage.vue";
+
+//#region state
+const props = defineProps<{
+  isAddingRole: boolean;
+  roleCategories: RoleCategory[]
+}>()
+
+const {roleCategories} = props
+
+const initRole = {
+  id: 0, 
+  roleId: 0,
+  role: { 
+    roleCategoryId: 0
+  }
+}
+
+const memberRoles = defineModel({
+  default: [{
+    id: 0, 
+    roleId: 0,
+    role: { 
+      roleCategoryId: 0
+    }
+  }]
+})
+
+const emits = defineEmits(["add-roles", "close-modal"])
+//#endregion state
+
+//#region validation
+const rules = {
+  memberRoles: {
+    $each: helpers.forEach({
+      roleId: {
+        minValue: helpers.withMessage('Role is required', minValue(1))
+      },
+      role: {
+        isValid: helpers.withMessage(
+          'Role category is required', 
+          (value: {roleCategoryId: number}) => {
+            return value.roleCategoryId > 0
+          }
+        )
+      }
+    })
+  }
+}
+
+const v$ = useVuelidate(rules, { memberRoles })
+//#endregion validation
+
+//#region helper functions
+const getErrors = () => {
+  return v$.value.$errors[0].$message instanceof Array?
+    v$.value.$errors[0].$message[0]:
+    []
+}
+const getRoles = (index: number) => {
+  const id = memberRoles.value[index].role.roleCategoryId
+  const roleCategory = roleCategories.find((category: RoleCategory) => category.id === id)
+  return roleCategory? roleCategory.roles: []
+}
+
+const addRole = () => {
+  let role = memberRoles.value.find(role => parseInt(`${role.role.roleCategoryId}`) === 0)
+  if(!role)
+    memberRoles.value.push(deepClone(initRole));
+};
+
+const removeRole = () => {
+  if (memberRoles.value.length > 1) {
+    memberRoles.value.pop();
+  }
+};
+//#endregion helper functions
+
+watch(
+  memberRoles, (newVal) => {
+    if (newVal.length === 0) {
+      memberRoles.value.push(deepClone(initRole));
+    }
+  },
+  { immediate: true }
+);
+</script>
\ No newline at end of file
diff --git a/app/src/components/sections/role-categories/NoRoleCategoriesDisplay.vue b/app/src/components/sections/role-categories/NoRoleCategoriesDisplay.vue
new file mode 100644
index 00000000..412e29e2
--- /dev/null
+++ b/app/src/components/sections/role-categories/NoRoleCategoriesDisplay.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="flex flex-col items-center">
+    <img src="../../../assets/login-illustration.png" alt="Login illustration" width="300" />
+
+    <span class="font-bold text-sm text-gray-500 my-4"
+      >There are currently no roles your team, {{ useUserDataStore().name }}. Create a new role
+      now!</span
+    >
+
+    <div class="flex justify-center">
+      <AddResourceCard
+        text="Add Role Category"
+        @open-add-resource-modal="showAddRoleCategoryModal = !showAddRoleCategoryModal"
+        class="w-72 h-16 text-sm"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AddResourceCard from '@/components/AddResourceCard.vue'
+import { useUserDataStore } from '@/stores/user'
+const showAddRoleCategoryModal = defineModel<boolean>('showAddRoleCategoryModal')
+</script>
diff --git a/app/src/components/sections/role-categories/RoleCategoriesCardsDisplay.vue b/app/src/components/sections/role-categories/RoleCategoriesCardsDisplay.vue
new file mode 100644
index 00000000..2cc83f27
--- /dev/null
+++ b/app/src/components/sections/role-categories/RoleCategoriesCardsDisplay.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-20">
+    <RoleCategoryCard
+      v-for="roleCategory in _roleCategories?.roleCategories"
+      :key="roleCategory.id"
+      :role-category="roleCategory"
+      class="cursor-pointer"
+      @click="navigateToRole(roleCategory.id)"
+    />
+    <div class="flex justify-center">
+      <AddResourceCard
+        @open-add-resource-modal="showAddRoleCategoryModal = !showAddRoleCategoryModal"
+        class="w-80 text-xl"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AddResourceCard from '@/components/AddResourceCard.vue'
+import RoleCategoryCard from '@/components/sections/role-categories/RoleCategoryCard.vue'
+import type { RoleCategoryResponse } from '@/types'
+import { useRouter } from 'vue-router'
+
+const _roleCategories = defineModel<RoleCategoryResponse>('_roleCategories')
+const showAddRoleCategoryModal = defineModel<boolean>('showAddRoleCategoryModal')
+
+const router = useRouter()
+
+function navigateToRole(id: number | undefined) {
+  if (id) router.push('/roles/' + id)
+}
+</script>
diff --git a/app/src/components/sections/role-categories/RoleCategoriesErrorDisplay.vue b/app/src/components/sections/role-categories/RoleCategoriesErrorDisplay.vue
new file mode 100644
index 00000000..5a94d851
--- /dev/null
+++ b/app/src/components/sections/role-categories/RoleCategoriesErrorDisplay.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="flex flex-col items-center pt-10">
+    <img src="../../../assets/login-illustration.png" alt="Login illustration" width="300" />
+
+    <div class="alert alert-warning">
+      We are unable to retrieve your role categories. Please try again in some time.
+    </div>
+  </div>
+</template>
diff --git a/app/src/components/sections/role-categories/RoleCategoriesMainDisplay.vue b/app/src/components/sections/role-categories/RoleCategoriesMainDisplay.vue
new file mode 100644
index 00000000..4b570157
--- /dev/null
+++ b/app/src/components/sections/role-categories/RoleCategoriesMainDisplay.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="pt-10">
+    <div v-if="_roleCategories?.roleCategories.length != 0">
+      <RoleCategoriesCardsDisplay
+        v-model:_role-categories="_roleCategories"
+        v-model:show-add-role-category-modal="showAddRoleCategoryModal"
+      />
+    </div>
+    <div v-else>
+      <NoRoleCategoriesDisplay v-model:show-add-role-category-modal="showAddRoleCategoryModal" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { RoleCategoryResponse } from '@/types'
+import RoleCategoriesCardsDisplay from './RoleCategoriesCardsDisplay.vue'
+import NoRoleCategoriesDisplay from './NoRoleCategoriesDisplay.vue'
+
+const showAddRoleCategoryModal = defineModel<boolean>('showAddRoleCategoryModal')
+const _roleCategories = defineModel<RoleCategoryResponse>('_roleCategories')
+//const isRoleCategoriesFetching = defineModel<boolean>("isRoleCategoriesFetching")
+</script>
diff --git a/app/src/components/sections/role-categories/RoleCategoryCard.vue b/app/src/components/sections/role-categories/RoleCategoryCard.vue
new file mode 100644
index 00000000..5fa92bda
--- /dev/null
+++ b/app/src/components/sections/role-categories/RoleCategoryCard.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="card h-36 w-80 border bg-green-100">
+    <div class="card-body">
+      <div class="flex flex-row justify-between items-start">
+        <h1 class="card-title text-md overflow-hidden">
+          {{ props.roleCategory.name }}
+        </h1>
+      </div>
+      <div>
+        <p class="text-xs line-clamp-3">{{ props.roleCategory.description }}</p>
+      </div>
+      <div class="card-actions justify-between"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { RoleCategory } from '@/types'
+
+type Props = { roleCategory: RoleCategory }
+
+const props = defineProps<Props>()
+</script>
diff --git a/app/src/components/sections/role-categories/RoleTable.vue b/app/src/components/sections/role-categories/RoleTable.vue
new file mode 100644
index 00000000..abe89fd4
--- /dev/null
+++ b/app/src/components/sections/role-categories/RoleTable.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="overflow-x-auto">
+    <table class="table">
+      <thead>
+        <tr>
+          <th v-for="heading in headings" :key="heading">{{ heading }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(row, rowIndex) in roles /*.roles*/" :key="rowIndex" class="hover">
+          <th>{{ rowIndex + 1 }}</th>
+          <td>{{ row.name }}</td>
+          <td>{{ row.description }}</td>
+          <td class="flex justify-end">
+            <button class="btn btn-primary mr-2" @click="handleClickUpdate(rowIndex)">
+              Update
+            </button>
+            <button class="btn btn-active" @click="handleClickDelete(rowIndex)">Delete</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <ModalComponent v-model="showModal">
+    <AddRoleForm
+      v-model="roles /*.roles*/[selectedIndex]"
+      :is-single-view="true"
+      @close-modal="showModal = !showModal"
+      @reload="emits('reload')"
+    />
+    <!--<RoleContainer
+      :role="selectedRole"
+      @close-modal="showModal = !showModal"
+      @reload="emits('reload')"
+    />-->
+  </ModalComponent>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import ModalComponent from '@/components/ui/ModalComponent.vue'
+//import AddRoleForm from './AddRoleForm.vue'
+import AddRoleForm from '@/components/forms/roles/AddRoleForm.vue'
+import { useCustomFetch } from '@/composables/useCustomFetch'
+
+interface TableProps {
+  headings: string[]
+}
+const showModal = ref(false)
+const selectedIndex = ref(-1)
+const roleEndPoint = ref('')
+
+const {
+  execute: deleteRoleAPI /*,
+  data: deleteRes*/
+} = useCustomFetch(roleEndPoint, {
+  immediate: false
+})
+  .delete()
+  .json()
+
+const handleClickUpdate = (rowIndex: number) => {
+  selectedIndex.value = rowIndex
+  showModal.value = !showModal.value
+}
+
+const handleClickDelete = async (rowIndex: number) => {
+  selectedIndex.value = rowIndex
+  const id = (roles.value[rowIndex] as any).id
+  roleEndPoint.value = `role/${id}`
+  await deleteRoleAPI()
+  emits('reload')
+}
+
+const emits = defineEmits(['reload'])
+
+defineProps<TableProps>()
+
+const roles = defineModel({
+  default: [
+    {
+      name: '',
+      description: '',
+      entitlements: [{ entitlementTypeId: 0, value: '' }]
+    }
+  ]
+})
+</script>
+
+<style>
+/* Add any additional styles you need */
+</style>
diff --git a/app/src/components/ui/FormErrorMessage.vue b/app/src/components/ui/FormErrorMessage.vue
new file mode 100644
index 00000000..eb056866
--- /dev/null
+++ b/app/src/components/ui/FormErrorMessage.vue
@@ -0,0 +1,8 @@
+<template>
+  <div
+    class="relative p-2 mb-4 text-sm text-red-500 rounded-lg bg-red-50 border border-red-200"
+    role="alert"
+  >
+    <slot></slot>
+  </div>
+</template>
diff --git a/app/src/components/ui/LoadingButton.vue b/app/src/components/ui/LoadingButton.vue
new file mode 100644
index 00000000..df3cfcf6
--- /dev/null
+++ b/app/src/components/ui/LoadingButton.vue
@@ -0,0 +1,11 @@
+<template>
+  <button class="btn" :class="`btn-${color}`">
+    <span class="loading loading-spinner loading-sm text-white"></span>
+  </button>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  color: string
+}>()
+</script>
diff --git a/app/src/components/ui/ModalComponent.vue b/app/src/components/ui/ModalComponent.vue
new file mode 100644
index 00000000..5250c0df
--- /dev/null
+++ b/app/src/components/ui/ModalComponent.vue
@@ -0,0 +1,36 @@
+<template>
+  <dialog
+    id="custom-modal"
+    class="modal modal-bottom sm:modal-middle"
+    :class="{ 'modal-open': toggleOpen }"
+  >
+    <div class="modal-box overflow-y-visible">
+      <button class="btn btn-sm absolute right-4 top-4" @click="toggleOpen = false">✕</button>
+      <slot></slot>
+    </div>
+
+    <form method="dialog" class="modal-backdrop" @click="toggleOpen = false">
+      <button>close</button>
+    </form>
+  </dialog>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue'
+
+const toggleOpen = defineModel({ default: false })
+
+const handleEscapePress = (event: KeyboardEvent) => {
+  if (event.key === 'Escape') {
+    toggleOpen.value = false
+  }
+}
+onMounted(() => {
+  document.addEventListener('keydown', handleEscapePress)
+})
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleEscapePress)
+})
+</script>
+
+<style scoped></style>
diff --git a/app/src/router/index.ts b/app/src/router/index.ts
index 45e2a33f..a07a68c4 100644
--- a/app/src/router/index.ts
+++ b/app/src/router/index.ts
@@ -4,6 +4,8 @@ import LoginView from '../views/LoginView.vue'
 import TeamView from '../views/TeamView.vue'
 import SingleTeamView from '../views/SingleTeamView.vue'
 import TransactionsView from '@/views/TransactionsView.vue'
+import RoleCategoriesView from '@/views/RoleCategoriesView.vue'
+import RoleCategoryView from '@/views/RoleCategoryView.vue'
 import { useStorage } from '@vueuse/core'
 
 const router = createRouter({
@@ -40,6 +42,21 @@ const router = createRouter({
       path: '/transactions',
       name: 'transactions',
       component: TransactionsView
+    },
+    {
+      path: '/roles',
+      children: [
+        {
+          path: '',
+          name: 'role-categories',
+          component: RoleCategoriesView
+        },
+        {
+          path: ':id',
+          name: 'role-category',
+          component: RoleCategoryView
+        }
+      ]
     }
   ]
 })
diff --git a/app/src/types/index.ts b/app/src/types/index.ts
index 1da5b0d1..2bf40b00 100644
--- a/app/src/types/index.ts
+++ b/app/src/types/index.ts
@@ -14,3 +14,4 @@ export * from './proposals-tabs-type'
 export * from './bank-event-type'
 export * from './expense-account-event-type'
 export * from './action'
+export * from './role'
diff --git a/app/src/types/inputs/member-input.ts b/app/src/types/inputs/member-input.ts
index e992992c..2ba1bdb5 100644
--- a/app/src/types/inputs/member-input.ts
+++ b/app/src/types/inputs/member-input.ts
@@ -1,5 +1,8 @@
+import type { Role } from "../role";
+
 export interface MemberInput {
   name: string
   address: string
   id?: string
-}
+  roles?: Role[] 
+}
\ No newline at end of file
diff --git a/app/src/types/role.ts b/app/src/types/role.ts
new file mode 100644
index 00000000..fd2383c0
--- /dev/null
+++ b/app/src/types/role.ts
@@ -0,0 +1,32 @@
+export interface RoleCategory {
+  id?: number
+  name: string
+  description?: string
+  entitlements?: Entitlement[]
+  roles?: Role[]
+}
+
+export interface Role {
+  id?: number
+  name: string
+  description?: string
+  entitlements?: Entitlement[]
+  roleCategory?: RoleCategory
+}
+
+export interface Entitlement {
+  id?: number
+  value: string
+  entitlementTypeId: number
+  entitlementType?: EntitlementType 
+}
+
+export interface EntitlementType {
+  id: number
+  name: string
+}
+
+export interface RoleCategoryResponse {
+  success: boolean
+  roleCategories: RoleCategory[]
+}
diff --git a/app/src/utils/generalUtil.ts b/app/src/utils/generalUtil.ts
index 3ff81674..82f9e41a 100644
--- a/app/src/utils/generalUtil.ts
+++ b/app/src/utils/generalUtil.ts
@@ -29,3 +29,30 @@ export const log = {
     }
   }
 }
+
+/**
+ * Creates an independent copy of the object so
+ * as to avoid creating references to the original
+ * object when you want to assign to its value
+ * 
+ * @param obj - Any object
+ * @returns - The cloned object
+ */
+export const deepClone = (obj: any): any => {
+  if (obj === null || typeof obj !== 'object') {
+    return obj;
+  }
+
+  if (Array.isArray(obj)) {
+    return obj.map(item => deepClone(item));
+  }
+
+  const clonedObj: { [key: string]: any } = {};
+  for (const key in obj) {
+    if (/*obj.hasOwnProperty(key)*/Object.prototype.hasOwnProperty.call(obj, key)) {
+      clonedObj[key] = deepClone((obj as { [key: string]: any })[key]);
+    }
+  }
+
+  return clonedObj
+}
\ No newline at end of file
diff --git a/app/src/views/RoleCategoriesView.vue b/app/src/views/RoleCategoriesView.vue
new file mode 100644
index 00000000..806fb381
--- /dev/null
+++ b/app/src/views/RoleCategoriesView.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="min-h-screen flex flex-col items-center">
+    <div>
+      <h2 class="pt-10">Role Categories</h2>
+    </div>
+
+    <div v-if="isRoleCategoriesFetching" class="loading loading-spinner loading-lg"></div>
+
+    <RoleCategoriesMainDisplay
+      v-if="!isRoleCategoriesFetching && _roleCategories?.roleCategories"
+      v-model:_role-categories="_roleCategories"
+      v-model:show-add-role-category-modal="showAddRoleCategoryModal"
+    />
+
+    <!--Error Display-->
+    <RoleCategoriesErrorDisplay v-if="roleCategoryError" />
+
+    <!--Modal-->
+    <ModalComponent v-model="showAddRoleCategoryModal">
+      <AddRoleCategoryForm
+        :is-loading="false"
+        :is-new="true"
+        v-model="roleCategory"
+        @close-modal="handleCloseModal"
+        @create-role-category="isFetch = !isFetch"
+      />
+    </ModalComponent>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+import RoleCategoriesMainDisplay from '@/components/sections/role-categories/RoleCategoriesMainDisplay.vue'
+import RoleCategoriesErrorDisplay from '@/components/sections/role-categories/RoleCategoriesErrorDisplay.vue'
+import AddRoleCategoryForm from '@/components/forms/roles/AddRoleCategoryForm.vue'
+import ModalComponent from '@/components/ModalComponent.vue'
+import { useCustomFetch } from '@/composables/useCustomFetch'
+import type { RoleCategoryResponse } from '@/types'
+import { deepClone } from '@/utils'
+
+const isRoleCategoriesFetching = ref(false)
+const isFetch = ref(false)
+const showAddRoleCategoryModal = ref(false)
+
+const initRoleCategory = {
+  name: '',
+  description: '',
+  roles: [
+    {
+      name: '',
+      description: '',
+      entitlements: [
+        {
+          entitlementTypeId: 0,
+          value: ''
+        }
+      ]
+    }
+  ],
+  entitlements: [
+    {
+      entitlementTypeId: 0,
+      value: ''
+    }
+  ]
+}
+
+const roleCategory = ref(deepClone(initRoleCategory))
+
+const {
+  error: roleCategoryError,
+  data: _roleCategories,
+  execute: executeFetchRoleCategories
+} = useCustomFetch<RoleCategoryResponse>('role-category', {
+  immediate: false
+})
+  .get()
+  .json()
+
+const handleCloseModal = () => {
+  showAddRoleCategoryModal.value = !showAddRoleCategoryModal.value
+  resetRoleCategoryRef()
+  console.log('initRoleCategory: ', initRoleCategory)
+}
+
+const resetRoleCategoryRef = () => {
+  roleCategory.value = deepClone(initRoleCategory)
+}
+
+watch(isFetch, async (newValue) => {
+  if (newValue) {
+    await executeFetchRoleCategories()
+    resetRoleCategoryRef()
+    showAddRoleCategoryModal.value = false
+    isFetch.value = false
+  }
+})
+
+onMounted(async () => {
+  await executeFetchRoleCategories()
+})
+</script>
+
+<style scoped></style>
diff --git a/app/src/views/RoleCategoryView.vue b/app/src/views/RoleCategoryView.vue
new file mode 100644
index 00000000..82bf3f2d
--- /dev/null
+++ b/app/src/views/RoleCategoryView.vue
@@ -0,0 +1,184 @@
+<template>
+  <main class="flex min-h-screen justify-center">
+    <div class="w-full mt-10">
+      <!--Hero-->
+      <section class="hero-container flex justify-center bg-white border rounded-xl">
+        <div class="hero-content text-center bg-white p-10 w-full">
+          <div class="max-w-md">
+            <h1 class="text-5xl font-bold">{{ roleCategory?.roleCategory?.name }}</h1>
+            <p class="py-6">
+              {{
+                roleCategory?.roleCategory?.description
+                  ? roleCategory?.roleCategory?.description
+                  : `A role category`
+              }}
+            </p>
+            <button class="btn btn-primary mr-2" @click="handleEditCategory">Update</button>
+            <button class="btn btn-active" @click="handleDeleteCategory">Delete</button>
+          </div>
+        </div>
+      </section>
+
+      <!--Tab-->
+      <section class="mt-7">
+        <div role="tablist" class="tabs tabs-lifted">
+          <input
+            type="radio"
+            name="my_tabs_2"
+            role="tab"
+            class="tab"
+            aria-label="Roles"
+            v-model="selectedTab"
+            value="tab1"
+          />
+          <div
+            role="tabpanel"
+            v-if="selectedTab === 'tab1'"
+            class="tab-content bg-base-100 border-base-300 rounded-box p-6"
+          >
+            <RoleTable
+              v-if="_roleCategory"
+              :headings="headings"
+              v-model="_roleCategory.roles"
+              @reload="isReload = true"
+            />
+
+            <hr class="mt-5" />
+
+            <div class="flex justify-end mt-7">
+              <button class="btn btn-primary" @click="handleAddRole">Add New Role</button>
+            </div>
+          </div>
+
+          <input
+            type="radio"
+            name="my_tabs_2"
+            role="tab"
+            class="tab"
+            aria-label="Tab 2"
+            v-model="selectedTab"
+            value="tab2"
+          />
+          <div
+            role="tabpanel"
+            v-if="selectedTab === 'tab2'"
+            class="tab-content bg-base-100 border-base-300 rounded-box p-6"
+          >
+            Tab content 2
+          </div>
+
+          <input
+            type="radio"
+            name="my_tabs_2"
+            role="tab"
+            class="tab"
+            aria-label="Tab 3"
+            v-model="selectedTab"
+            value="tab3"
+          />
+          <div
+            role="tabpanel"
+            v-if="selectedTab === 'tab3'"
+            class="tab-content bg-base-100 border-base-300 rounded-box p-6"
+          >
+            Tab content 3
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <ModalComponent v-model="showModal">
+      <AddRoleCategoryForm
+        v-if="showCategory"
+        v-model="_roleCategory"
+        :is-loading="false"
+        :category-id="_roleCategory?.id"
+        @close-modal="handleEditCategory"
+        @reload="isReload = true"
+      />
+      <AddRoleForm
+        v-if="showRole"
+        @close-modal="handleAddRole"
+        @reload="isReload = true"
+        v-model="initRole"
+        :is-single-view="true"
+        :category-id="_roleCategory?.id"
+      />
+    </ModalComponent>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+import RoleTable from '@/components/sections/role-categories/RoleTable.vue'
+import ModalComponent from '@/components/ModalComponent.vue'
+import AddRoleForm from '@/components/forms/roles/AddRoleForm.vue'
+import AddRoleCategoryForm from '@/components/forms/roles/AddRoleCategoryForm.vue'
+import { useCustomFetch } from '@/composables/useCustomFetch'
+import { useRoute } from 'vue-router'
+import type { RoleCategory } from '@/types'
+
+const route = useRoute()
+
+const headings = ['ID', 'Name', 'Description', 'Actions']
+const showModal = ref(false)
+const showCategory = ref(false)
+const showRole = ref(false)
+const isReload = ref(false)
+
+const { data: roleCategory, execute: executeFetchRoleCategory } = useCustomFetch(
+  `role-category/${route.params.id}`,
+  {
+    immediate: false
+  }
+)
+  .get()
+  .json()
+
+const { execute: executeDeleteRoleCategory } = useCustomFetch(`role-category/${route.params.id}`, {
+  immediate: false
+})
+  .delete()
+  .json()
+
+const _roleCategory = ref<RoleCategory | null>(null)
+const initRole = ref({
+  name: '',
+  description: '',
+  entitlements: [
+    {
+      entitlementTypeId: 0,
+      value: ''
+    }
+  ]
+})
+
+const handleDeleteCategory = async () => {
+  await executeDeleteRoleCategory()
+  isReload.value = true
+}
+
+const handleEditCategory = () => {
+  showModal.value = !showModal.value
+  showCategory.value = !showCategory.value
+}
+const handleAddRole = () => {
+  showModal.value = !showModal.value
+  showRole.value = !showRole.value
+}
+const selectedTab = ref('tab1') // Set the default selected tab here
+
+//Reloads page after update
+watch(isReload, async (newValue) => {
+  if (newValue) {
+    await executeFetchRoleCategory()
+    _roleCategory.value = roleCategory.value.roleCategory
+    isReload.value = false
+  }
+})
+
+onMounted(async () => {
+  await executeFetchRoleCategory()
+  _roleCategory.value = roleCategory.value.roleCategory
+})
+</script>
diff --git a/backend/prisma/migrations/20240729143639_new_permissioning_system/migration.sql b/backend/prisma/migrations/20240729143639_new_permissioning_system/migration.sql
new file mode 100644
index 00000000..ae96d84a
--- /dev/null
+++ b/backend/prisma/migrations/20240729143639_new_permissioning_system/migration.sql
@@ -0,0 +1,100 @@
+-- CreateTable
+CREATE TABLE "RoleCategory" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "description" TEXT,
+
+    CONSTRAINT "RoleCategory_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Role" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "description" TEXT,
+    "roleCategoryId" INTEGER NOT NULL,
+
+    CONSTRAINT "Role_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "EntitlementType" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "parameters" TEXT,
+
+    CONSTRAINT "EntitlementType_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Entitlement" (
+    "id" SERIAL NOT NULL,
+    "entitlementTypeId" INTEGER NOT NULL,
+    "value" TEXT NOT NULL,
+    "description" TEXT,
+    "roleCategoryId" INTEGER,
+    "roleId" INTEGER,
+
+    CONSTRAINT "Entitlement_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "UserRole" (
+    "id" SERIAL NOT NULL,
+    "userAddress" TEXT NOT NULL,
+    "roleId" INTEGER NOT NULL,
+    "assignedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "assignedBy" TEXT NOT NULL,
+
+    CONSTRAINT "UserRole_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "UserRoleEntitlement" (
+    "id" SERIAL NOT NULL,
+    "userRoleId" INTEGER NOT NULL,
+    "entitlementId" INTEGER NOT NULL,
+    "value" DOUBLE PRECISION,
+    "lastPayDate" TIMESTAMP(3) DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "UserRoleEntitlement_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "RoleCategory_name_key" ON "RoleCategory"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Role_name_roleCategoryId_key" ON "Role"("name", "roleCategoryId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "EntitlementType_name_key" ON "EntitlementType"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "UserRole_userAddress_roleId_key" ON "UserRole"("userAddress", "roleId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "UserRoleEntitlement_userRoleId_entitlementId_key" ON "UserRoleEntitlement"("userRoleId", "entitlementId");
+
+-- AddForeignKey
+ALTER TABLE "Role" ADD CONSTRAINT "Role_roleCategoryId_fkey" FOREIGN KEY ("roleCategoryId") REFERENCES "RoleCategory"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Entitlement" ADD CONSTRAINT "Entitlement_roleCategoryId_fkey" FOREIGN KEY ("roleCategoryId") REFERENCES "RoleCategory"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Entitlement" ADD CONSTRAINT "Entitlement_roleId_fkey" FOREIGN KEY ("roleId") REFERENCES "Role"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Entitlement" ADD CONSTRAINT "Entitlement_entitlementTypeId_fkey" FOREIGN KEY ("entitlementTypeId") REFERENCES "EntitlementType"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "UserRole" ADD CONSTRAINT "UserRole_userAddress_fkey" FOREIGN KEY ("userAddress") REFERENCES "User"("address") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "UserRole" ADD CONSTRAINT "UserRole_roleId_fkey" FOREIGN KEY ("roleId") REFERENCES "Role"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "UserRoleEntitlement" ADD CONSTRAINT "UserRoleEntitlement_userRoleId_fkey" FOREIGN KEY ("userRoleId") REFERENCES "UserRole"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "UserRoleEntitlement" ADD CONSTRAINT "UserRoleEntitlement_entitlementId_fkey" FOREIGN KEY ("entitlementId") REFERENCES "Entitlement"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
diff --git a/backend/prisma/schema.prisma b/backend/prisma/schema.prisma
index 137c4f39..4a1c6790 100644
--- a/backend/prisma/schema.prisma
+++ b/backend/prisma/schema.prisma
@@ -15,52 +15,124 @@ datasource db {
 }
 
 model User {
-  address                   String  @id @unique
-  name                      String?
-  nonce                     String
-  teams                     Team[]  @relation("MemberTeams")
-  ownedTeams                Team[]  @relation("OwnedTeams")
-  notifications             Notification[]
-  BoardOfDirectorActions    BoardOfDirectorActions[]
+  address                           String                @id @unique
+  name                              String?
+  nonce                             String
+  teams                             Team[]                @relation("MemberTeams")
+  ownedTeams                        Team[]                @relation("OwnedTeams")
+  notifications                     Notification[]
+  BoardOfDirectorActions            BoardOfDirectorActions[]
+  roles                             UserRole[]
 }
 
 model Team {
-  id                        Int     @id @default(autoincrement())
-  members                   User[]  @relation("MemberTeams")
-  owner                     User    @relation("OwnedTeams", fields: [ownerAddress], references: [address])
-  ownerAddress              String
-  description               String?
-  name                      String  @unique
-  bankAddress               String? // A team can have no bank contract
-  votingAddress             String?
-  boardOfDirectorsAddress   String?
-  expenseAccountAddress     String?
-  officerAddress            String?
-  BoardOfDirectorActions    BoardOfDirectorActions[]
+  id                                 Int                   @id @default(autoincrement())
+  members                            User[]                @relation("MemberTeams")
+  owner                              User                  @relation("OwnedTeams", fields: [ownerAddress], references: [address])
+  ownerAddress                       String
+  description                        String?
+  name                               String                @unique
+  bankAddress                        String? // A team can have no bank contract
+  votingAddress                      String?
+  boardOfDirectorsAddress            String?
+  expenseAccountAddress              String?
+  officerAddress                     String?
+  BoardOfDirectorActions             BoardOfDirectorActions[]
 }
 
 model Notification {
-  id                        Int      @id @default(autoincrement())
-  subject                   String?
-  message                   String
-  isRead                    Boolean  @default(false)
-  userAddress               String
-  user                      User     @relation(fields: [userAddress], references: [address])
-  createdAt                 DateTime @default(now())
-  author                    String?
-  resource                  String?
+  id                                Int                   @id @default(autoincrement())
+  subject                           String?
+  message                           String
+  isRead                            Boolean               @default(false)
+  userAddress                       String
+  user                              User                  @relation(fields: [userAddress], references: [address])
+  createdAt                         DateTime              @default(now())
+  author                            String?
+  resource                          String?
 }
 
 model BoardOfDirectorActions {
-  id                        Int      @id @default(autoincrement())
-  actionId                  Int
-  description               String
-  targetAddress             String
-  userAddress               String
-  isExecuted                Boolean  @default(false)
-  data                      String
-  createdBy                 User     @relation(fields: [userAddress], references: [address])
-  teamId                    Int
-  team                      Team     @relation(fields: [teamId], references: [id])
-  createdAt                 DateTime @default(now())
+  id                                Int      @id @default(autoincrement())
+  actionId                          Int
+  description                       String
+  targetAddress                     String
+  userAddress                       String
+  isExecuted                        Boolean  @default(false)
+  data                              String
+  createdBy                         User     @relation(fields: [userAddress], references: [address])
+  teamId                            Int
+  team                              Team     @relation(fields: [teamId], references: [id])
+  createdAt                         DateTime @default(now())
+}
+
+// Permissioning System Models
+
+model RoleCategory {
+  id                    Int                   @id @default(autoincrement())
+  name                  String                @unique
+  description           String?
+  roles                 Role[]
+  entitlements          Entitlement[]
+}
+
+model Role {
+  id                    Int                   @id @default(autoincrement())
+  name                  String
+  description           String?
+  entitlements          Entitlement[]
+  roleCategoryId        Int
+  users                 UserRole[]
+
+  roleCategory          RoleCategory          @relation(fields: [roleCategoryId], references: [id])
+
+  @@unique([name, roleCategoryId])
+}
+
+model EntitlementType {
+  id                    Int                   @id @default(autoincrement())
+  name                  String                @unique //e.g. dividend, wage, salary, shares, access, vote
+  parameters            String? //eg. percentage:profit, rate:hour|week|month
+  Entitlement           Entitlement[]
+}
+
+model Entitlement {
+  id                    Int                   @id @default(autoincrement())
+  entitlementTypeId     Int
+  value                 String // $25/hr or 7% of profit
+  description           String?
+  roleCategoryId        Int?
+  roleId                Int?
+
+  roleCategory          RoleCategory?         @relation(fields: [roleCategoryId], references: [id])
+  role                  Role?                 @relation(fields: [roleId], references: [id])
+  entitlementType       EntitlementType       @relation(fields: [entitlementTypeId], references: [id])
+  UserRoleEntitlement   UserRoleEntitlement[]
+}
+
+model UserRole {
+  id                    Int                   @id @default(autoincrement())
+  userAddress           String
+  roleId                Int
+  assignedAt            DateTime              @default(now())
+  assignedBy            String
+
+  user                  User                  @relation(fields: [userAddress], references: [address])
+  role                  Role                  @relation(fields: [roleId], references: [id])
+  entitlements          UserRoleEntitlement[]
+
+  @@unique([userAddress, roleId])
+}
+
+model UserRoleEntitlement {
+  id                    Int                   @id @default(autoincrement())
+  userRoleId            Int
+  entitlementId         Int
+  value                 Float? // Unique value for each user for the entitlement
+  lastPayDate           DateTime?             @default(now())
+
+  userRole              UserRole              @relation(fields: [userRoleId], references: [id])
+  entitlement           Entitlement           @relation(fields: [entitlementId], references: [id])
+
+  @@unique([userRoleId, entitlementId])
 }
diff --git a/backend/src/config/serverConfig.ts b/backend/src/config/serverConfig.ts
index f0b7d3fb..1367f2de 100644
--- a/backend/src/config/serverConfig.ts
+++ b/backend/src/config/serverConfig.ts
@@ -9,6 +9,9 @@ import userRoutes from "../routes/userRoutes";
 import authRoutes from "../routes/authRoutes";
 import notificationRoutes from "../routes/notificationRoute";
 import actionRoutes from "../routes/actionsRoute";
+import roleRoutes from "../routes/roleRoutes";
+import roleCategoryRoutes from "../routes/roleCategoryRoutes"
+import entitlementRoutes from "../routes/entitlementRoutes"
 //#endregion routing modules
 
 import { authorizeUser } from "../middleware/authMiddleware";
@@ -31,6 +34,9 @@ class Server {
       auth: "/api/auth/",
       notification: "/api/notification/",
       actions: '/api/actions/',
+      role: "/api/role/",
+      roleCategory: "/api/role-category/",
+      entitlement: "/api/entitlement/",
       apidocs: "/api-docs",
     };
     this.port = parseInt(process.env.PORT as string) || 3000;
@@ -70,6 +76,9 @@ class Server {
     this.app.use(this.paths.auth, authRoutes);
     this.app.use(this.paths.notification, notificationRoutes);
     this.app.use(this.paths.actions, authorizeUser, actionRoutes);
+    this.app.use(this.paths.role, roleRoutes)
+    this.app.use(this.paths.roleCategory, roleCategoryRoutes)
+    this.app.use(this.paths.entitlement, entitlementRoutes)
     this.app.get(this.paths.apidocs, (req, res) => {
       res.sendFile(path.join(__dirname, "../utils/backend_specs.html"));
     });
diff --git a/backend/src/controllers/role/entitlementTypeController.ts b/backend/src/controllers/role/entitlementTypeController.ts
new file mode 100644
index 00000000..13fb0f59
--- /dev/null
+++ b/backend/src/controllers/role/entitlementTypeController.ts
@@ -0,0 +1,42 @@
+import { prisma, errorResponse } from "../../utils";
+import { Request, Response } from "express";
+
+const initEntTypes = [
+  { "id": 1, "name": "salary" },
+  { "id": 2, "name": "dividend" },
+  { "id": 3, "name": "wage" },
+  { "id": 4, "name": "tokens" },
+  { "id": 5, "name": "access" },
+  { "id": 6, "name": "vote" }
+]
+
+export const getEntitlementTypes = async (req: Request, res: Response) => {
+  try {
+    //Initialize database with default or create new types if not present
+    //TODO: needs to be secured
+    for (const entType of initEntTypes) {
+      const existingEntType = await prisma.entitlementType.findUnique({
+        where: { name: entType.name }
+      });
+
+      if (!existingEntType) {
+        await prisma.entitlementType.create({
+          data: {
+            name: entType.name
+          }
+        });
+      }
+    }
+
+    const entTypes = await prisma.entitlementType.findMany();
+
+    res.json({
+      success: true,
+      entTypes: entTypes
+    });
+  } catch (error) {
+    return errorResponse(500, error, res)
+  } finally {
+    await prisma.$disconnect()
+  }
+}
\ No newline at end of file
diff --git a/backend/src/controllers/role/index.ts b/backend/src/controllers/role/index.ts
new file mode 100644
index 00000000..6e7aef9b
--- /dev/null
+++ b/backend/src/controllers/role/index.ts
@@ -0,0 +1,3 @@
+export * from './entitlementTypeController'
+export * from './roleCategoryController'
+export * from './roleController'
\ No newline at end of file
diff --git a/backend/src/controllers/role/roleCategoryController.ts b/backend/src/controllers/role/roleCategoryController.ts
new file mode 100644
index 00000000..f9772fc1
--- /dev/null
+++ b/backend/src/controllers/role/roleCategoryController.ts
@@ -0,0 +1,203 @@
+import { 
+  prisma, 
+  errorResponse, 
+  deleteEntitlements,
+  updateEntitlements,
+  replaceEmpty
+} from "../../utils";
+import { type Entitlement } from "@prisma/client";
+import { Request, Response } from "express";
+
+interface Role {
+  id?: number;
+  name: string;
+  description?: string;
+  entitlements?: Entitlement[]
+}
+
+export const updateRoleCategory = async (req: Request, res: Response) => {
+  const roleCategory = req.body
+
+  try {
+    const oldEnts = await prisma.entitlement.findMany({
+      where: { roleCategoryId: roleCategory.id}
+    })
+
+    await deleteEntitlements(oldEnts, roleCategory.entitlements)
+
+    await updateEntitlements(roleCategory.entitlements, 'roleCategoryId', roleCategory.id, res)
+
+    await prisma.roleCategory.update({
+      where: { id: roleCategory.id},
+      data: {
+        name: roleCategory.name?? roleCategory.name,
+        description: roleCategory.description?? roleCategory.description
+      }
+    })
+
+    res.status(201).json({
+      success: true
+    })
+  } catch (error) {
+    return errorResponse(500, error, res)
+  } finally{
+    await prisma.$disconnect()
+  }
+}
+
+export const deleteRoleCategory = async (req: Request, res: Response) => {
+  const { id } = req.params
+
+  const _id = parseInt(id)
+  if (isNaN(_id)) {
+    return errorResponse(404, 'Invalid ID', res)
+  }
+
+  try {
+    // Delete related Role records first
+    await prisma.role.deleteMany({
+      where: {
+        roleCategoryId: _id,
+      },
+    });
+
+    await prisma.roleCategory.delete({
+      where: { id: _id }
+    })
+    
+    res.status(201).json({
+      success: true
+    })
+  } catch (error) {
+    return errorResponse(500, error, res)
+  } finally {
+    await prisma.$disconnect()
+  }
+}
+
+export const addRoleCategory = async (req: Request, res: Response) => {
+  const callerAddress = (req as any).address
+
+  let roleCategory = req.body
+
+  try {
+    if (!roleCategory) {
+      return errorResponse(404, 'Role category empty or not set', res)
+    }
+
+    roleCategory = replaceEmpty(roleCategory)
+
+    const _roleCategory = await prisma.roleCategory.create({
+      data: {
+        name: roleCategory.name,
+        description: roleCategory.description,
+        entitlements: {
+          create: roleCategory.entitlements
+        }
+      },
+      include: {
+        entitlements: true
+      }
+    });
+
+    const roles = await Promise.all(roleCategory.roles.map(async (role: Role) => {
+      return await prisma.role.create({
+        data: {
+          name: role.name,
+          description: role.description ?? null,
+          roleCategoryId: _roleCategory.id,
+          entitlements: {
+            create: role.entitlements
+          }
+        }, 
+        include: {
+          entitlements: true
+        }
+      })
+    }))
+
+    const __roleCategory = await prisma.roleCategory.findUnique({
+      where: {
+        id: _roleCategory.id
+      },
+      include: {
+        roles: {
+          include: {
+            entitlements: true
+          }
+        },
+        entitlements: true
+      }
+    })
+
+    res.status(201).json({
+      success: true,
+      roleCategory: __roleCategory
+    })
+  } catch(error) {
+    return errorResponse(500, error, res)
+  }
+}
+
+export const getRoleCategories = async (req: Request, res: Response) => {
+  try {
+    const roleCategories = await prisma.roleCategory.findMany({
+      include: {
+        entitlements: true,
+        roles: {
+          include: {
+            entitlements: {
+              include: {
+                entitlementType: true
+              }
+            }
+          }
+        }
+      }
+    })
+
+    res.status(201).json({
+      success: true,
+      roleCategories
+    })
+  } catch (error) {
+    return errorResponse(500, error, res)
+  } finally {
+    await prisma.$disconnect()
+  }
+}
+
+export const getRoleCategory = async (req: Request, res: Response) => {
+  const { id } = req.params
+
+  const _id = parseInt(id)
+  if (isNaN(_id)) {
+    return errorResponse(404, 'Invalid ID', res)
+  }
+  try {
+    const roleCategory = await prisma.roleCategory.findUnique({
+      where: { id: _id},
+      include: {
+        entitlements: true,
+        roles: {
+          include: {
+            entitlements: {
+              include: {
+                entitlementType: true
+              }
+            }
+          }
+        }
+      }
+    })
+
+    res.status(201).json({
+      success: true,
+      roleCategory
+    })
+  } catch (error) {
+    return errorResponse(500, error, res)
+  } finally {
+    await prisma.$disconnect()
+  }
+}
\ No newline at end of file
diff --git a/backend/src/controllers/role/roleController.ts b/backend/src/controllers/role/roleController.ts
new file mode 100644
index 00000000..b8213978
--- /dev/null
+++ b/backend/src/controllers/role/roleController.ts
@@ -0,0 +1,104 @@
+import { 
+  prisma, 
+  errorResponse, 
+  deleteEntitlements,
+  updateEntitlements 
+} from "../../utils";
+//import { type Entitlement } from "@prisma/client";
+import { Request, Response } from "express";
+
+export const deleteRole = async (req: Request, res: Response) => {
+  const { id } = req.params
+
+  const _id = parseInt(id)
+  if (isNaN(_id)) {
+    return errorResponse(404, 'Invalid ID', res)
+  }
+
+  try {
+
+    await prisma.role.delete({
+      where: {
+        id: _id
+      }
+    })
+
+    res.status(201).json({
+      success: true
+    })
+    
+  } catch (error) {
+    
+  } finally {
+    await prisma.$disconnect()
+  }
+
+}
+
+export const createRole =  async (req: Request, res: Response) => {
+  const { id } = req.params
+  const role = req.body
+
+  const _id = parseInt(id)
+  if (isNaN(_id)) {
+    return errorResponse(404, 'Invalid ID', res)
+  }
+
+  try {
+
+    await prisma.role.create({
+      data: {
+        name: role.name,
+        description: role.description ?? null,
+        roleCategoryId: _id,
+        entitlements: {
+          create: role.entitlements
+        }
+      }
+    })
+
+    res.status(201).json({
+      success: true
+    })
+
+  } catch (error) {
+    return errorResponse(500, error, res)
+  } finally {
+    await prisma.$disconnect()
+  }
+
+}
+
+export const updateRole = async (req: Request, res: Response) => {
+  const role = req.body
+  try {
+    const oldEnts = await prisma.entitlement.findMany({
+      where: {
+        roleId: role.id
+      }
+    })
+
+    console.log(`role: `, role)
+
+    await deleteEntitlements(oldEnts, role.entitlements)
+
+    await updateEntitlements(role.entitlements, 'roleId', role.id, res)
+
+    await prisma.role.update({
+      where: { id: role.id },
+      data: {
+        name: role.name?? role.name,
+        description: role.description?? role.description,
+      }
+    })
+
+    res.status(201).json({
+      success: true
+    })
+
+  } catch (error) {
+    return errorResponse(500, error, res)
+  } finally {
+    await prisma.$disconnect()
+  }
+}
\ No newline at end of file
diff --git a/backend/src/controllers/teamController.ts b/backend/src/controllers/teamController.ts
index d4659256..0d975301 100644
--- a/backend/src/controllers/teamController.ts
+++ b/backend/src/controllers/teamController.ts
@@ -121,6 +121,18 @@ const getTeam = async (req: Request, res: Response) => {
           select: {
             address: true,
             name: true,
+            roles: {
+              select: {
+                id: true,
+                roleId: true,
+                role: {
+                  select: {
+                    name: true,
+                    roleCategoryId: true
+                  }
+                }
+              }
+            }
           },
         },
       },
diff --git a/backend/src/routes/entitlementRoutes.ts b/backend/src/routes/entitlementRoutes.ts
new file mode 100644
index 00000000..da3ebeaf
--- /dev/null
+++ b/backend/src/routes/entitlementRoutes.ts
@@ -0,0 +1,8 @@
+import express from "express";
+import { getEntitlementTypes } from "../controllers/role";
+
+const entitlementRouter = express.Router()
+
+entitlementRouter.get('/types', getEntitlementTypes)
+
+export default entitlementRouter
\ No newline at end of file
diff --git a/backend/src/routes/roleCategoryRoutes.ts b/backend/src/routes/roleCategoryRoutes.ts
new file mode 100644
index 00000000..55897dc5
--- /dev/null
+++ b/backend/src/routes/roleCategoryRoutes.ts
@@ -0,0 +1,18 @@
+import express from "express";
+import { 
+    addRoleCategory,
+    updateRoleCategory,
+    getRoleCategories,
+    getRoleCategory,
+    deleteRoleCategory
+} from "../controllers/role";
+
+const roleCategoryRouter = express.Router()
+
+roleCategoryRouter.post('/', addRoleCategory)
+roleCategoryRouter.get('/', getRoleCategories)
+roleCategoryRouter.get('/:id', getRoleCategory)
+roleCategoryRouter.put('/', updateRoleCategory)
+roleCategoryRouter.delete('/:id', deleteRoleCategory)
+
+export default roleCategoryRouter
\ No newline at end of file
diff --git a/backend/src/routes/roleRoutes.ts b/backend/src/routes/roleRoutes.ts
new file mode 100644
index 00000000..282a39e1
--- /dev/null
+++ b/backend/src/routes/roleRoutes.ts
@@ -0,0 +1,14 @@
+import express from "express";
+import { 
+    updateRole ,
+    createRole,
+    deleteRole
+} from "../controllers/role";
+
+const roleRouter = express.Router()
+
+roleRouter.post('/:id', createRole)
+roleRouter.put('/', updateRole)
+roleRouter.delete('/:id', deleteRole)
+
+export default roleRouter
\ No newline at end of file
diff --git a/backend/src/utils/index.ts b/backend/src/utils/index.ts
index bbfea21e..86a943f7 100644
--- a/backend/src/utils/index.ts
+++ b/backend/src/utils/index.ts
@@ -1,3 +1,4 @@
 export * from './dependenciesUtil'
 export * from './utils'
-export * from './notificationUtil'
\ No newline at end of file
+export * from './notificationUtil'
+export * from './roleUtil'
\ No newline at end of file
diff --git a/backend/src/utils/roleUtil.ts b/backend/src/utils/roleUtil.ts
new file mode 100644
index 00000000..783017fe
--- /dev/null
+++ b/backend/src/utils/roleUtil.ts
@@ -0,0 +1,107 @@
+import { prisma, errorResponse } from "./";
+import { Response } from "express";
+import { Entitlement } from "@prisma/client";
+
+interface ReqEntitlement {
+  id?: number;
+  entitlementTypeId: number;
+  value?: string | null;
+  description?: string | null;
+  roleCategoryId?: number | null;
+  roleId?: number | null;
+}
+
+interface ReqRole {
+  id?: number,
+  name?: string,
+  description?: string,
+  entitlements?: ReqEntitlement[]
+}
+
+interface ReqRoleCategory {
+  id?: number,
+  name: string,
+  description?: string,
+  roles?: ReqRole[],
+  entitlements?: ReqEntitlement[]
+}
+
+export const deleteEntitlements = async (
+  oldEnts: Entitlement[], 
+  newEnts: ReqEntitlement[] | undefined
+) => {
+  for (const oldEnt of oldEnts) {
+    if (newEnts) {
+      let isDelete = true;
+
+      newEnts
+        .forEach(newEnt => {
+          if (newEnt.id === oldEnt.id)
+            isDelete = false
+        })
+
+      if (isDelete) {
+        prisma.entitlement.delete({
+          where: { id: oldEnt.id }
+        })
+          .catch(error => {
+            throw error
+          })
+          .finally(async () => await prisma.$disconnect())
+      }
+    }
+  } 
+}
+
+export const updateEntitlements  = async (
+  ents: ReqEntitlement[],
+  field: 'roleCategoryId' | 'roleId', 
+  id: number,
+  res: Response
+) => {
+  for (const entitlement of ents) {
+    if (entitlement.id) {
+      const entId = parseInt(`${entitlement.id}`)
+      if (isNaN(entId)) {
+        return errorResponse(404, 'Invalid Entitlement ID', res)
+        //throw new Error('Invalid Entitlement ID')
+      }
+
+      await prisma.entitlement.update({
+        where: {
+          id: entId
+        }, 
+        data: {
+          description: entitlement.description? entitlement.description : null,
+          value: entitlement.value? entitlement.value: '',
+          entitlementTypeId: entitlement.entitlementTypeId
+        }
+      })
+    } else {
+      await prisma.entitlement.create({
+        data: {
+          [field]: id,
+          value: entitlement.value? entitlement.value: '',
+          entitlementTypeId: entitlement.entitlementTypeId
+        }
+      })
+    }
+  }
+}
+
+export const replaceEmpty = (obj: ReqRoleCategory) => {
+  const emptyRole = { name: '', description: '', entitlements: [{ entitlementTypeId: 0, value: '' }] };
+  const emptyEntitlement = { entitlementTypeId: 0, value: '' };
+
+  // Check if the object has the roles property and it matches the emptyRole structure
+  if (obj.roles && JSON.stringify(obj.roles) === JSON.stringify([emptyRole])) {
+    obj.roles = [];
+  }
+
+  // Check if the object has the entitlements property and it matches the emptyEntitlement structure
+  if (obj.entitlements && JSON.stringify(obj.entitlements) === JSON.stringify([emptyEntitlement])) {
+    obj.entitlements = [];
+  }
+
+  return obj;
+}
\ No newline at end of file