diff --git a/apps/src/templates/sectionAssessments/MultipleChoiceAnswerCell.jsx b/apps/src/templates/sectionAssessments/MultipleChoiceAnswerCell.jsx
index 01893b0fad6b8..8a803c7104fbc 100644
--- a/apps/src/templates/sectionAssessments/MultipleChoiceAnswerCell.jsx
+++ b/apps/src/templates/sectionAssessments/MultipleChoiceAnswerCell.jsx
@@ -9,30 +9,45 @@ const styles = {
     justifyContent: 'space-between',
     flexDirection: 'row',
     alignItems: 'center',
+    height: '100%',
+  },
+  overviewMain: {
+    padding: 10,
   },
   icon: {
     color: color.level_perfect,
   },
-  text: {
+  value: {
     color: color.charcoal,
     fontFamily: '"Gotham 5r", sans-serif',
     marginRight: 10,
   },
 };
 
+function  calculateOpacity(answered) {
+ return (answered + 10)/100;
+}
+
 class MultipleChoiceAnswerCell extends Component {
   static propTypes = {
     percentValue: PropTypes.number.isRequired,
     isCorrectAnswer: PropTypes.bool,
     displayAnswer: PropTypes.string,
+    isSurvey: PropTypes.bool,
   };
 
   render() {
-    const {percentValue, isCorrectAnswer, displayAnswer} = this.props;
+    const {percentValue, isCorrectAnswer, displayAnswer, isSurvey} = this.props;
+
+    const opacity = calculateOpacity(percentValue);
+
+    const backgroundCSS = (isCorrectAnswer || isSurvey) ? {backgroundColor: `rgba(159, 212, 159, ${opacity})`} :
+      {backgroundColor: `rgba(255, 99, 71, ${opacity})`};
+
     if (displayAnswer) {
       return (
         <div style={styles.main}>
-          <div style={styles.text}>
+          <div style={styles.value}>
             {displayAnswer}
           </div>
           <div style={styles.icon}>
@@ -45,8 +60,8 @@ class MultipleChoiceAnswerCell extends Component {
     }
 
     return (
-      <div style={styles.main}>
-        <div style={styles.text}>
+      <div style={{...styles.main, ...backgroundCSS, ...styles.overviewMain}}>
+        <div style={styles.value}>
           {(percentValue >= 0) &&
             <span>{`${percentValue}%`}</span>
           }
diff --git a/apps/src/templates/sectionAssessments/MultipleChoiceAssessmentsOverviewTable.jsx b/apps/src/templates/sectionAssessments/MultipleChoiceAssessmentsOverviewTable.jsx
index 7a96cc6646e65..3fa881045d530 100644
--- a/apps/src/templates/sectionAssessments/MultipleChoiceAssessmentsOverviewTable.jsx
+++ b/apps/src/templates/sectionAssessments/MultipleChoiceAssessmentsOverviewTable.jsx
@@ -22,6 +22,12 @@ const styles = {
   },
   answerColumnCell: {
     width: ANSWER_COLUMN_WIDTH,
+    padding: 0,
+    height: 40,
+  },
+  notAnsweredCell: {
+    padding: 0,
+    height: 40,
   },
   questionCell: {
     overflow: 'hidden',
@@ -107,7 +113,12 @@ class MultipleChoiceAssessmentsOverviewTable extends Component {
       },
       cell: {
         format: answerColumnsFormatter,
-        props: {style: tableLayoutStyles.cell},
+        props: {
+          style: {
+            ...tableLayoutStyles.cell,
+            ...styles.notAnsweredCell,
+          }
+        },
       }
     }
   );
diff --git a/apps/src/templates/sectionAssessments/MultipleChoiceSurveyOverviewTable.jsx b/apps/src/templates/sectionAssessments/MultipleChoiceSurveyOverviewTable.jsx
index 8adfb45c081e5..5513aca64b717 100644
--- a/apps/src/templates/sectionAssessments/MultipleChoiceSurveyOverviewTable.jsx
+++ b/apps/src/templates/sectionAssessments/MultipleChoiceSurveyOverviewTable.jsx
@@ -21,12 +21,18 @@ const styles = {
   },
   answerColumnCell: {
     width: ANSWER_COLUMN_WIDTH,
+    padding: 0,
+    height: 40,
   },
   questionCell: {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
-  }
+  },
+  notAnsweredCell: {
+    padding: 0,
+    height: 40,
+  },
 };
 
 const NOT_ANSWERED = 'notAnswered';
@@ -46,6 +52,7 @@ const answerColumnsFormatter = (percentAnswered, {rowData, columnIndex, rowIndex
     <MultipleChoiceAnswerCell
       id={rowData.id}
       percentValue={percentValue}
+      isSurvey={true}
     />
   );
 };
@@ -118,7 +125,12 @@ class MultipleChoiceSurveyOverviewTable extends Component {
       },
       cell: {
         format: answerColumnsFormatter,
-        props: {style: tableLayoutStyles.cell},
+        props: {
+          style: {
+            ...tableLayoutStyles.cell,
+            ...styles.notAnsweredCell,
+          }
+        },
       }
     }
   );
diff --git a/apps/src/templates/sectionAssessments/SingleStudentAssessmentsMCTable.jsx b/apps/src/templates/sectionAssessments/SingleStudentAssessmentsMCTable.jsx
index 3d6bfe99e8da4..2423f0be532cb 100644
--- a/apps/src/templates/sectionAssessments/SingleStudentAssessmentsMCTable.jsx
+++ b/apps/src/templates/sectionAssessments/SingleStudentAssessmentsMCTable.jsx
@@ -89,7 +89,7 @@ class SingleStudentAssessmentsMCTable extends Component {
     return (
       <MultipleChoiceAnswerCell
         id={rowData.id}
-        displayAnswer={studentAnswer.responses}
+        displayAnswer={studentAnswer.responses || '-'}
         isCorrectAnswer={studentAnswer.isCorrect}
       />
     );