diff --git a/rdmo/projects/assets/js/interview/components/main/question/Question.js b/rdmo/projects/assets/js/interview/components/main/question/Question.js
index 606393666b..dc3572a431 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/Question.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/Question.js
@@ -7,10 +7,14 @@ import QuestionHelp from './QuestionHelp'
 import QuestionManagement from './QuestionManagement'
 import QuestionText from './QuestionText'
 import QuestionWidget from './QuestionWidget'
+import QuestionOptional from './QuestionOptional'
 
 const Question = ({ templates, question, values, focus, currentSet, createValue, updateValue, deleteValue }) => {
   return (
     <div className={`interview-question col-md-${question.width || '12'}`}>
+      {
+        question.is_optional && <QuestionOptional />
+      }
       <QuestionText question={question} />
       <QuestionHelp question={question} />
       {
diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionOptional.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionOptional.js
new file mode 100644
index 0000000000..3c9ebb2fc7
--- /dev/null
+++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionOptional.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const QuestionOptional = () => {
+  return (
+    <div className="badge badge-optional" title={gettext('This is an optional question.')}>
+      {gettext('Optional')}
+    </div>
+  )
+}
+
+export default QuestionOptional
diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionText.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionText.js
index 999c19aa8d..4d632d2111 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/QuestionText.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionText.js
@@ -11,12 +11,6 @@ const QuestionText = ({ question }) => {
   return (
     <div className={classnames}>
       {question.text}
-      {question.is_optional && (
-        <>
-          {' '}
-          <span>{gettext('(optional)')}</span>
-        </>
-      )}
     </div>
   )
 }
diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/TextInput.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/TextInput.js
index 639d8da941..29f0650afd 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/widgets/TextInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/TextInput.js
@@ -40,6 +40,7 @@ TextInput.propTypes = {
   value: PropTypes.object.isRequired,
   disabled: PropTypes.bool,
   isDefault: PropTypes.bool,
+  isOptional: PropTypes.bool,
   focus: PropTypes.bool,
   updateValue: PropTypes.func.isRequired,
 }
diff --git a/rdmo/projects/assets/scss/interview.scss b/rdmo/projects/assets/scss/interview.scss
index 45b21d4ad4..ecd9b5ce1b 100644
--- a/rdmo/projects/assets/scss/interview.scss
+++ b/rdmo/projects/assets/scss/interview.scss
@@ -233,6 +233,11 @@
             opacity: 0.5;
         }
     }
+
+    .badge-optional {
+        float: right;
+        margin-top: 1px;
+    }
 }
 
 .interview-question {