diff --git a/templates/components/delete_confirmation.html b/templates/components/delete_confirmation.html
new file mode 100644
index 00000000..e5e9bfc5
--- /dev/null
+++ b/templates/components/delete_confirmation.html
@@ -0,0 +1,25 @@
+{% macro DeleteConfirmation(modal_id, delete_text, delete_action, form) %}
+  <delete-confirmation inline-template>
+    <div>
+      <div class="usa-input">
+        <label for="deleted-text">
+          <span class="usa-input__help">
+            {{ "common.delete_confirm" | translate }}
+          </span>
+        </label>
+        <input id="deleted-text" v-model="deleteText">
+      </div>
+      <div class="action-group">
+        <form method="POST" action="{{ delete_action }}">
+          {{ form.csrf_token }}
+          <button class="usa-button button-danger" v-bind:disabled="!valid">
+            {{ delete_text }}
+          </button>
+        </form>
+        <div class="action-group">
+          <a v-on:click="deleteText = ''; $root.closeModal({{ modal_id }})" class="action-group__action icon-link icon-link--default">{{ "common.cancel" | translate }}</a>
+        </div>
+      </div>
+    </div>
+  </delete-confirmation>
+{% endmacro %}
diff --git a/templates/fragments/applications/edit_environments.html b/templates/fragments/applications/edit_environments.html
index 348d6e37..b2c5349b 100644
--- a/templates/fragments/applications/edit_environments.html
+++ b/templates/fragments/applications/edit_environments.html
@@ -3,6 +3,7 @@
 {% from "components/text_input.html" import TextInput %}
 {% from "components/save_button.html" import SaveButton %}
 {% from "components/modal.html" import Modal %}
+{% from "components/delete_confirmation.html" import DeleteConfirmation %}
 
 {% macro RolePanel(users=[], role='no_access') %}
   {% if role == 'no_access' %}
@@ -136,29 +137,14 @@
             )
           }}
 
-          <delete-confirmation inline-template>
-            <div>
-              <div class="usa-input">
-                <label for="deleted-text">
-                  <span class="usa-input__help">
-                    {{ "common.delete_confirm" | translate }}
-                  </span>
-                </label>
-                <input id="deleted-text" v-model="deleteText">
-              </div>
-              <div class="action-group">
-                <form method="POST" action="{{ url_for('applications.delete_environment', environment_id=env['id']) }}">
-                  {{ form.csrf_token }}
-                  <button class="usa-button button-danger" v-bind:disabled="!valid">
-                    {{ "portfolios.applications.delete.button" | translate }}
-                  </button>
-                </form>
-                <div class="action-group">
-                  <a v-on:click="deleteText = ''; $root.closeModal({{ delete_modal_environment_id }})" class="action-group__action icon-link icon-link--default">{{ "common.cancel" | translate }}</a>
-                </div>
-              </div>
-            </div>
-          </delete-confirmation>
+          {{
+            DeleteConfirmation(
+              modal_id=delete_modal_environment_id,
+              delete_text=('portfolios.applications.delete.button' | translate),
+              delete_action= url_for('applications.delete_environment', environment_id=env['id']),
+              form=form
+            )
+          }}
         {% endcall %}
       {% endfor %}
     </ul>