diff --git a/js/components/forms/multi_step_modal_form.js b/js/components/forms/multi_step_modal_form.js
index f0742336..3ef31b81 100644
--- a/js/components/forms/multi_step_modal_form.js
+++ b/js/components/forms/multi_step_modal_form.js
@@ -9,7 +9,7 @@ import toggler from '../toggler'
 export default {
   name: 'multi-step-modal-form',
 
-  mixins: [FormMixin, Modal],
+  mixins: [FormMixin],
 
   components: {
     toggler,
@@ -38,7 +38,7 @@ export default {
 
   mounted: function() {
     this.$root.$on('field-change', this.handleValidChange)
-    this.$on('modalOpen', this.handleModalOpen)
+    this.$root.$on('modalOpen', this.handleModalOpen)
   },
 
   methods: {
diff --git a/js/mixins/modal.js b/js/mixins/modal.js
index b865097d..1a2fec6c 100644
--- a/js/mixins/modal.js
+++ b/js/mixins/modal.js
@@ -17,8 +17,21 @@ export default {
         filter: idSelector,
       })
     },
+
+    // TODO: activeModal should be tracked on the root
+    handleModalOpen: function(event) {
+      if (!event.isOpen) {
+        this.activeModal = null
+      }
+    },
   },
+
+  mounted: function() {
+    this.$root.$on('modalOpen', this.handleModalOpen)
+  },
+
   data: function() {
+    // TODO: only the root component should know about the activeModal
     return {
       activeModal: null,
       allyHandler: null,
diff --git a/templates/components/modal.html b/templates/components/modal.html
index c7b582ff..cb9426c1 100644
--- a/templates/components/modal.html
+++ b/templates/components/modal.html
@@ -1,7 +1,7 @@
 {% from "components/icon.html" import Icon %}
 
 {% macro Modal(name, dismissable=False, classes="") -%}
-  <div v-show="activeModal === '{{name}}'" v-cloak>
+  <div v-show="this.$root.activeModal === '{{name}}'" v-cloak>
     <div id='modal--{{name}}' class='modal {% if dismissable %}modal--dismissable{% endif%} {{ classes }}'>
       <div class='modal__container'>
         <div class='modal__dialog' role='dialog' aria-modal='true'>
diff --git a/templates/components/multi_step_modal_form.html b/templates/components/multi_step_modal_form.html
index 31b2a1b2..6a9cef68 100644
--- a/templates/components/multi_step_modal_form.html
+++ b/templates/components/multi_step_modal_form.html
@@ -25,30 +25,21 @@
   </div>
 {% endmacro %}
 
-{% macro MultiStepModalForm(name, form, form_action, steps, button_icon="", button_text="", link_classes="icon-link modal-link", dismissable=False) -%}
+{% macro MultiStepModalForm(name, form, form_action, steps, dismissable=False) -%}
   {% set step_count = steps|length %}
   <multi-step-modal-form inline-template :steps={{ step_count }}>
-    <div>
-      <a class='{{ link_classes }}' v-on:click="openModal('{{ name }}')">
-        {{ button_text }}
-
-        {% if button_icon != "" %}
-          {{ Icon(button_icon) }}
-        {% endif %}
-      </a>
-        {% call Modal(name=name, dismissable=dismissable, classes="wide") %}
-          <form id="{{ name }}" action="{{ form_action }}" method="POST" v-on:submit="handleSubmit">
-            {{ form.csrf_token }}
-            <div v-if="activeModal === '{{ name }}'">
-              {% for step in steps %}
-                <div class="modal__form" v-show="step === {{ loop.index0 }}">
-                  {{ FormSteps(step_count, loop.index) }}
-                  {{ step }}
-                </div>
-              {% endfor %}
+    {% call Modal(name=name, dismissable=dismissable, classes="wide") %}
+      <form id="{{ name }}" action="{{ form_action }}" method="POST" v-on:submit="handleSubmit">
+        {{ form.csrf_token }}
+        <div v-if="this.$root.activeModal === '{{ name }}'">
+          {% for step in steps %}
+            <div class="modal__form" v-show="step === {{ loop.index0 }}">
+              {{ FormSteps(step_count, loop.index) }}
+              {{ step }}
             </div>
-          </form>
-        {% endcall %}
-    </div>
+          {% endfor %}
+        </div>
+      </form>
+    {% endcall %}
   </multi-step-modal-form>
 {% endmacro %}
diff --git a/templates/fragments/admin/add_new_portfolio_member.html b/templates/fragments/admin/add_new_portfolio_member.html
index aaab74db..85db3a12 100644
--- a/templates/fragments/admin/add_new_portfolio_member.html
+++ b/templates/fragments/admin/add_new_portfolio_member.html
@@ -80,6 +80,4 @@
     member_form,
     url_for("portfolios.create_member", portfolio_id=portfolio.id),
     [step_one, step_two],
-    button_text=("portfolios.admin.add_new_member" | translate),
-    button_icon="plus",
   ) }}
diff --git a/templates/fragments/admin/change_ppoc.html b/templates/fragments/admin/change_ppoc.html
index d42782ac..0d16dbfa 100644
--- a/templates/fragments/admin/change_ppoc.html
+++ b/templates/fragments/admin/change_ppoc.html
@@ -69,14 +69,15 @@
 {% endset %}
 
 <div class="flex-reverse-row">
+  <a class="usa-button-primary" v-on:click="openModal('change-ppoc-form')">
+    {{ "fragments.ppoc.update_btn" | translate }}
+  </a>
   {{
     MultiStepModalForm(
       'change-ppoc-form',
       assign_ppoc_form,
       form_action=url_for("portfolios.update_ppoc", portfolio_id=portfolio.id),
       steps=[step_one, step_two],
-      button_text=("fragments.ppoc.update_btn" | translate),
-      link_classes="usa-button-primary"
     )
   }}
 </div>
diff --git a/templates/fragments/admin/portfolio_members.html b/templates/fragments/admin/portfolio_members.html
index 98bd8d13..5b47009c 100644
--- a/templates/fragments/admin/portfolio_members.html
+++ b/templates/fragments/admin/portfolio_members.html
@@ -66,6 +66,11 @@
 
           {% if user_can(permissions.CREATE_PORTFOLIO_USERS) %}
             {% include "fragments/admin/add_new_portfolio_member.html" %}
+            <a class="icon-link modal-link" v-on:click="openModal('add-port-mem')">
+              {{ "portfolios.admin.add_new_member" | translate }}
+
+              {{ Icon("plus") }}
+            </a>
           {% endif %}
         </div>
       </div>
diff --git a/templates/fragments/applications/add_new_application_member.html b/templates/fragments/applications/add_new_application_member.html
deleted file mode 100644
index b47ff87c..00000000
--- a/templates/fragments/applications/add_new_application_member.html
+++ /dev/null
@@ -1,15 +0,0 @@
-{% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
-
-{% import "fragments/applications/new_member_modal_content.html" as member_steps %}
-
-{{ MultiStepModalForm(
-    name='add-app-mem',
-    form=new_member_form,
-    form_action=url_for("applications.create_member", application_id=application.id),
-    steps=[
-      member_steps.MemberStepOne(new_member_form),
-      member_steps.MemberStepTwo(new_member_form, application)
-    ],
-    button_text=("portfolios.admin.add_new_member" | translate),
-    button_icon="plus",
-  ) }}
diff --git a/templates/portfolios/applications/team.html b/templates/portfolios/applications/team.html
index a9d22924..d08e6e0b 100644
--- a/templates/portfolios/applications/team.html
+++ b/templates/portfolios/applications/team.html
@@ -23,16 +23,18 @@
       {% endif %}
 
       {% if user_can_invite %}
+        {% set new_member_modal_name = "add-app-mem" %}
+        <a class="usa-button usa-button-big" v-on:click="openModal('{{ new_member_modal_name }}')">
+          {{ "portfolios.applications.team_settings.blank_slate.action_label" | translate }}
+        </a>
         {{ MultiStepModalForm(
-            name='add-app-mem',
+            name=new_member_modal_name,
             form=new_member_form,
             form_action=url_for("applications.create_member", application_id=application.id),
             steps=[
               member_steps.MemberStepOne(new_member_form),
               member_steps.MemberStepTwo(new_member_form, application)
             ],
-            button_text=("portfolios.applications.team_settings.blank_slate.action_label" | translate),
-            link_classes="usa-button usa-button-big"
           ) }}
       {% endif %}
     </div>
@@ -94,14 +96,31 @@
                 {{ SaveButton(text=('common.save' | translate), element="input", form="team") }}
               {% endif %}
 
+              {% set new_member_modal_name = "add-app-mem" %}
               {% if user_can(permissions.CREATE_APPLICATION_MEMBER) %}
-                {% include "fragments/applications/add_new_application_member.html" %}
+                <a class="icon-link modal-link" v-on:click="openModal('{{ new_member_modal_name }}')">
+                  {{ "portfolios.admin.add_new_member" | translate }}
+
+                  {{ Icon("plus") }}
+                </a>
               {% endif %}
             </div>
           </div>
 
         </div>
       </base-form>
+      {% if user_can(permissions.CREATE_APPLICATION_MEMBER) %}
+        {% import "fragments/applications/new_member_modal_content.html" as member_steps %}
+        {{ MultiStepModalForm(
+            name=new_member_modal_name,
+            form=new_member_form,
+            form_action=url_for("applications.create_member", application_id=application.id),
+            steps=[
+              member_steps.MemberStepOne(new_member_form),
+              member_steps.MemberStepTwo(new_member_form, application)
+            ],
+          ) }}
+      {% endif %}
     </section>
   {% endif %}
 {% endblock %}