diff --git a/js/components/checkbox_input.js b/js/components/checkbox_input.js
index 32fd3337..2a1b0c89 100644
--- a/js/components/checkbox_input.js
+++ b/js/components/checkbox_input.js
@@ -6,6 +6,7 @@ export default {
   props: {
     name: String,
     initialChecked: Boolean,
+    optional: Boolean,
   },
 
   data: function() {
@@ -18,7 +19,7 @@ export default {
     emitEvent('field-mount', this, {
       optional: this.optional,
       name: this.name,
-      valid: this.isChecked,
+      valid: this.optional || this.isChecked,
     })
   },
 
@@ -27,7 +28,7 @@ export default {
       emitEvent('field-change', this, {
         value: e.target.checked,
         name: this.name,
-        valid: this.isChecked,
+        valid: this.optional || this.isChecked,
       })
     },
   },
diff --git a/templates/components/checkbox_input.html b/templates/components/checkbox_input.html
index be4c96bb..6ce8f511 100644
--- a/templates/components/checkbox_input.html
+++ b/templates/components/checkbox_input.html
@@ -4,12 +4,14 @@
   inline=False,
   classes="",
   key=field.name,
-  id=field.name) -%}
+  id=field.name,
+  optional=False) -%}
   <checkboxinput
     name='{{ field.name }}'
     inline-template
     key='{{ key }}'
     v-bind:initial-checked='{{ field.data|string|lower }}'
+    v-bind:optional={{ optional|lower }}
     >
     <div>
       <div class='usa-input {{ classes }} {% if field.errors %}usa-input--error{% endif %}' v-bind:class="[{ 'checked': isChecked }]">
diff --git a/templates/fragments/applications/member_perms_form_fields.html b/templates/fragments/applications/member_perms_form_fields.html
index 0830e09b..5467dc33 100644
--- a/templates/fragments/applications/member_perms_form_fields.html
+++ b/templates/fragments/applications/member_perms_form_fields.html
@@ -14,9 +14,9 @@
         {% set del_env = "perms_del_env-{}".format(member_role_id) %}
       {% endif %}
 
-      {{ CheckboxInput(app_perms_form.perms_team_mgmt, classes="input__inline-fields", key=team_mgmt, id=team_mgmt) }}
-      {{ CheckboxInput(app_perms_form.perms_env_mgmt, classes="input__inline-fields", key=env_mgmt, id=env_mgmt) }}
-      {{ CheckboxInput(app_perms_form.perms_del_env, classes="input__inline-fields", key=del_env, id=del_env) }}
+      {{ CheckboxInput(app_perms_form.perms_team_mgmt, classes="input__inline-fields", key=team_mgmt, id=team_mgmt, optional=True) }}
+      {{ CheckboxInput(app_perms_form.perms_env_mgmt, classes="input__inline-fields", key=env_mgmt, id=env_mgmt, optional=True) }}
+      {{ CheckboxInput(app_perms_form.perms_del_env, classes="input__inline-fields", key=del_env, id=del_env, optional=True) }}
     </div>
     <div class="environment_roles environment-roles-new">
       <h4>{{ "portfolios.applications.members.form.env_access" | translate }}</h4>
@@ -25,9 +25,10 @@
         <optionsinput inline-template
           v-bind:initial-value="'{{ environment_data.role.data | string }}'"
           v-bind:name="'{{ environment_data.name | string }}'"
-          v-bind:optional="true">
+          v-bind:optional="true"
+          v-bind:watch="true">
           <div class="usa-input">
-            <fieldset data-ally-disabled="true" class="usa-input__choices">
+            <fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices">
               <div class="form-row">
                 <div class="form-col form-col--two-thirds">
                   <legend>
diff --git a/templates/portfolios/applications/settings.html b/templates/portfolios/applications/settings.html
index 7eed29f0..da521411 100644
--- a/templates/portfolios/applications/settings.html
+++ b/templates/portfolios/applications/settings.html
@@ -127,17 +127,16 @@
               <h1>{{ Icon('avatar') }} {{ member.user_name }}</h1>
               <hr>
             </div>
-            <form id='{{ modal_name }}' method="POST" action="{{ url_for('applications.update_member', application_id=application.id, application_role_id=member.role_id) }}">
-              {{ member.form.csrf_token }}
-              {{ MemberPermsFields(app_perms_form=member.form, env_roles_form=member.form.environment_roles, member_role_id=member.role_id) }}
-              <div class="action-group">
-                <input
-                  type="submit"
-                  class='action-group__action usa-button'
-                  value='Update'>
-                <a class='action-group__action usa-button usa-button-secondary' v-on:click="closeModal('{{ modal_name }}')">{{ "common.cancel" | translate }}</a>
-              </div>
-            </form>
+            <base-form inline-template>
+              <form id='{{ modal_name }}' method="POST" action="{{ url_for('applications.update_member', application_id=application.id, application_role_id=member.role_id) }}">
+                {{ member.form.csrf_token }}
+                {{ MemberPermsFields(app_perms_form=member.form, env_roles_form=member.form.environment_roles, member_role_id=member.role_id) }}
+                <div class="action-group">
+                  {{ SaveButton(text='Update', element='input', additional_classes='action-group__action') }}
+                  <a class='action-group__action usa-button usa-button-secondary' v-on:click="closeModal('{{ modal_name }}')">{{ "common.cancel" | translate }}</a>
+                </div>
+              </form>
+            </base-form>
           {% endcall %}
         {% endfor %}
         <table>