diff --git a/templates/applications/fragments/add_new_environment.html b/templates/applications/fragments/add_new_environment.html
index 61fa096d..dbe499d1 100644
--- a/templates/applications/fragments/add_new_environment.html
+++ b/templates/applications/fragments/add_new_environment.html
@@ -26,7 +26,7 @@
         </div>
       </form>
     </div>
-    <a class="usa-button usa-button-secondary add-new-button" v-on:click="openModal('{{ new_member_modal_name }}')">
+    <a class="usa-button usa-button-secondary add-new-button" v-on:click="toggle">
       {{ "portfolios.applications.add_environment" | translate }}
     </a>
   </div>
diff --git a/templates/applications/settings.html b/templates/applications/settings.html
index 4e2581a4..121179a1 100644
--- a/templates/applications/settings.html
+++ b/templates/applications/settings.html
@@ -2,18 +2,12 @@
 
 {% from "components/alert.html" import Alert %}
 {% from "components/delete_confirmation.html" import DeleteConfirmation %}
-{% from "components/icon.html" import Icon %}
-{% import "applications/fragments/new_member_modal_content.html" as member_steps %}
+{% from "fragments/environments.html" import EnvironmentManagementTemplate %}
 {% from "fragments/members.html" import MemberManagementTemplate %}
 {% from "components/modal.html" import Modal %}
 {% from "components/pagination.html" import Pagination %}
 {% from "components/save_button.html" import SaveButton %}
 {% from "components/text_input.html" import TextInput %}
-{% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
-{% from "components/icon.html" import Icon %}
-{% from "components/text_input.html" import TextInput %}
-{% from "components/checkbox_input.html" import CheckboxInput %}
-{% from "components/phone_input.html" import PhoneInput %}
 
 {% set secondary_breadcrumb = 'portfolios.applications.existing_application_title' | translate({ "application_name": application.name }) %}
 
@@ -64,86 +58,12 @@
     user_can_delete_app_member=user_can(permissions.DELETE_APPLICATION_MEMBER),
   ) }}
 
-  <h3>{{ 'common.resource_names.environments' | translate }}</h3>
-  <section class="panel" id="application-environments">
-    {% if g.matchesPath("application-environments") %}
-      {% include "fragments/flash.html" %}
-    {% endif %}
-    <div class="panel__content panel__content">
-      <div class="accordion-table accordion-table-list">
-        <ul class="accordion-table__items">
-          {% for env in environments_obj %}
-            {% set edit_form = env['edit_form'] %}
-            <toggler inline-template>
-              <li class="accordion-table__item">
-                <div class="accordion-table__item-content">
-                  <div class="environment-list__item">
-                    <span>
-                      {{ env['name'] }}
-                    </span>
-                    {% set members_button = "portfolios.applications.member_count" | translate({'count': env['member_count']}) %}
-                    {{
-                      ToggleButton(
-                        open_html=members_button,
-                        close_html=members_button,
-                        section_name="members",
-                        classes="environment-list__item__members"
-                      )
-                    }}
-                    {% set edit_environment_button = "Edit" %}
-                    {{
-                    ToggleButton(
-                      open_html=edit_environment_button,
-                      close_html=edit_environment_button,
-                      section_name="edit"
-                      )
-                    }}
-                    <br>
-                    {% if env['pending'] -%}
-                      <span class='usa-label label--below'>{{Icon('exchange')}} CHANGES PENDING</span>
-                    {% else %}
-                      <a href='{{ url_for("applications.access_environment", environment_id=env.id)}}' target='_blank' rel='noopener noreferrer' class='application-list-item__environment__csp_link'>
-                        <span>{{ "portfolios.applications.csp_link" | translate }} {{ Icon('link', classes="icon--tiny") }}</span>
-                      </a>
-                    {%- endif %}
-                  </div>
-                </div>
-
-                {% call ToggleSection(section_name="members") %}
-                  <ul>
-                    {% for member in env['members'] %}
-                    <li class="accordion-table__item-toggle-content__expanded">
-                      {{ member }}
-                    </li>
-                    {% endfor %}
-                  </ul>
-                {% endcall %}
-
-                {% call ToggleSection(section_name="edit") %}
-                  <ul>
-                    <li class="accordion-table__item-toggle-content__expanded">
-                      <form action="{{ url_for('applications.update_environment', environment_id=env['id']) }}" method="post" v-on:submit="handleSubmit">
-                        {{ edit_form.csrf_token }}
-                        {{ TextInput(edit_form.name, validation='requiredField') }}
-                        {{
-                          SaveButton(
-                            text=("common.save" | translate)
-                          )
-                        }}
-                      </form>
-                    </li>
-                  </ul>
-                {% endcall %}
-              </li>
-            </toggler>
-          {% endfor %}
-        </ul>
-      </div>
-    </div>
-    {% if user_can(permissions.CREATE_ENVIRONMENT) %}
-      {% include "applications/fragments/add_new_environment.html" %}
-    {% endif %}
-  </section>
+  {{ EnvironmentManagementTemplate(
+    application,
+    environments_obj,
+    new_env_form,
+    user_can_create_environment=user_can(permissions.CREATE_ENVIRONMENT)
+  ) }}
 
   <hr>
 
diff --git a/templates/fragments/environments.html b/templates/fragments/environments.html
new file mode 100644
index 00000000..dcd1638c
--- /dev/null
+++ b/templates/fragments/environments.html
@@ -0,0 +1,87 @@
+{% from "components/icon.html" import Icon %}
+{% from 'components/save_button.html' import SaveButton %}
+{% from "components/text_input.html" import TextInput %}
+{% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
+
+{% macro EnvironmentManagementTemplate(application, environments_obj, new_env_form, user_can_create_environment) %}
+  <h3>{{ 'common.resource_names.environments' | translate }}</h3>
+  <section class="panel" id="application-environments">
+    {% if g.matchesPath("application-environments") %}
+      {% include "fragments/flash.html" %}
+    {% endif %}
+    <div class="panel__content">
+      <div class="accordion-table accordion-table-list">
+        <ul class="accordion-table__items">
+          {% for env in environments_obj %}
+            {% set edit_form = env['edit_form'] %}
+            <toggler inline-template>
+              <li class="accordion-table__item">
+                <div class="accordion-table__item-content">
+                  <div class="environment-list__item">
+                    <span>
+                      {{ env['name'] }}
+                    </span>
+                    {% set members_button = "portfolios.applications.member_count" | translate({'count': env['member_count']}) %}
+                    {{
+                      ToggleButton(
+                        open_html=members_button,
+                        close_html=members_button,
+                        section_name="members",
+                        classes="environment-list__item__members"
+                      )
+                    }}
+                    {% set edit_environment_button = "Edit" %}
+                    {{
+                    ToggleButton(
+                      open_html=edit_environment_button,
+                      close_html=edit_environment_button,
+                      section_name="edit"
+                      )
+                    }}
+                    <br>
+                    {% if env['pending'] -%}
+                      <span class='usa-label label--below'>{{Icon('exchange')}} CHANGES PENDING</span>
+                    {% else %}
+                      <a href='{{ url_for("applications.access_environment", environment_id=env.id)}}' target='_blank' rel='noopener noreferrer' class='application-list-item__environment__csp_link'>
+                        <span>{{ "portfolios.applications.csp_link" | translate }} {{ Icon('link', classes="icon--tiny") }}</span>
+                      </a>
+                    {%- endif %}
+                  </div>
+                </div>
+
+                {% call ToggleSection(section_name="members") %}
+                  <ul>
+                    {% for member in env['members'] %}
+                    <li class="accordion-table__item-toggle-content__expanded">
+                      {{ member }}
+                    </li>
+                    {% endfor %}
+                  </ul>
+                {% endcall %}
+
+                {% call ToggleSection(section_name="edit") %}
+                  <ul>
+                    <li class="accordion-table__item-toggle-content__expanded">
+                      <form action="{{ url_for('applications.update_environment', environment_id=env['id']) }}" method="post" v-on:submit="handleSubmit">
+                        {{ edit_form.csrf_token }}
+                        {{ TextInput(edit_form.name, validation='requiredField') }}
+                        {{
+                          SaveButton(
+                            text=("common.save" | translate)
+                          )
+                        }}
+                      </form>
+                    </li>
+                  </ul>
+                {% endcall %}
+              </li>
+            </toggler>
+          {% endfor %}
+        </ul>
+      </div>
+    </div>
+    {% if user_can_create_environment %}
+      {% include "applications/fragments/add_new_environment.html" %}
+    {% endif %}
+  </section>
+{% endmacro %}