diff --git a/styles/sections/_application_edit.scss b/styles/sections/_application_edit.scss
index 94afb41e..8ff79b7b 100644
--- a/styles/sections/_application_edit.scss
+++ b/styles/sections/_application_edit.scss
@@ -91,9 +91,23 @@
     margin-bottom: 8 * $gap;
     text-align: left;
 
-    .usa-input {
+    .form-row {
       margin: $gap * 2;
+    }
 
+    .usa-alert {
+      margin: -0.5em 0;
+      padding: $gap;
+      background-image: unset;
+
+      &-body {
+        padding: 0;
+        width: 100%;
+        display: unset;
+      }
+    }
+
+    .usa-input {
       &__title-inline {
         font-weight: $font-bold;
       }
@@ -102,12 +116,28 @@
         margin-bottom: 0;
       }
 
-      .env-role__no-access {
+      &.env-role__no-access {
         .usa-input__title-inline,
         .usa-input__help {
           color: $color-gray;
         }
       }
+
+      &__choices {
+        &.revoke-button label {
+          padding: 1rem 2rem;
+
+          &::before {
+            display: none;
+          }
+
+          &.link {
+            color: $color-blue;
+            text-decoration: underline;
+            text-align: right;
+          }
+        }
+      }
     }
 
     &__head {
@@ -118,15 +148,69 @@
       margin: 0.5em 0;
     }
   }
-
-  .form-row {
-    margin: 0;
-  }
 }
 
-.environment-name--gray {
-  font-weight: $font-normal;
-  color: $color-gray-medium;
+.environment-role {
+  padding: ($gap * 2) 0;
+
+  h4 {
+    margin-bottom: $gap / 4;
+  }
+
+  &__users {
+    background-color: $color-gray-lightest;
+    padding: ($gap * 1.2) ($gap * 0.6);
+    font-size: $small-font-size;
+    display: flex;
+    flex-wrap: wrap;
+
+    .environment-role__user {
+      background-color: $color-white;
+      border-radius: 0.5rem;
+      padding: ($gap / 2) $gap;
+      border: solid 2px $color-blue;
+      margin: $gap;
+      white-space: nowrap;
+      width: 20rem;
+      position: relative;
+      height: 3.6rem;
+
+      &-field {
+        position: absolute;
+        background-color: $color-white;
+        margin-top: $gap * 2;
+        padding: $gap;
+        left: -0.1rem;
+        border: solid 1px $color-gray-light;
+        width: 20rem;
+        z-index: 3;
+
+        .usa-input {
+          margin: 0;
+
+          li {
+            background-color: $color-white;
+            border: none;
+          }
+        }
+      }
+
+      &.unassigned {
+        border: solid 1px $color-gray-light;
+      }
+
+      .icon-link {
+        padding: 0;
+      }
+    }
+
+    .environment-role__no-user {
+      margin: $gap;
+      padding: ($gap / 2) $gap;
+      font-weight: $font-normal;
+      height: 3.6rem;
+    }
+  }
 }
 
 .application-list-item {
diff --git a/templates/applications/fragments/member_form_fields.html b/templates/applications/fragments/member_form_fields.html
index 5c43c277..7b57cac1 100644
--- a/templates/applications/fragments/member_form_fields.html
+++ b/templates/applications/fragments/member_form_fields.html
@@ -1,55 +1,87 @@
+{% from "components/alert.html" import Alert %}
 {% from "components/checkbox_input.html" import CheckboxInput %}
 {% from "components/text_input.html" import TextInput %}
 {% from "components/phone_input.html" import PhoneInput %}
 
 {% macro EnvRoleInput(field, member_role_id=None) %}
   {% set role = field.role.data if not field.deleted.data else "Access Suspended" %}
-  <div class="form-row usa-input">
-    <div class="form-col form-col--two-thirds">
-      <div class="{% if field.deleted.data or field.role.data == 'No Access' %}env-role__no-access{% endif %}">
-        <div v-bind:class='["usa-input__title-inline", {"environment-name--gray": value === "None" }]'>
-          {{ field.environment_name.data }}
+  {% if field.role.data != "No Access" and not field.deleted.data -%}
+    <checkboxinput
+      name="'{{ field.deleted.name | string }}-{% if member_role_id %}-{{ member_role_id }}{% endif %}'"
+      inline-template
+      key="'{{ field.deleted.name | string }}-{% if member_role_id %}-{{ member_role_id }}{% endif %}'"
+      v-bind:initial-checked='{{ field.deleted.data|string|lower }}'
+      v-bind:optional="true"
+      >
+      <fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices revoke-button">
+        {% set id = "{}-{}".format(field.deleted.name, member_role_id) %}
+        <div class="form-row" v-if="!isChecked">
+          <div class="form-col form-col--two-thirds">
+            <div class="usa-input__title-inline">
+              {{ field.environment_name.data }}
+            </div>
+            <p class="usa-input__help">
+              {{ role }}
+            </p>
+          </div>
+          <div class="form-col form-col--third">
+            {{ field.deleted(id=id, checked=True, **{"v-model": "isChecked"}) }}
+            {{ field.deleted.label(for=id, class="usa-button button-danger-outline") | safe }}
+          </div>
         </div>
-        <p class="usa-input__help">
-          {{ role }}
-        </p>
+        <div v-else>
+          {% call Alert(level='warning') %}
+            <div class="form-row">
+              <div class="form-col form-col--two-thirds">
+                <div class="usa-input__title-inline">
+                  {{ field.environment_name.data }}
+                </div>
+                <p class="usa-input__help">
+                  Save changes to revoke access, <strong>this can not be undone.</strong>
+                </p>
+              </div>
+              <div class="form-col form-col--third">
+                {{ field.deleted(id=id, checked=True, **{"v-model": "isChecked"}) }}
+                <label for="{{ id }}" class="link">Undo</label>
+              </div>
+            </div>
+          {% endcall %}
+        </div>
+      </fieldset>
+    </checkboxinput>
+  {% else %}
+    <div class="form-row">
+      <!-- refactor this into its own macro? -->
+      <div class="form-col form-col--two-thirds">
+        <div class="usa-input {% if field.deleted.data or field.role.data == 'No Access' %}env-role__no-access{% endif %}">
+          <div class='usa-input__title-inline'>
+            {{ field.environment_name.data }}
+          </div>
+          <p class="usa-input__help">
+            {{ role }}
+          </p>
+        </div>
+      </div>
+      <div class="form-col form-col--third">
+        {% if field.role.data == "No Access" and not field.deleted.data -%}
+          <optionsinput inline-template
+            v-bind:initial-value="'{{ field.role.data | string }}'"
+            v-bind:name="'{{ field.name | string }}{% if member_role_id %}-{{ member_role_id }}{% endif %}'"
+            v-bind:optional="true"
+            v-bind:watch="true">
+            <fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices">
+              {{ field.role(**{"v-model": "value", "id": "{}-{}".format(field.role.name, member_role_id)}) }}
+            </fieldset>
+          </optionsinput>
+        {% elif field.deleted.data -%}
+          <p class="usa-input__help">
+            Suspended access cannot be modified.
+          </p>
+        {%- endif %}
+        {{ field.environment_id() }}
       </div>
     </div>
-    <div class="form-col form-col--third">
-      {% if field.role.data == "No Access" and not field.deleted.data -%}
-        <optionsinput inline-template
-          v-bind:initial-value="'{{ field.role.data | string }}'"
-          v-bind:name="'{{ field.name | string }}{% if member_role_id %}-{{ member_role_id }}{% endif %}'"
-          v-bind:optional="true"
-          v-bind:watch="true">
-          <fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices">
-            {{ field.role(**{"v-model": "value", "id": "{}-{}".format(field.role.name, member_role_id)}) }}
-          </fieldset>
-        </optionsinput>
-      {% elif field.role.data != "No Access" and not field.deleted.data -%}
-        <checkboxinput
-          name="'{{ field.deleted.name | string }}-{% if member_role_id %}-{{ member_role_id }}{% endif %}'"
-          inline-template
-          key="'{{ field.deleted.name | string }}-{% if member_role_id %}-{{ member_role_id }}{% endif %}'"
-          v-bind:initial-checked='{{ field.deleted.data|string|lower }}'
-          v-bind:optional="true"
-          >
-          <fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
-            <legend>
-              {% set id = "{}-{}".format(field.deleted.name, member_role_id) %}
-              {{ field.deleted(id=id, checked=True, **{"v-model": "isChecked"}) }}
-              {{ field.deleted.label(for=id) | safe }}
-            </legend>
-          </fieldset>
-        </checkboxinput>
-      {% elif field.deleted.data -%}
-        <p class="usa-input__help">
-          Suspended access cannot be modified.
-        </p>
-      {%- endif %}
-      {{ field.environment_id() }}
-    </div>
-  </div>
+  {% endif %}
 {% endmacro %}
 
 {% macro PermsFields(form, new=False, member_role_id=None) %}