diff --git a/atst/forms/data.py b/atst/forms/data.py
index 959dec96..21427660 100644
--- a/atst/forms/data.py
+++ b/atst/forms/data.py
@@ -187,17 +187,18 @@ ENVIRONMENT_ROLES = [
 ]
 
 ENVIRONMENT_ROLES = [
+    (None, {"name": "No access", "description": "No environment access."}),
     (
-        "developer",
+        "meow",
         {
-            "name": "Developer",
+            "name": "Meow",
             "description": "Configures cloud-based IaaS and PaaS computing, networking, and storage services.",
         },
     ),
     (
-        "owner",
+        "woof",
         {
-            "name": "Workspace Owner",
+            "name": "Woof",
             "description": "Can add, edit, deactivate access to all projects, environments, and members. Can view budget reports. Can start and edit JEDI Cloud requests.",
         },
     ),
diff --git a/atst/routes/workspaces.py b/atst/routes/workspaces.py
index 23e05740..0dca879b 100644
--- a/atst/routes/workspaces.py
+++ b/atst/routes/workspaces.py
@@ -214,7 +214,7 @@ def view_member(workspace_id, member_id):
         "edit this workspace user",
     )
     member = WorkspaceUsers.get(workspace_id, member_id)
-    form = EditMemberForm(workspace_role=member.role)
+    form = EditMemberForm(workspace_role=member.role, environment_role="")
     return render_template(
         "workspaces/members/edit.html", form=form, workspace=workspace, member=member
     )
diff --git a/templates/workspaces/members/edit.html b/templates/workspaces/members/edit.html
index 24489e6f..2afcf936 100644
--- a/templates/workspaces/members/edit.html
+++ b/templates/workspaces/members/edit.html
@@ -3,223 +3,185 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/modal.html" import Modal %}
 {% from "components/selector.html" import Selector %}
+{% from "components/options_input.html" import OptionsInput %}
 
 {% block content %}
 
-<form method="POST" action="{{ url_for('workspaces.update_member', workspace_id=workspace.id, member_id=member.user_id) }}" autocomplete="false">
-  {{ form.csrf_token }}
+<edit-workspace-member inline-template v-bind:initial-data='{{ form.data|tojson }}' v-bind:choices='{{ form.environment_role.choices | tojson }}'>
+  <form method="POST" action="{{ url_for('workspaces.update_member', workspace_id=workspace.id, member_id=member.user_id) }}" autocomplete="false">
+    {{ form.csrf_token }}
 
-  <div class='panel member-card'>
-    <div class='member-card__header'>
-      <h1 class='member-card__heading'>{{ member.user.full_name }}</h1>
+    <div class='panel member-card'>
+      <div class='member-card__header'>
+        <h1 class='member-card__heading'>{{ member.user.full_name }}</h1>
 
-        <div class="usa-input member-card__input">
-          {{ Selector(form.workspace_role) }}
-        </div>
+          <div class="usa-input member-card__input">
+            {{ Selector(form.workspace_role) }}
+          </div>
 
-    </div>
-    <div class='member-card__details'>
-      <dl>
-        <div>
-          <dt>DOD ID:</dt>
-          <dd>{{ member.user.dod_id }}</dd>
-        </div>
-        <div>
-          <dt>Email:</dt>
-          <dd>{{ member.user.email }}</dd>
-        </div>
-      </dl>
-      <a href='#' class='icon-link'>edit account details</a>
-    </div>
-  </div>
-
-  <div class="panel">
-    <div class="panel__heading panel__heading--tight">
-      <h2 class="h3">Manage Access <div class="subtitle">Grant access to an environment</div></h2>
-    </div>
-  </div>
-
-  <div class='search-bar'>
-    <div class='usa-input search-input'>
-      <label for='project-search'>Search by project name</label>
-      <input type='search' id='project-search' name='project-search' placeholder="Search by project name"/>
-      <button type="submit">
-        <span class="hide">Search</span>
-      </button>
-    </div>
-  </div>
-
-  {% call Modal(name='rolesModal', dismissable=False) %}
-  <div class="block-list">
-    <header class="block-list__header">
-      <h2 class="block-list__title">
-        Environment access for {{ member.user.full_name }}
-        <div class='subtitle'>Project Name - Environment Name</div>
-      </h2>
-    </header>
-
-    <ul>
-      <li class='block-list__item block-list__item--selectable'>
-        <input type='radio' name='radio' id='developer' />
-        <label for='developer'>
-          <dl>
-            <dt>Developer</dt>
-            <dd>Configures cloud-based IaaS and PaaS computing, networking, and storage services.</dd>
-          </dl>
-        </label>
-      </li>
-
-      <li class='block-list__item block-list__item--selectable'>
-        <input type='radio' name='radio' id='database_admin' />
-        <label for='database_admin'>
-          <dl>
-            <dt>Database Administrator</dt>
-            <dd>Configures cloud-based database services.</dd>
-          </dl>
-        </label>
-      </li>
-
-      <li class='block-list__item block-list__item--selectable'>
-        <input type='radio' name='radio' id='devops' />
-        <label for='devops'>
-          <dl>
-            <dt>DevOps</dt>
-            <dd>Provisions, deprovisions, and deploys cloud-based IaaS and PaaS computing, networking, and storage services, including pre-configured machine images.</dd>
-          </dl>
-        </label>
-      </li>
-
-      <li class='block-list__item block-list__item--selectable'>
-        <input type='radio' name='radio' id='billing_admin' />
-        <label for='billing_admin'>
-          <dl>
-            <dt>Billing Administrator</dt>
-            <dd>Views cloud resource usage, budget reports, and invoices; Tracks budgets, including spend reports, cost planning and projections, and sets limits based on cloud service usage.</dd>
-          </dl>
-        </label>
-      </li>
-
-      <li class='block-list__item block-list__item--selectable'>
-        <input type='radio' name='radio' id='security_admin' />
-        <label for='security_admin'>
-          <dl>
-            <dt>Security Administrator</dt>
-            <dd>Accesses information security and control tools of cloud resources which include viewing cloud resource usage logging, user roles and permissioning history.</dd>
-          </dl>
-        </label>
-      </li>
-
-      <li class='block-list__item block-list__item--selectable'>
-        <input type='radio' name='radio' id='financial_auditor' />
-        <label for='financial_auditor'>
-          <dl>
-            <dt>Financial Auditor</dt>
-            <dd>Views cloud resource usage and budget reports.</dd>
-          </dl>
-        </label>
-      </li>
-    </ul>
-
-    <div class='block-list__footer'>
-      <div class='action-group'>
-        <a v-on:click="closeModal('rolesModal')" class='action-group__action usa-button'>Select Access Role</a>
-        <a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('rolesModal')">No Access</a>
+      </div>
+      <div class='member-card__details'>
+        <dl>
+          <div>
+            <dt>DOD ID:</dt>
+            <dd>{{ member.user.dod_id }}</dd>
+          </div>
+          <div>
+            <dt>Email:</dt>
+            <dd>{{ member.user.email }}</dd>
+          </div>
+        </dl>
+        <a href='#' class='icon-link'>edit account details</a>
       </div>
     </div>
 
-  </div>
+    <div class="panel">
+      <div class="panel__heading panel__heading--tight">
+        <h2 class="h3">Manage Access <div class="subtitle">Grant access to an environment</div></h2>
+      </div>
+    </div>
 
-  {% endcall %}
-
-  <div is='toggler' default-visible class='block-list project-list-item'>
-    <template slot-scope='props'>
-      <header class='block-list__header'>
-      <button type='button' v-on:click='props.toggle' class='icon-link icon-link--large icon-link--default spend-table__project__toggler'>
-          <template v-if='props.isVisible'>{{ Icon('caret_down') }}</template>
-          <template v-else>{{ Icon('caret_right') }}</template>
-          <h3 class="block-list__title">Code.mil</h3>
+    <div class='search-bar'>
+      <div class='usa-input search-input'>
+        <label for='project-search'>Search by project name</label>
+        <input type='search' id='project-search' name='project-search' placeholder="Search by project name"/>
+        <button type="submit">
+          <span class="hide">Search</span>
         </button>
-        <span><a href="#" class="icon-link icon-link--danger">revoke all access</a></span>
-      </header>
-      <ul v-show='props.isVisible'>
-        <li class='block-list__item project-list-item__environment'>
-          <span class='project-list-item__environment'>
-            Development
-          </span>
-          <div class='project-list-item__environment__actions'>
-            <span class="label">no access </span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
-          </div>
-        </li>
-        <li class='block-list__item project-list-item__environment'>
-          <span class='project-list-item__environment'>
-            Sandbox
-          </span>
-          <div class='project-list-item__environment__actions'>
-            <span class="label">no access</span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
-          </div>
-        </li>
-        <li class='block-list__item project-list-item__environment'>
-          <span class='project-list-item__environment'>
-            Production
-          </span>
-          <div class='project-list-item__environment__actions'>
-            <span class="label label--success">Billing</span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
-          </div>
-        </li>
-      </ul>
-    </template>
-  </div>
+      </div>
+    </div>
+      {{ Selector(form.environment_role) }}
 
-  <div is="toggler" class='block-list project-list-item'>
-    <template slot-scope='props'>
-      <header class='block-list__header'>
-      <button type='button' v-on:click='props.toggle' class='icon-link icon-link--large icon-link--default spend-table__project__toggler'>
-          <template v-if='props.isVisible'>{{ Icon('caret_down') }}</template>
-          <template v-else>{{ Icon('caret_right') }}</template>
-          <h3 class="block-list__title">Digital Dojo</h3>
-        </button>
-        <span class="label">no access</span>
-      </header>
-      <ul v-show='props.isVisible'>
-        <li class='block-list__item project-list-item__environment'>
-          <span class='project-list-item__environment'>
-            Development
-          </span>
-          <div class='project-list-item__environment__actions'>
-            <span class="label">no access </span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
-          </div>
-        </li>
-        <li class='block-list__item project-list-item__environment'>
-          <span class='project-list-item__environment'>
-            Sandbox
-          </span>
-          <div class='project-list-item__environment__actions'>
-            <span class="label">no access</span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
-          </div>
-        </li>
-        <li class='block-list__item project-list-item__environment'>
-          <span class='project-list-item__environment'>
-            Production
-          </span>
-          <div class='project-list-item__environment__actions'>
-            <span class="label">no access</span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
-          </div>
-        </li>
-      </ul>
-    </template>
-  </div>
+    {% call Modal(name='rolesModal', dismissable=False) %}
+      <div class='block-list'>
+        <ul>
+          {% for choice in form.environment_role.choices %}
+          <li class='block-list__item block-list__item--selectable'>
 
-  <div class='action-group'>
-    <button class='action-group__action usa-button usa-button-big'>
-      {% if is_new_member %}Create{% else %}Save{% endif %}
-    </button>
-    <a href='#' class='action-group__action icon-link'>
-      {{ Icon('x') }}
-      <span>Cancel</span>
-    </a>
-  </div>
+            {% if choice[0] != ""  %}
+              <input
+                name='env'
+                v-on:change='change'
+                type='radio'
+                id="env_{{ choice[0] }}"
+                value='{{ choice[0] }}'
+                {% if role == choice[0] %}
+                  checked='checked'
+                {% endif %}
+              />
+              <label for="env_{{ choice[0] }}">
+                {% if choice[1].description %}
+                  <dl>
+                    <dt>{{ choice[1].name }}</dt>
+                    <dd>{{ choice[1].description }}</dd>
+                  </dl>
+                {% else %}
+                  {{ choice[1].name }}
+                {% endif %}
+              </label>
+              {% endif %}
+          </li>
+          {% endfor %}
+        </ul>
+        <div class='block-list__footer'>
+          <div class='action-group'>
+            <a v-on:click="closeModal('rolesModal')" class='action-group__action usa-button'>Select Access Role</a>
+            <a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('rolesModal')">Cancel</a>
+          </div>
+        </div>
+      </div>
+    {% endcall %}
 
-</form>
+    <div is='toggler' default-visible class='block-list project-list-item'>
+      <template slot-scope='{ isVisible, toggle }'>
+        <header class='block-list__header'>
+        <button v-on:click='toggle' class='icon-link icon-link--large icon-link--default spend-table__project__toggler'>
+            <template v-if='isVisible'>{{ Icon('caret_down') }}</template>
+            <template v-else>{{ Icon('caret_right') }}</template>
+            <h3 class="block-list__title">Code.mil</h3>
+          </button>
+          <span><a href="#" class="icon-link icon-link--danger">revoke all access</a></span>
+        </header>
+        <ul v-show='isVisible'>
+          <li class='block-list__item project-list-item__environment'>
+            <span class='project-list-item__environment'>
+              Development
+            </span>
+            <div class='project-list-item__environment__actions'>
+              <span class="label">no access </span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
+            </div>
+          </li>
+          <li class='block-list__item project-list-item__environment'>
+            <span class='project-list-item__environment'>
+              Sandbox
+            </span>
+            <div class='project-list-item__environment__actions'>
+              <span class="label">no access</span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
+            </div>
+          </li>
+          <li class='block-list__item project-list-item__environment'>
+            <span class='project-list-item__environment'>
+              Production
+            </span>
+            <div class='project-list-item__environment__actions'>
+              <span class="label label--success">Billing</span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
+            </div>
+          </li>
+        </ul>
+      </template>
+    </div>
+
+    <div is="toggler" class='block-list project-list-item'>
+      <template slot-scope='{ isVisible, toggle }'>
+        <header class='block-list__header'>
+        <button v-on:click='toggle' class='icon-link icon-link--large icon-link--default spend-table__project__toggler'>
+            <template v-if='isVisible'>{{ Icon('caret_down') }}</template>
+            <template v-else>{{ Icon('caret_right') }}</template>
+            <h3 class="block-list__title">Digital Dojo</h3>
+          </button>
+          <span class="label">no access</span>
+        </header>
+        <ul v-show='isVisible'>
+          <li class='block-list__item project-list-item__environment'>
+            <span class='project-list-item__environment'>
+              Development
+            </span>
+            <div class='project-list-item__environment__actions'>
+              <span class="label">no access </span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
+            </div>
+          </li>
+          <li class='block-list__item project-list-item__environment'>
+            <span class='project-list-item__environment'>
+              Sandbox
+            </span>
+            <div class='project-list-item__environment__actions'>
+              <span class="label">no access</span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
+            </div>
+          </li>
+          <li class='block-list__item project-list-item__environment'>
+            <span class='project-list-item__environment'>
+              Production
+            </span>
+            <div class='project-list-item__environment__actions'>
+              <span class="label">no access</span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
+            </div>
+          </li>
+        </ul>
+      </template>
+    </div>
+
+    <div class='action-group'>
+      <button class='action-group__action usa-button usa-button-big'>
+        {% if is_new_member %}Create{% else %}Save{% endif %}
+      </button>
+      <a href='#' class='action-group__action icon-link'>
+        {{ Icon('x') }}
+        <span>Cancel</span>
+      </a>
+    </div>
+
+  </form>
+</edit-workspace-member>