diff --git a/templates/ccpo/add_user.html b/templates/ccpo/add_user.html
index b3b9b0f5..9f6db9f3 100644
--- a/templates/ccpo/add_user.html
+++ b/templates/ccpo/add_user.html
@@ -1,25 +1,24 @@
 {% extends "base.html" %}
 
+{% from "components/save_button.html" import SaveButton %}
 {% from "components/text_input.html" import TextInput %}
 
 {% block content %}
-  <form id="add-ccpo-user-form" action="{{ url_for('ccpo.submit_new_user') }}" method="POST">
-    {{ form.csrf_token }}
-    <h1>{{ "ccpo.form.add_user_title" | translate }}</h1>
-    <div class='form-row'>
-      <div class='form-col form-col--two-thirds'>
-        {{ TextInput(form.dod_id, validation='dodId') }}
-      </div>
-      <div class="form-col form-col--third">
-        <div class='action-group'>
-          <input
-              type='submit'
-              v-bind:disabled="invalid"
-              class='action-group__action usa-button'
-              value='{{ "common.next" | translate }}'>
-          <a class='action-group__action icon-link icon-link--default' href="{{ url_for('ccpo.users') }}">{{ "common.cancel" | translate }}</a>
+  <base-form inline-template>
+    <form id="add-ccpo-user-form" action="{{ url_for('ccpo.submit_new_user') }}" method="POST">
+      {{ form.csrf_token }}
+      <h1>{{ "ccpo.form.add_user_title" | translate }}</h1>
+      <div class='form-row'>
+        <div class='form-col form-col--two-thirds'>
+          {{ TextInput(form.dod_id, validation='dodId') }}
+        </div>
+        <div class="form-col form-col--third">
+          <div class='action-group'>
+            {{ SaveButton(text="common.next"|translate, element="input", additional_classes="action-group__action", form="add-ccpo-user-form") }}
+            <a class='action-group__action icon-link icon-link--default' href="{{ url_for('ccpo.users') }}">{{ "common.cancel" | translate }}</a>
+          </div>
         </div>
       </div>
-    </div>
-  </form>
+    </form>
+  </base-form>
 {% endblock %}