diff --git a/awx/ui/src/screens/Template/Survey/SurveyReorderModal.js b/awx/ui/src/screens/Template/Survey/SurveyReorderModal.js
index e5bf1980c4..f3c84a6371 100644
--- a/awx/ui/src/screens/Template/Survey/SurveyReorderModal.js
+++ b/awx/ui/src/screens/Template/Survey/SurveyReorderModal.js
@@ -116,6 +116,13 @@ function SurveyReorderModal({
   const defaultAnswer = (q) => {
     let component = null;
     switch (q.type) {
+      case 'password':
+        component = (
+          <span id="survey-preview-encrypted">
+            {t`encrypted`.toUpperCase()}
+          </span>
+        );
+        break;
       case 'textarea':
         component = (
           <TextArea
diff --git a/awx/ui/src/screens/Template/Survey/SurveyReorderModal.test.js b/awx/ui/src/screens/Template/Survey/SurveyReorderModal.test.js
index d8cf2d3d6a..fa6f11f3ff 100644
--- a/awx/ui/src/screens/Template/Survey/SurveyReorderModal.test.js
+++ b/awx/ui/src/screens/Template/Survey/SurveyReorderModal.test.js
@@ -90,7 +90,7 @@ describe('<SurveyReorderModal />', () => {
     const question3Value = wrapper.find('textarea');
 
     const question4 = wrapper.find('td[aria-label="Password Question"]');
-    const question4Value = wrapper.find('TextInputBase#survey-preview-text-c');
+    const question4Value = wrapper.find('#survey-preview-encrypted');
 
     const question5 = wrapper.find('td[aria-label="Multiple select Question"]');
     const question5Value = wrapper
@@ -110,8 +110,7 @@ describe('<SurveyReorderModal />', () => {
     expect(question3Value.prop('value')).toBe('Text Area Question Value');
     expect(question3Value.prop('disabled')).toBe(true);
     expect(question4).toHaveLength(1);
-    expect(question4Value.prop('value')).toBe('$encrypted$');
-    expect(question4Value.prop('isDisabled')).toBe(true);
+    expect(question4Value.prop('children')).toBe('ENCRYPTED');
 
     expect(question5).toHaveLength(1);
     expect(question5Value.length).toBe(4);