diff --git a/js/components/__tests__/edit_environment_role.test.js b/js/components/__tests__/edit_environment_role.test.js
index e8552d39..4421d58c 100644
--- a/js/components/__tests__/edit_environment_role.test.js
+++ b/js/components/__tests__/edit_environment_role.test.js
@@ -2,20 +2,20 @@ import { shallowMount } from '@vue/test-utils'
 import EditEnvironmentRole from '../forms/edit_environment_role'
 
 describe('EditEnvironmentRole', () => {
-  var initialRoles, wrapper
+  var initialRoleCategories, wrapper
 
   beforeEach(() => {
-    initialRoles = [
+    initialRoleCategories = [
       {
         role: 'no_access',
         members: [
-          { role: null, user_id: '123' },
-          { role: null, user_id: '456' },
+          { role_name: null, user_id: '123' },
+          { role_name: null, user_id: '456' },
         ],
       },
       {
         role: 'Basic Access',
-        members: [{ role: 'Basic Access', user_id: '789' }],
+        members: [{ role_name: 'Basic Access', user_id: '789' }],
       },
       {
         role: 'Network Admin',
@@ -24,36 +24,41 @@ describe('EditEnvironmentRole', () => {
       {
         role: 'Business Read-only',
         members: [
-          { role: 'Business Read-only', user_id: '012' },
-          { role: 'Business Read-only', user_id: '345' },
+          { role_name: 'Business Read-only', user_id: '012' },
+          { role_name: 'Business Read-only', user_id: '345' },
         ],
       },
       {
         role: 'Technical Read-only',
-        members: [{ role: 'Technical Read-only', user_id: '678' }],
+        members: [{ role_name: 'Technical Read-only', user_id: '678' }],
       },
     ]
 
-    wrapper = shallowMount(EditEnvironmentRole, { propsData: { initialRoles } })
+    wrapper = shallowMount(EditEnvironmentRole, {
+      propsData: { initialRoleCategories },
+    })
   })
 
   it('removes null roles to no_access', () => {
     let roles = wrapper.vm.sanitizeValues([
-      { role: 'no_access', members: [{ role: null }] },
+      { role: 'no_access', members: [{ role_name: null }] },
     ])
     expect(roles).toEqual([
-      { role: 'no_access', members: [{ role: 'no_access' }] },
+      { role: 'no_access', members: [{ role_name: 'no_access' }] },
     ])
   })
 
   it('gets the data for a user', () => {
     let member_data = wrapper.vm.getUserInfo('678')
 
-    expect(member_data).toEqual({ role: 'Technical Read-only', user_id: '678' })
+    expect(member_data).toEqual({
+      role_name: 'Technical Read-only',
+      user_id: '678',
+    })
   })
 
   it('removes a user from role', () => {
-    let techRole = wrapper.vm.roles.find(role => {
+    let techRole = wrapper.vm.roleCategories.find(role => {
       return role.role === 'Technical Read-only'
     })
 
@@ -63,7 +68,7 @@ describe('EditEnvironmentRole', () => {
   })
 
   it('adds user to a role', () => {
-    let techRole = wrapper.vm.roles.find(role => {
+    let techRole = wrapper.vm.roleCategories.find(role => {
       return role.role === 'Technical Read-only'
     })
 
@@ -73,10 +78,10 @@ describe('EditEnvironmentRole', () => {
   })
 
   it('updates users role', () => {
-    let techRole = wrapper.vm.roles.find(role => {
+    let techRole = wrapper.vm.roleCategories.find(role => {
       return role.role === 'Technical Read-only'
     })
-    let businessRole = wrapper.vm.roles.find(role => {
+    let businessRole = wrapper.vm.roleCategories.find(role => {
       return role.role === 'Business Read-only'
     })
 
diff --git a/js/components/forms/edit_environment_role.js b/js/components/forms/edit_environment_role.js
index 2104514f..cbb09457 100644
--- a/js/components/forms/edit_environment_role.js
+++ b/js/components/forms/edit_environment_role.js
@@ -11,13 +11,13 @@ export default {
   mixins: [FormMixin],
 
   props: {
-    initialRoles: Array,
+    initialRoleCategories: Array,
   },
 
   data: function() {
     return {
       selectedSection: null,
-      roles: this.sanitizeValues(this.initialRoles),
+      roleCategories: this.sanitizeValues(this.initialRoleCategories),
     }
   },
 
@@ -25,8 +25,8 @@ export default {
     sanitizeValues: function(roles) {
       roles.forEach(role => {
         role.members.forEach(member => {
-          if (member.role === null) {
-            member.role = 'no_access'
+          if (member.role_name === null) {
+            member.role_name = 'no_access'
           }
         })
       })
@@ -53,7 +53,7 @@ export default {
     },
 
     getUserInfo: function(userId) {
-      for (let role of this.roles) {
+      for (let role of this.roleCategories) {
         for (let member of role.members) {
           if (member.user_id === userId) {
             return member
@@ -63,7 +63,7 @@ export default {
     },
 
     removeUser: function(userId) {
-      for (let role of this.roles) {
+      for (let role of this.roleCategories) {
         role.members = role.members.filter(member => {
           return member.user_id !== userId
         })
@@ -74,9 +74,9 @@ export default {
     },
 
     addUser: function(userInfo, newRole) {
-      this.roles.forEach(role => {
+      this.roleCategories.forEach(role => {
         if (role.role === newRole) {
-          userInfo.role = newRole
+          userInfo.role_name = newRole
           role.members.push(userInfo)
         }
       })
diff --git a/templates/fragments/applications/edit_environment_team_form.html b/templates/fragments/applications/edit_environment_team_form.html
index 71133e0c..393fa4f9 100644
--- a/templates/fragments/applications/edit_environment_team_form.html
+++ b/templates/fragments/applications/edit_environment_team_form.html
@@ -17,23 +17,23 @@
       {{ env_form.env_id() }}
       <edit-environment-role
         inline-template
-        v-bind:initial-roles='{{ env_form.team_roles.data | tojson }}'>
+        v-bind:initial-role-categories='{{ env_form.team_roles.data | tojson }}'>
         <div>
-          <div v-for='(role, roleindex) in roles' class='environment-role'>
-            <h4 v-if='checkNoAccess(role.role)'>
+          <div v-for='(roleCategory, roleindex) in roleCategories' class='environment-role'>
+            <h4 v-if='checkNoAccess(roleCategory.role)'>
               {{ 'fragments.edit_environment_team_form.unassigned_title' | translate }}
             </h4>
-            <h4 v-else v-html='role.role'></h4>
+            <h4 v-else v-html='roleCategory.role'></h4>
             <ul class='environment-role__users'>
               <div
-                v-if="role.members && !role.members.length"
+                v-if="roleCategory.members && !roleCategory.members.length"
                 class='environment-role__no-user'>
                 {{ 'fragments.edit_environment_team_form.no_members' | translate }}
               </div>
               <li
-                v-for='(member, memberindex) in role.members'
+                v-for='(member, memberindex) in roleCategory.members'
                 class="environment-role__user"
-                v-bind:class="{'unassigned': checkNoAccess(member.role)}">
+                v-bind:class="{'unassigned': checkNoAccess(member.role_name)}">
                 <span v-html='member.user_name'>
                 </span>
                 <span v-on:click="toggleSection(member.user_id)" class="icon-link right">
@@ -48,22 +48,22 @@
                       class="usa-input__choices"
                       v-on:change="onInput">
                       <ul
-                        v-for='(role, roleinputindex) in roles'
-                        v-bind:id="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role'">
+                        v-for='(roleCategory, roleinputindex) in roleCategories'
+                        v-bind:id="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role_name'">
                         <li>
                           <input
-                            v-bind:checked="member.role === role.role"
-                            v-bind:name="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role'"
-                            v-bind:id="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role-' + roleinputindex"
+                            v-bind:checked="member.role_name === roleCategory.role"
+                            v-bind:name="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role_name'"
+                            v-bind:id="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role_name-' + roleinputindex"
                             type="radio"
                             v-bind:user-id='member.user_id'
-                            v-bind:value='role.role'>
+                            v-bind:value='roleCategory.role'>
                           <label
-                            v-bind:for="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role-' + roleinputindex">
-                            <span v-if='checkNoAccess(role.role)'>
+                            v-bind:for="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role_name-' + roleinputindex">
+                            <span v-if='checkNoAccess(roleCategory.role)'>
                               {{ 'fragments.edit_environment_team_form.no_access' | translate }}
                             </span>
-                            <span v-else v-html='role.role'></span>
+                            <span v-else v-html='roleCategory.role'></span>
                           </label>
                         </li>
                       </ul>
diff --git a/tests/routes/applications/test_settings.py b/tests/routes/applications/test_settings.py
index ef28c3ed..1e5bfb02 100644
--- a/tests/routes/applications/test_settings.py
+++ b/tests/routes/applications/test_settings.py
@@ -303,13 +303,13 @@ def test_update_team_env_roles(client, user_session):
     form_data = {
         "envs-0-env_id": environment.id,
         "envs-0-team_roles-0-members-0-user_id": app_role.user.id,
-        "envs-0-team_roles-0-members-0-role": CSPRole.TECHNICAL_READ.value,
+        "envs-0-team_roles-0-members-0-role_name": CSPRole.TECHNICAL_READ.value,
         "envs-0-team_roles-1-members-0-user_id": env_role_1.user.id,
-        "envs-0-team_roles-1-members-0-role": CSPRole.NETWORK_ADMIN.value,
+        "envs-0-team_roles-1-members-0-role_name": CSPRole.NETWORK_ADMIN.value,
         "envs-0-team_roles-1-members-1-user_id": env_role_2.user.id,
-        "envs-0-team_roles-1-members-1-role": CSPRole.BASIC_ACCESS.value,
+        "envs-0-team_roles-1-members-1-role_name": CSPRole.BASIC_ACCESS.value,
         "envs-0-team_roles-1-members-2-user_id": env_role_3.user.id,
-        "envs-0-team_roles-1-members-2-role": "no_access",
+        "envs-0-team_roles-1-members-2-role_name": "no_access",
     }
 
     user_session(application.portfolio.owner)