diff --git a/js/components/forms/edit_workspace_member.js b/js/components/forms/edit_workspace_member.js
index 08ea5d14..7b43599e 100644
--- a/js/components/forms/edit_workspace_member.js
+++ b/js/components/forms/edit_workspace_member.js
@@ -30,7 +30,9 @@ export default {
     change: function (e) {
       this.value = e.target.value
     },
-    // method to map ugly name to human readable name here
+    readableName: function (role) {
+      return role.replace(/[_]/g, " ")
+    },
   },
 
   mounted: function () {
diff --git a/templates/workspaces/members/edit.html b/templates/workspaces/members/edit.html
index a8f767e3..4506ce61 100644
--- a/templates/workspaces/members/edit.html
+++ b/templates/workspaces/members/edit.html
@@ -81,7 +81,7 @@
             <div class='project-list-item__environment__actions'>
               <div>{{ form.data["environment_role"] }}</div>
 
-              <span class="{{ label_class }}" v-html="value"></span>
+              <span class="{{ label_class }}" v-html:on=readableName(value)></span>
               <button v-on:click="openModal('{{ env.name }}RolesModal')" type="button" class="icon-link">set role</button>
               {% call Modal(name=env.name + 'RolesModal', dismissable=False) %}
                   <div class='block-list'>