diff --git a/ui/src/tempVars/components/TemplateVariableEditor.tsx b/ui/src/tempVars/components/TemplateVariableEditor.tsx
index 296c3fb23c..724f758af5 100644
--- a/ui/src/tempVars/components/TemplateVariableEditor.tsx
+++ b/ui/src/tempVars/components/TemplateVariableEditor.tsx
@@ -100,7 +100,9 @@ class TemplateVariableEditor extends PureComponent<Props, State> {
     return (
       <div className="edit-temp-var">
         <div className="edit-temp-var--header">
-          <h1 className="page-header__title">Edit Template Variable</h1>
+          <h1 className="page-header__title">
+            {isNew ? 'Create' : 'Edit'} Template Variable
+          </h1>
           <div className="edit-temp-var--header-controls">
             <button
               className="btn btn-default"
@@ -115,7 +117,7 @@ class TemplateVariableEditor extends PureComponent<Props, State> {
               onClick={this.handleSave}
               disabled={!this.canSave}
             >
-              {this.isSaving ? 'Saving...' : 'Save'}
+              {this.saveButtonText}
             </button>
           </div>
         </div>
@@ -277,6 +279,24 @@ class TemplateVariableEditor extends PureComponent<Props, State> {
     )
   }
 
+  private get saveButtonText(): string {
+    const {isNew} = this.state
+
+    if (this.isSaving && isNew) {
+      return 'Creating...'
+    }
+
+    if (this.isSaving && !isNew) {
+      return 'Saving...'
+    }
+
+    if (!this.isSaving && isNew) {
+      return 'Create'
+    }
+
+    return 'Save'
+  }
+
   private handleDelete = (): void => {
     const {onDelete} = this.props