diff --git a/src/pages/assessments/assessments.html b/src/pages/assessments/assessments.html
index 02d56f6b..bb0fe09f 100644
--- a/src/pages/assessments/assessments.html
+++ b/src/pages/assessments/assessments.html
@@ -1,7 +1,6 @@
 <ion-header>
   <ion-navbar>
     <ion-title></ion-title>
-
     <ion-buttons end>
       <button ion-button (click)="clickSubmit()" class="btn-submit" *ngIf="allowSubmit">
         {{ 'GENERAL.SUBMIT' | translate }}
@@ -9,18 +8,15 @@
     </ion-buttons>
   </ion-navbar>
 </ion-header>
-<ion-content class="assessments-list">
-
+<ion-content>
   <div *ngFor="let assessmentGroup of assessmentGroups; let i = index">
     <div *ngFor="let assessment of assessmentGroup; let j = index">
-
       <ion-card *ngIf="assessment.description" class="no-box-shadow">
         <ion-card-content>
-          <h2 class="text-center">{{ assessment.name }}</h2>
-          <div [innerHTML]="assessment.description"></div>
+          <h2 class="text-center assessment-title">{{ assessment.name }}</h2>
+          <p [innerHTML]="assessment.description" class="assessment-description"></p>
         </ion-card-content>
       </ion-card>
-
       <questionGroup
         *ngFor="let group of assessment.AssessmentGroup; let q = index"
         [group]="group"
diff --git a/src/pages/assessments/assessments.page.ts b/src/pages/assessments/assessments.page.ts
index bb5ba3a8..5abdbcd1 100644
--- a/src/pages/assessments/assessments.page.ts
+++ b/src/pages/assessments/assessments.page.ts
@@ -32,6 +32,7 @@ export class AssessmentsPage {
   assessmentQuestions: any = [];
   combinedItems: any = [];
   discardConfirmMessage = confirmMessages.Assessments.DiscardChanges.discard;
+  event: any = {};
   getCharacterID: any = this.cacheService.getLocal('character_id');
   getInitialItems: any = this.cacheService.getLocal('initialItems');
   gotNewItems: boolean = false;
@@ -55,12 +56,13 @@ export class AssessmentsPage {
     public gameService: GameService,
     public loadingCtrl: LoadingController,
     public modalCtrl: ModalController,
-    public navParams: NavParams,
     public navCtrl: NavController,
+    public navParams: NavParams,
     public submissionService: SubmissionService,
-    public translationService: TranslationService
+    public translationService: TranslationService,
   ) {
     this.activity = this.navParams.get('activity');
+    this.event = this.navParams.get('event');
     if (!this.activity) {
       throw 'Fatal Error: Activity not available';
     }
@@ -72,10 +74,7 @@ export class AssessmentsPage {
       this.loadQuestions()
       .then(() => {
         loader.dismiss();
-      }, err => {
-        console.log('log::', err);
-      })
-      .catch((err) => {
+      }).catch(err => {
         console.log(err);
         loader.dismiss();
       });
@@ -95,125 +94,102 @@ export class AssessmentsPage {
    * @description mapping assessments and submissions
    * @param {Object} submissions submissions
    * @param {Object} assessments assessments
+   * @returns {Array} objects of compiled assessment + submissions
    */
-  mapSubmissionsToAssessment(submissions, assessments) {
-    _.forEach(assessments, (group, i) => {
-      _.forEach(group, (assessment, j) => {
-
-        // normalise
-        assessments[i][j] = assessment = this.assessmentService.normalise(assessment);
-
-        _.forEach(assessment.AssessmentGroup, (assessmentGroup, k) => {
-          _.forEach(assessmentGroup.questions, (question, l) => {
-            // Inject empty answer fields
-            // We will know thare are no submission when it is null
-            assessments[i][j].AssessmentGroup[k].questions[l].answer = null;
-            assessments[i][j].AssessmentGroup[k].questions[l].reviewerAnswer = null;
+  mapSubmissionsToAssessment(submissions, assessmentsBatch) {
+    let result = [];
+
+    _.forEach(assessmentsBatch, (batch, i) => {
+
+      let assessmentResult = [];
+      _.forEach(batch, (assessment, j) => {
+        // normalised
+        let normalised = this.assessmentService.normalise(assessment);
+
+        // groups
+        let assessmentGroupResult = [];
+        _.forEach(normalised.AssessmentGroup, assessmentGroup => {
+          // questions
+          let questionsResult = [];
+          let submissionResult : any = {};
+          _.forEach(assessmentGroup.questions, question => {
+            // force answers as null by default (for checkings)
+            let questionResult : any = {
+              answer: null,
+              reviewerAnswer: null
+            };
 
             // find submission
             _.forEach(submissions, (submission) => {
               // attach existing submission to assessment group it belongs to
-              let group = this.assessmentGroups[i][j].AssessmentGroup[k];
-              if (group.assessment_id === submission.assessment_id) {
-                this.assessmentGroups[i][j].AssessmentGroup[k].submission = submission;
+              if (assessmentGroup.assessment_id === submission.assessment_id) {
+                submissionResult = submission;
               }
 
               // find user answer
               _.forEach(submission.answer, (answer) => {
-                if (answer.assessment_question_id === question.id) {
-                  assessments[i][j].AssessmentGroup[k].questions[l].answer = answer;
+                if (answer.assessment_question_id === question.question_id) {
+                  questionResult.answer = answer;
                 }
               });
 
               // find reviewer feedback
               _.forEach(submission.review, (reviewerAnswer) => {
-                if (reviewerAnswer.assessment_question_id === question.id) {
-                  assessments[i][j].AssessmentGroup[k].questions[l].reviewerAnswer = reviewerAnswer;
+                if (reviewerAnswer.assessment_question_id === question.question_id) {
+                  questionResult.reviewerAnswer = reviewerAnswer;
                 }
               });
             });
 
-          });
-
-          // Summarise basic answer information
-          // get total number of questions
-          assessments[i][j].AssessmentGroup[k].totalRequiredQuestions = 0;
-          _.forEach(assessmentGroup.questions, (q) => {
-            if (q.required) {
-              assessments[i][j].AssessmentGroup[k].totalRequiredQuestions += 1;
+            // set assessmentGroup as accessible (submitter has no permission to view)
+            if (this.isAccessibleBySubmitter(question, submissionResult.status)) {
+              assessmentGroup.accessible = true;
+              questionsResult.push(Object.assign(question, questionResult));
             }
           });
 
-          // get total number of answered questions
-          assessments[i][j].AssessmentGroup[k].answeredQuestions = 0;
-          _.forEach(assessmentGroup.questions, (q) => {
-            if (q.required && q.answer && q.answer !== null) {
-              assessments[i][j].AssessmentGroup[k].answeredQuestions += 1;
-            }
-          });
+          let summaries = this.assessmentService.getSummaries(questionsResult);
+          if (assessmentGroup.accessible) {
+            assessmentGroupResult.push(Object.assign(assessmentGroup, {
+              questions: questionsResult,
+              submission: submissionResult,
+              totalRequiredQuestions: summaries.totalRequiredQuestions,
+              answeredQuestions: summaries.answeredQuestions,
+              reviewerFeedback: summaries.reviewerFeedback,
+              status: this.assessmentService.getStatus(questionsResult, submissionResult)
+            }));
+          }
+        });
 
-          // get total number of feedback
-          assessments[i][j].AssessmentGroup[k].reviewerFeedback = 0;
-          _.forEach(assessmentGroup.questions, (q) => {
-            // If API response, the reviewer's answer and comment are empty,
-            // front-end don't consider it as a feedback
-            if (
-              q.reviewerAnswer &&
-              q.reviewerAnswer !== null &&
-              !_.isEmpty(q.reviewerAnswer.answer) &&
-              !_.isEmpty(q.reviewerAnswer.comment)
-            ) {
-              assessments[i][j].AssessmentGroup[k].reviewerFeedback += 1;
-            }
-          });
+        normalised.AssessmentGroup = assessmentGroupResult;
+        assessmentResult.push(normalised);
+      });
 
-          // Set status
-          // let status = assessments[i][j].AssessmentGroup[k].status = 'incomplete';
-          let questionsStatus = [];
-          _.forEach(assessmentGroup.questions, (q) => {
-            if (q.required && q.answer !== null) {
-              if (
-                q.reviewerAnswer !== null &&
-                assessmentGroup.submission.status !== 'pending approval' &&
-                (q.reviewerAnswer.answer || q.reviewerAnswer.comment)
-              ) {
-                questionsStatus.push('reviewed');
-              } else {
-                questionsStatus.push('completed');
-              }
-            }
+      result.push(assessmentResult);
+    });
 
-            if (!q.required && q.answer !== null) {
-              if (
-                q.reviewerAnswer !== null &&
-                assessmentGroup.submission.status !== 'pending approval' &&
-                (q.reviewerAnswer.answer || q.reviewerAnswer.comment)
-              ) {
-                questionsStatus.push('reviewed');
-              } else {
-                questionsStatus.push('completed');
-              }
-            }
+    return result;
+  }
 
-            if (q.answer === null) {
-              questionsStatus.push('incomplete');
-            }
-          });
+  /**
+   * @description filter question by condition (submitter cannot view reviewer
+   *              question before it is published/reviewed)
+   * @param {object} question
+   * @param {string} status
+   */
+  isAccessibleBySubmitter(question, submissionStatus: string) {
+    let accessible = true;
+    let submitterAllowed = false;
 
-          assessments[i][j].AssessmentGroup[k].status = 'incomplete';
-          if (_.every(questionsStatus, (v) => {
-            return (v === 'completed');
-          })) {
-            assessments[i][j].AssessmentGroup[k].status = 'completed';
-          }
-          if (_.includes(questionsStatus, 'reviewed')) {
-            assessments[i][j].AssessmentGroup[k].status = 'reviewed';
-          }
-        });
-      });
-    });
+    if (question.audience.indexOf('submitter') !== -1) {
+      submitterAllowed = true;
+    }
+
+    if (!submitterAllowed && submissionStatus !== 'published') {
+      accessible = false;
+    }
 
-    return assessments;
+    return accessible;
   }
 
   /**
@@ -223,7 +199,7 @@ export class AssessmentsPage {
    *
    * @return {Promise<any>}
    */
-  public pullSubmissions(): Promise<any> {
+   pullSubmissions(): Promise<any> {
     return new Promise((resolve, reject) => {
       // 2nd batch API requests (get_submissions)
       Observable.forkJoin(
@@ -231,47 +207,29 @@ export class AssessmentsPage {
           this.activity.References
         ))
         .subscribe(allSubmissions => {
-          // allSubmissions - response format: [ // context_ids
-          //   [ // assessment group 1
-          //     assessment1,
-          //     assessment2,
-          //     ...
-          //   ],
-          //   [ // assessment group 2
-          //     assessment1,
-          //     assessment2,
-          //     ...
-          //   ],
-          //   ...
-          // ]
+          /** allSubmissions - response format:
+           *  [ // context_ids
+           *    [ // assessment group 1
+           *      assessment1,
+           *      assessment2,
+           *      ...
+           *    ],
+           *    [ // assessment group 2
+           *      assessment1,
+           *      assessment2,
+           *      ...
+           *    ],
+           *    ...
+           *  ]
+           */
           let submissions = [];
           _.forEach(allSubmissions, group => {
-            _.forEach(group, (submission) => {
+            _.forEach(group, submission => {
                 submissions.push(this.submissionService.normalise(submission));
             });
           });
 
-          // check if a submission is specified
-          let currentSubmission = this.navParams.get('currentSubmission');
-          let filteredSubmissions = [];
-
-          submissions.forEach(subm => {
-            if (currentSubmission && currentSubmission.id === subm.id) {
-              filteredSubmissions.push(subm);
-            }
-          });
-          let hasInProgress = _.find(submissions, {status: 'in progress'}); // 'in progress' never > 1
-          let isNew = (!currentSubmission && (filteredSubmissions.length === 0 || !_.isEmpty(hasInProgress)));
-
-          if (isNew) { // new submission
-            this.submissions = !_.isEmpty(hasInProgress) ? [hasInProgress] : [];
-          } else if (!isNew && hasInProgress) { // resume 'in progress'
-            filteredSubmissions.push(hasInProgress);
-            this.submissions = filteredSubmissions;
-          } else if (currentSubmission) { // display current submission
-            filteredSubmissions.push(currentSubmission);
-            this.submissions = filteredSubmissions;
-          }
+          this.submissions = this.filterSubmissions(submissions);
           resolve(submissions);
         }, (err) => {
           console.log('err', err);
@@ -280,37 +238,92 @@ export class AssessmentsPage {
     });
   }
 
-  loadQuestions(): Promise<any> {
-    return new Promise((resolve, reject) => {
+  /**
+   * @description filter submissions data
+   * @param {Array} submissions
+   */
+  filterSubmissions(submissions) {
+    let results = []; // filtered submissions
+
+    // check if a submission is specified (from previous page, from NavParams)
+    let currentSubmission = this.navParams.get('currentSubmission');
+
+    // filteredSubmission: store only submissions related to
+    // currentSubmission (if currentSubmission above exist)
+    let filteredSubmissions = [];
+    submissions.forEach(submission => {
+      if (currentSubmission && currentSubmission.id === submission.id) {
+        filteredSubmissions.push(submission);
+      }
+    });
+
+    // prepare statuses of submissions for different condition filtering (activity & event)
+    // Statuses: `in progress`, `done`
+
+    // "in progress" never > 1 (cuz "_.find" return only 1 found value)
+    let hasInProgress = _.find(submissions, {status: 'in progress'});
+    let isNew = (!currentSubmission && (filteredSubmissions.length === 0 || !_.isEmpty(hasInProgress)));
+    let isDone = _.find(submissions, {status: 'done'}); // "done" for view checkin
+    let isCheckin = (this.navParams.get('event') && isDone);
+
+
+    if (isCheckin) { // on event's view checkin, no status filtering required
+      results = submissions;
+    } else if (isNew) { // on new submission
+      results = !_.isEmpty(hasInProgress) ? [hasInProgress] : [];
+    } else if (!isNew && hasInProgress) { // on resume "in progress"
+      filteredSubmissions.push(hasInProgress);
+      results = filteredSubmissions;
+    } else if (currentSubmission) { // display current submission
+      filteredSubmissions.push(currentSubmission);
+      results = filteredSubmissions;
+    }
 
-      // get_assessments request with 'assessment_id' & 'structured'
-      let getAssessment = (assessmentId) => {
-        return this.assessmentService.getAll({
+    return results;
+  }
+
+  /**
+   * @name preStackTasks
+   * @description stack of tasks prepared to handle multiple activity references (ids)
+   */
+  preStackTasks() {
+    // get_assessments request with "assessment_id" & "structured"
+    let getAssessment = (assessmentId) => {
+      // @TODO: we might need to pass in submission id (if available) to get properly filtered assessmnet questions
+      return this.assessmentService.getAll({
+        search: {
           assessment_id: assessmentId,
           structured: true
-        });
-      };
-
-      // Congregation of assessment ids to fulfill get_assessments API's param requirement
-      let tasks = [];
-      _.forEach(this.activity.References, (reference) => {
-        if (
-          reference.Assessment &&
-          reference.Assessment.id
-        ) {
-          return tasks.push(getAssessment(reference.Assessment.id));
         }
       });
+    };
+
+    let tasks: Array<any> = [];
+    // Congregate assessment ids for rxjs forkJoin (batch API requests)
+    // Change it from this.activity.References
+    _.forEach(this.event.References, ref => {
+      if (ref.Assessment && ref.Assessment.id) {
+        tasks.push(getAssessment(ref.Assessment.id));
+      }
+    });
 
+    return tasks;
+  }
+
+  /**
+   * @description loading question from API
+   */
+  loadQuestions(): Promise<any> {
+    return new Promise((resolve, reject) => {
       /**
        * merging submission into question inside of assessment array objects
        * - set question statuses (quantity of total answered)
        * - set submission button status
        */
-      let preprocessAssessmentSubmission = () => {
+      let preprocessAssessmentSubmission = (assessments) => {
         this.assessmentGroups = this.mapSubmissionsToAssessment(
           this.submissions,
-          this.assessmentGroups
+          assessments
         );
 
         // Only allow submit when all required question have answered.
@@ -318,13 +331,10 @@ export class AssessmentsPage {
           _.forEach(groups, assessment => {
             let groupWithAnswers = 0;
             _.forEach(assessment.AssessmentGroup, group => {
-              // console.log('group.answeredQuestions', group.answeredQuestions);
-              // console.log('group.totalRequiredQuestions', group.totalRequiredQuestions);
               if (group.answeredQuestions >= group.totalRequiredQuestions) {
                 groupWithAnswers += 1;
               }
             });
-            // console.log('groupWithAnswers', groupWithAnswers, _.size(assessment.AssessmentGroup));
             if (groupWithAnswers >= _.size(assessment.AssessmentGroup)) {
               this.allowSubmit = true;
             }
@@ -348,42 +358,38 @@ export class AssessmentsPage {
         });
       };
 
-      // first batch API requests (get_assessments)
-      Observable.forkJoin(tasks)
-        .subscribe(
-          (assessments: any) => {
-            this.assessmentGroups = assessments;
-            this.submissions = this.navParams.get('submissions');
+      let setSubmissionAndAssessment = (assessments) => {
+        this.submissions = this.navParams.get('submissions');
 
-            // check if this is from single submission view
-            let currentSubmission = this.navParams.get('currentSubmission');
-            if (currentSubmission) {
-              this.submissions = [currentSubmission];
-            }
+        // check if this is from single submission view
+        let currentSubmission = this.navParams.get('currentSubmission');
+        if (currentSubmission) {
+          this.submissions = [currentSubmission];
+        }
 
-            // pull new when submission is updated or currentSubmission is empty
-            if (this.submissionUpdated || !currentSubmission) {
-              this.pullSubmissions().then(res => {
-                preprocessAssessmentSubmission();
-              }, err => {
-                reject(err);
-              });
-              this.submissionUpdated = false;
-            } else {
-              preprocessAssessmentSubmission();
-            }
-          },
-          (err) => {
-            console.log('err', err);
+        // pull new when submission is updated or currentSubmission is empty
+        if (this.submissionUpdated || !currentSubmission) {
+          this.pullSubmissions().then(res => {
+            preprocessAssessmentSubmission(assessments);
+          }, err => {
             reject(err);
-          }
-        );
+          });
+          this.submissionUpdated = false;
+        } else {
+          preprocessAssessmentSubmission(assessments);
+        }
+      };
+
+      // first batch API requests (get_assessments)
+      Observable.forkJoin(this.preStackTasks())
+        .subscribe(setSubmissionAndAssessment, err => {
+          reject(err);
+        });
     });
   }
 
-
   /**
-   * submit answer and change submission status to done
+   * @description submit answer and change submission status to done
    */
   doSubmit() {
     let loading = this.loadingCtrl.create({
@@ -393,6 +399,8 @@ export class AssessmentsPage {
     loading.present().then(() => {
       let tasks = [];
       _.forEach(this.submissions, (submission) => {
+
+          // @TODO: investigate what causes absent of assessment_id/id/context_id
           if (
             submission &&
             submission.assessment_id &&
@@ -438,9 +446,12 @@ export class AssessmentsPage {
     });
   }
 
+  /**
+   * @description Submit anwsers
+   */
   clickSubmit() {
     const confirm = this.alertCtrl.create({
-      title: 'Submit evidence',
+      title: 'Confirm Submission',
       message: this.submitConfirmMessage,
       buttons: [
         {
@@ -460,8 +471,10 @@ export class AssessmentsPage {
     confirm.present();
   }
 
-  // items popup
-  popupAfterSubmit(){
+  /**
+   * @description  items popup
+   */
+  popupAfterSubmit() {
     const loading = this.loadingCtrl.create({
       content: this.loadingMessages
     });
@@ -471,7 +484,9 @@ export class AssessmentsPage {
         {
           text: 'OK',
           handler: () => {
-            this.navCtrl.setRoot(ActivitiesListPage); // dashboard page
+            // Move to dashboard
+            this.navCtrl.parent.select(0);
+            // this.navCtrl.setRoot(ActivitiesListPage); // dashboard page
           }
         }
       ]
@@ -490,64 +505,67 @@ export class AssessmentsPage {
 
     this.gameService.getItems({
       character_id: this.getCharacterID
-    })
-    .subscribe(
-      data => {
-        this.newItemsData = data.Items;
-        _.forEach(data.Items, (element, index) => {
-          let id = element.id;
-          if(!this.newItemsCount[id]){
-            this.newItemsCount[id] = 0;
-          }
-          this.newItemsCount[id]++;
-        });
-        // compare with previous get_characters() results and generate final index value array result
-        _.forEach(this.newItemsCount, (element, id) => {
-          if(!this.initialItemsCount[id]){
-            this.totalItems.push({ 'count': element, 'id': id });
-          }else {
-            let diffCountVal = element - this.initialItemsCount[id];
-            if(diffCountVal > 0){
-              this.totalItems.push({ 'count': diffCountVal, 'id': id });
+    }).subscribe(
+          data => {
+            this.newItemsData = data.Items;
+            _.forEach(data.Items, (element, index) => {
+              let id = element.id;
+              if(!this.newItemsCount[id]){
+                this.newItemsCount[id] = 0;
+              }
+              this.newItemsCount[id]++;
+            });
+            // compare with previous get_characters() results and generate final index value array result
+            _.forEach(this.newItemsCount, (element, id) => {
+              if(!this.initialItemsCount[id]){
+                this.totalItems.push({ "count": element, "id": id });
+              }else {
+                let diffCountVal = element - this.initialItemsCount[id];
+                if(diffCountVal > 0){
+                  this.totalItems.push({ "count": diffCountVal, "id": id });
+                }
+              }
+            });
+            _.forEach(this.totalItems, (element, index) => {
+              element.id = parseInt(element.id);
+            });
+            this.allItemsData = _.intersectionBy(this.newItemsData, this.totalItems, 'id');
+            // get the final object with item occurance count value
+            let groupData = _.groupBy(this.totalItems, 'id');
+            if(this.allItemsData.length === 0){
+              this.gotNewItems = false;
+              this.cacheService.setLocal('gotNewItems', this.gotNewItems);
+              loading.onDidDismiss(() => {
+                alert.present(); // redirect to dashboard page
+              });
+              loading.dismiss();
+            } else {
+              _.map(this.allItemsData, (ele) => {
+                this.combinedItems.push(_.extend({count: groupData[ele.id] || []}, ele))
+              });
+              // display items on dashboard page
+              this.gotNewItems = true;
+              this.cacheService.setLocal('gotNewItems', this.gotNewItems);
+              this.cacheService.setLocal('allNewItems', this.combinedItems);
+              loading.onDidDismiss(() => {
+                this.navCtrl.setRoot(ActivitiesListPage);
+              });
+              loading.dismiss();
             }
+          },
+          err => {
+            loading.dismiss().then(() => {
+              console.log("Err: ", err);
+            });
           }
-        });
-
-        _.forEach(this.totalItems, (element, index) => {
-          element.id = parseInt(element.id);
-        });
-
-        this.allItemsData = _.intersectionBy(this.newItemsData, this.totalItems, 'id');
-        // get the final object with item occurance count value
-        let groupData = _.groupBy(this.totalItems, 'id');
-        if(this.allItemsData.length === 0){
-          this.gotNewItems = false;
-          this.cacheService.setLocal('gotNewItems', this.gotNewItems);
-          loading.onDidDismiss(() => {
-            alert.present(); // redirect to dashboard page
-          });
-          loading.dismiss();
-        } else {
-          _.map(this.allItemsData, (ele) => {
-            this.combinedItems.push(_.extend({count: groupData[ele.id] || []}, ele));
-          });
-          // display items on dashboard page
-          this.gotNewItems = true;
-          this.cacheService.setLocal('gotNewItems', this.gotNewItems);
-          this.cacheService.setLocal('allNewItems', this.combinedItems);
-          loading.onDidDismiss(() => {
-            this.navCtrl.setRoot(ActivitiesListPage);
-          });
-          loading.dismiss();
-        }
-      },
-      err => {
-        loading.dismiss().then(() => {
-          console.log('Err: ', err);
-        });
-      }
-    );
+        );
   }
+
+  /**
+   * @description Move to assessment group page
+   * @param {Object} assessment group
+   * @param {Object} activity
+   */
   gotoAssessment(assessmentGroup, activity) {
     this.navCtrl.push(AssessmentsGroupPage, {
       assessmentGroup,
diff --git a/src/pages/assessments/group/assessments-group.html b/src/pages/assessments/group/assessments-group.html
index 43f8bcd9..dc0b3ad5 100644
--- a/src/pages/assessments/group/assessments-group.html
+++ b/src/pages/assessments/group/assessments-group.html
@@ -16,12 +16,13 @@
     </ion-list-header>
   </ion-list>
 
-  <ion-list text-wrap *ngIf="assessmentGroup">
+  <ion-list text-wrap *ngIf="assessmentGroup" class="assessments-group-text">
     <h6 class="strong center">{{assessmentGroup.name}}</h6>
-    <p [innerHTML]="assessment.description"></p>
+    <div [innerHTML]="assessmentGroup.description| keepHtml"></div>
   </ion-list>
 
   <div *ngFor="let question of questions; let i = index;"
+    class="assessments-group-text"
     [ngSwitch]="question.type"
     [ngClass]="{'hr': (i > 0 && i < questions.length)}">
 
@@ -30,43 +31,39 @@ <h6 class="strong center">{{assessmentGroup.name}}</h6>
       <span *ngIf="question.required" class="red">*</span>
     </ion-list>
 
-    <ion-item text-wrap *ngIf="question.description">
+    <ion-item text-wrap *ngIf="question.description" class="description">
       <p [innerHtml]="question.description"></p>
     </ion-item>
 
-    <div *ngFor="let submission of submissions">
-      <pre>{{ submission | json }}</pre>
-    </div>
-
     <!-- type: oneOf -->
     <oneof-question
       [question]="question"
-      [form]="formGroup[question.id]"
+      [form]="formGroup[question.question_id]"
       [disabled]="!canUpdateInput"
       *ngSwitchCase="'oneof'"></oneof-question>
 
     <!-- type: oneOf -->
     <multiple-question
       [question]="question"
-      [form]="formGroup[question.id]"
+      [form]="formGroup[question.question_id]"
       [disabled]="!canUpdateInput"
       *ngSwitchCase="'multiple'"></multiple-question>
 
     <!-- type: file -->
     <file-question
       [question]="question"
-      [form]="formGroup[question.id]"
+      [form]="formGroup[question.question_id]"
       [disabled]="!canUpdateInput"
       *ngSwitchCase="'file'"></file-question>
 
     <!-- type: text -->
     <text-question
       [question]="question"
-      [form]="formGroup[question.id]"
+      [form]="formGroup[question.question_id]"
       [disabled]="!canUpdateInput"
       *ngSwitchCase="'text'"></text-question>
 
     <!-- Reviewer's answer and comment -->
-    <feedback [question]="question" *ngIf="question.review_answer"></feedback>
+    <feedback [question]="question" *ngIf="question.review_answer" class="feedback"></feedback>
   </div>
 </ion-content>
diff --git a/src/pages/assessments/group/assessments-group.page.ts b/src/pages/assessments/group/assessments-group.page.ts
index 568e4cf2..789f4b8b 100644
--- a/src/pages/assessments/group/assessments-group.page.ts
+++ b/src/pages/assessments/group/assessments-group.page.ts
@@ -1,17 +1,16 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { NavParams, NavController, AlertController, LoadingController, Events } from 'ionic-angular';
 import { FormBuilder, Validators, FormGroup, FormControl, FormArray } from '@angular/forms';
 
-// Others
 import { CacheService } from '../../../shared/cache/cache.service';
 import { ChoiceBase, QuestionBase, Submission, AssessmentService } from '../../../services/assessment.service';
 import * as _ from 'lodash';
-
 @Component({
   selector: 'assessments-group-page',
   templateUrl: './assessments-group.html',
 })
-export class AssessmentsGroupPage {
+export class AssessmentsGroupPage implements OnInit {
+
   activity: any;
   answers: any; // to render & display submitted answers
   assessment: any;
@@ -20,7 +19,7 @@ export class AssessmentsGroupPage {
   canUpdateInput: boolean = false;
   event: any;
   formGroup: any;
-  inProgress: any;
+  inProgress: boolean | any;
   published: boolean = false;
   questions: any = [];
   submission: Submission;
@@ -36,7 +35,7 @@ export class AssessmentsGroupPage {
     public navParams: NavParams
   ) {}
 
-  ionViewDidEnter() {
+  ngOnInit() {
     // navigate from activity page
     this.activity = this.navParams.get('activity') || {};
 
@@ -45,13 +44,15 @@ export class AssessmentsGroupPage {
     if (!_.isEmpty(this.event)) {
       this.activity = this.event;
     }
+  }
 
-    this.assessment = this.activity.assessment; // required for context_id
-    this.cacheKey = `assessment.group.${this.assessment.context_id}`;
+  ionViewDidEnter() {
+    // use assessment object from activity (required for extracting context_id)
+    this.assessment = this.activity.assessment;
 
+    this.cacheKey = `assessment.group.${this.assessment.context_id}`;
     this.assessmentGroup = this.navParams.get('assessmentGroup') || {};
     this.submission = this.navParams.get('submission') || {};
-
     // preset key used for caching later (locally and remote data)
     this.canUpdateInput = this.isInputEditable(this.submission);
     // this.published = this.assessmentService.isPublished(this.submissions);
@@ -63,6 +64,10 @@ export class AssessmentsGroupPage {
     );
   }
 
+  /**
+   * @name updateSubmission
+   * @description trace changes of input for assessment (to avoid extra checking logics)
+   */
   updateSubmission() {
     this.events.publish('assessment:changes', {
       changed: true
@@ -92,24 +97,32 @@ export class AssessmentsGroupPage {
     }
 
     _.forEach(submission.review, (review) => {
+
       _.forEach(questions, (question, idx) => {
-        if (review.assessment_question_id === question.id) {
-          // text type
+        if (review.assessment_question_id === question.question_id) {
+          // text type (no merging, text question displayed in plain text)
           if (question.type === 'text') {
             questions[idx].review_answer = review;
           }
 
           // oneof type
+          // combine question, when answered by both reviewer and submitter
           if (question.type === 'oneof') {
             questions[idx].review_answer = review;
+            let submitterAnswer = question.answer;
+
             _.forEach(question.choices, (choice, key) => {
-              if (choice.id == review.answer && choice.id == question.answer.answer) {
-                questions[idx].choices[key].name = choice.name + ' (you and reviewer)';
-              }
-              if (choice.id != review.answer && choice.id == question.answer.answer) {
-                questions[idx].choices[key].name = choice.name + ' (you)';
-              }
-              if (choice.id == review.answer && choice.id != question.answer.answer) {
+              if (!_.isEmpty(submitterAnswer)) {
+                if (choice.id == review.answer && choice.id == submitterAnswer.answer) {
+                  questions[idx].choices[key].name = choice.name + ' (you and reviewer)';
+                }
+                else if (choice.id != review.answer && choice.id == submitterAnswer.answer) {
+                  questions[idx].choices[key].name = choice.name + ' (you)';
+                }
+                else if (choice.id == review.answer && choice.id != submitterAnswer.answer) {
+                  questions[idx].choices[key].name = choice.name + ' (reviewer)';
+                }
+              } else if (choice.id == review.answer) { // display reviewer answer
                 questions[idx].choices[key].name = choice.name + ' (reviewer)';
               }
             });
@@ -117,6 +130,7 @@ export class AssessmentsGroupPage {
         }
       });
     });
+
     return questions;
   }
 
@@ -178,7 +192,14 @@ export class AssessmentsGroupPage {
         group['choices'] = new FormGroup(choices);
       }
 
-      result[question.id] = new FormGroup(group);
+      /**
+       * id and question_id are different id
+       * - id =  has no obvious purpose
+       * - question_id must be used as id for submission
+       *
+       * but for case like this just for index id
+       */
+      result[question.question_id] = new FormGroup(group);
     });
 
     return result;
@@ -204,22 +225,31 @@ export class AssessmentsGroupPage {
 
     return {
       Assessment: {
-          id: submission.assessment_id,
-          context_id: this.getSubmissionContext()
+        id: submission.assessment_id,
+        context_id: this.getSubmissionContext()
       },
       AssessmentSubmissionAnswer: answers
     };
   }
 
   /**
-   * @description store assessment answer/progress locally
+   * @name storeProgress
+   * @description store assessment answer/progress locally (offline)
+   * @example format for cached submission
+   *          {
+   *            Assessment: {
+   *                id: 1,
+   *                context_id: 2
+   *            },
+   *            AssessmentSubmissionAnswer: Array<Submission>
+   *          }
    */
   storeProgress = () => {
     let answers = {};
-    _.forEach(this.formGroup, (question, id) => {
+    _.forEach(this.formGroup, (question, question_id) => {
       let values = question.getRawValue(),
           answer = {
-            assessment_question_id: id,
+            assessment_question_id: question_id,
             answer: values.answer || values.comment,
 
             // store it if choice answer is available or skip
@@ -228,7 +258,7 @@ export class AssessmentsGroupPage {
 
       // set empty string to remove answer
       answer.answer = (answer.answer) ? answer.answer : '';
-      answers[id] = answer;
+      answers[question_id] = answer;
     });
 
     // final step - store submission locally
@@ -248,20 +278,21 @@ export class AssessmentsGroupPage {
 
   /**
    * @description retrieve saved progress from localStorage
+   * @param {Array} questions
+   * @param {Object} answers
    */
   retrieveProgress = (questions: Array<any>, answers?) => {
-    let cachedProgress = answers || {}; //this.cache.getLocal(this.cacheKey);
-
-    let newQuestions = questions;
-    let savedProgress = cachedProgress.AssessmentSubmissionAnswer;
+    let cachedProgress = answers || {},
+        newQuestions = questions,
+        savedProgress = cachedProgress.AssessmentSubmissionAnswer;
 
     if (!_.isEmpty(savedProgress)) {
 
-      // index "id" is set as question.id in @Function buildFormGroup above
-      _.forEach(newQuestions, (question, id) => {
+      // index "id" is set as question.question_id in @Function buildFormGroup above
+      _.forEach(newQuestions, (question, question_id) => {
         // check integrity of saved answer (question might get updated)
-        if (savedProgress[id] && savedProgress[id].assessment_question_id == id) {
-          newQuestions[id] = this.setValueWith(question, savedProgress[id]);
+        if (savedProgress[question_id] && savedProgress[question_id].assessment_question_id == question_id) {
+          newQuestions[question_id] = this.setValueWith(question, savedProgress[question_id]);
         }
       });
     }
@@ -289,58 +320,52 @@ export class AssessmentsGroupPage {
   }
 
   /**
-   * @description initiate save progress and return to previous page/navigation stack
+   * @name save
+   * @description save input (partially post submission) and
+   *              return to previous navigation stack
    */
   save() {
     let self = this,
-    loading = this.loadingCtrl.create({
-      content: 'Loading...'
-    }),
-    // to provide a more descriptive error message (if available)
-    failAlert = this.alertCtrl.create({
-      title: 'Fail to submit.'
-    });
-
-    let saveProgress = () => {
-      this.updateSubmission();
-
-      loading.present().then(() => {
-        self.assessmentService.save(self.storeProgress()).subscribe(
-          response => {
-            loading.dismiss().then(() => {
-              self.navCtrl.pop();
-            });
-          },
-          reject => {
-            loading.dismiss().then(() => {
-              failAlert.data.title = reject.msg || failAlert.data.title;
-              failAlert.present().then(() => {
-                console.log('Unable to save', reject);
+      loading = this.loadingCtrl.create({
+        content: 'Loading...'
+      }),
+      // to provide a more descriptive error message (if available)
+      failAlert = this.alertCtrl.create({
+        title: 'Fail to submit.'
+      }),
+      saveProgress = () => {
+        this.updateSubmission();
+
+        loading.present().then(() => {
+          self.assessmentService.save(self.storeProgress()).subscribe(
+            response => {
+              loading.dismiss().then(() => {
+                self.navCtrl.pop();
               });
-            });
-          }
-        );
+            },
+            reject => {
+              loading.dismiss().then(() => {
+                failAlert.data.title = reject.msg || failAlert.data.title;
+                failAlert.present().then(() => {
+                  console.log('Unable to save', reject);
+                });
+              });
+            }
+          );
+        });
+      },
+      confirmBox = this.alertCtrl.create({
+        message: 'You have not completed all required questions. Do you still wish to Save?',
+        buttons: [
+          {
+            text: 'Yes',
+            handler: saveProgress
+          },
+          'No'
+        ]
       });
-    };
-
-    let confirmBox = this.alertCtrl.create({
-      message: 'You have not completed all required questions. Do you still wish to Save?',
-      buttons: [
-        {
-          text: 'Yes',
-          handler: () => {
-            saveProgress();
-          }
-        },
-        {
-          text: 'No',
-          handler: () => {
-            //return false;
-          }
-        }
-      ]
-    });
 
+    // has all compulsory questions answered?
     if (!this.isAllQuestionsAnswered()) {
       confirmBox.present();
     } else {
diff --git a/src/pages/assessments/popup/items-popup.page.ts b/src/pages/assessments/popup/items-popup.page.ts
index 26f57870..e5b5ea1e 100644
--- a/src/pages/assessments/popup/items-popup.page.ts
+++ b/src/pages/assessments/popup/items-popup.page.ts
@@ -29,11 +29,13 @@ export class ItemsPopupPage {
     public viewCtrl: ViewController
   ) {}
 
-  ionViewWillEnter() {
+  ionViewWillEnter(){
     this.combinedData = this.cacheService.getLocal('allNewItems');
   }
 
-  // close disbaled activity popup
+  /**
+   * @description close disbaled activity popup
+   */
   closeModal() {
     this.viewCtrl.dismiss();
     this.navCtrl.setRoot(TabsPage);
diff --git a/src/pages/events/view/events-view.page.ts b/src/pages/events/view/events-view.page.ts
index 9d8c3899..ed408924 100755
--- a/src/pages/events/view/events-view.page.ts
+++ b/src/pages/events/view/events-view.page.ts
@@ -201,9 +201,8 @@ export class EventsViewPage {
     loading.present().then(() => {
       // if submission exist
       loading.dismiss().then(() => {
-        // this.navCtrl.push(AssessmentsGroupPage, {
         this.navCtrl.push(AssessmentsPage, {
-          event,
+          event: event,
           activity: event.activity,
           submissions: this.submissions
         });
diff --git a/src/services/assessment.service.ts b/src/services/assessment.service.ts
index dbc0e492..cb2b5b55 100755
--- a/src/services/assessment.service.ts
+++ b/src/services/assessment.service.ts
@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core';
 import { RequestService } from '../shared/request/request.service';
-
 import * as _ from 'lodash';
-
+// services
+import { CacheService } from '../shared/cache/cache.service';
 class Assessment {
   id: number;
   context_id: number;
@@ -15,6 +15,15 @@ class Answer {
   choices?: Array<any>;
 }
 
+export class questionsResult {
+  required: Boolean;
+  answer: any;
+  reviewerAnswer: {
+    answer: any;
+    comment: any;
+  };
+}
+
 export class ChoiceBase<T> {
   id: number;
   value?: number; // or choice id, usually same as "id" above
@@ -32,11 +41,12 @@ export class QuestionBase<T> {
   assessment_id: number;
   name: string;
   type: string;
-  file_type?: string;
-  audience: Array<any>;
+  description: string;
+  required: boolean;
+  audience: string | Array<any>;
+  file_type?: string | any;
   choices?: ChoiceBase<any>[];
   answer?: any;
-  required?: boolean;
   order?: string | number;
 
   constructor(id, assessment_id, name, type) {
@@ -55,7 +65,12 @@ export class Submission {
 
 @Injectable()
 export class AssessmentService {
+  assessmentsUrl = 'api/assessments.json';
+  exportAssessmentsUrl = 'api/export_assessments.json';
+  assessmentSubmissionsUrl = 'api/assessment_submissions.json';
+
   constructor(
+    public cacheService: CacheService,
     public request: RequestService
   ) {}
 
@@ -78,9 +93,12 @@ export class AssessmentService {
      return published;
    }
 
-  // listAll()
-  getAll(options?: any) {
-    return this.request.get('api/assessments.json', { search: options });
+  /**
+   * @description Get all Assessments
+   * @param {any} options
+   */
+  getAll(options?: object) {
+    return this.request.get(this.assessmentsUrl, options);
   }
 
   /**
@@ -91,33 +109,36 @@ export class AssessmentService {
    *   - checkbox values (selected checkbox ids are required for post_assessments API) which
    *     they are only available in this get_export_assessments api
    *
-   * @param {any} options [description]
+   * @param {any} options
    */
-  getQuestion(options?: any) {
-    return this.request.get('api/export_assessments.json', { search: options });
+  getQuestion(options?: object) {
+    return this.request.get(this.exportAssessmentsUrl, options);
   }
 
+  /**
+   * @description Submit answer for an assessment
+   * @param {Submission} user's answer
+   */
   post(assessmentAnswer: Submission) {
-    return this.request.post('api/assessment_submissions.json', assessmentAnswer, {
+    return this.request.post(this.assessmentSubmissionsUrl, assessmentAnswer, {
       'Content-Type': 'application/json'
     });
   }
 
   /**
-   * save progress using "post" function AssessmentService.post()
-   * @param {Object} assessmentAnswer
+   * @description Save progress using "post" function AssessmentService.post()
+   * @param {Submission} assessmentAnswer
    */
-  save(assessmentAnswer) {
-    assessmentAnswer.Assessment.in_progress = true; // force in_progress
-
+  save(assessmentAnswer: Submission) {
+    assessmentAnswer.Assessment.in_progress = true; // force to save as in progress
     return this.post(assessmentAnswer);
   }
 
   /**
    * submit using "post" function AssessmentService.post()
-   * @param {Object} assessmentAnswer
+   * @param {Submission} assessmentAnswer
    */
-  submit(assessmentAnswer) {
+   submit(assessmentAnswer: Submission) {
     return this.post(assessmentAnswer);
   }
 
@@ -269,10 +290,10 @@ export class AssessmentService {
     }
    */
   normaliseGroup(group) {
-    // let result = group;
-    let thisQuestions = group.AssessmentGroupQuestion;
-    thisQuestions = thisQuestions.map(question => {
-      return this.normaliseQuestion(question);
+    let questions = group.AssessmentGroupQuestion;
+    let thisQuestions = [];
+    questions.forEach(question => {
+      thisQuestions.push(this.normaliseQuestion(question));
     });
 
     return {
@@ -285,6 +306,27 @@ export class AssessmentService {
     }
   }
 
+  /**
+   * filter submission by:
+   * - "submitter" as audience
+   * - "submitter" as audience && status as "published"
+   * @name isAccessible
+   * @param {object} question Single normalised assessment
+   *                            object from this.normalise above
+   * @param {string} status
+   */
+  isAccessible(question, status) {
+    let result = true;
+    if (question.audience.indexOf('submitter') === -1) {
+      result = false;
+    }
+
+    if (result && status === 'published') {
+      result = false;
+    }
+    return result;
+  }
+
   /*
     turn "AssessmentGroupQuestion" array format from:
     {
@@ -319,7 +361,7 @@ export class AssessmentService {
       "order": null,
     }
    */
-  normaliseQuestion(question): QuestionBase<any> {
+   normaliseQuestion(question): QuestionBase<any> {
     let thisQuestion = question.AssessmentQuestion;
     let choices = thisQuestion.AssessmentQuestionChoice;
 
@@ -328,18 +370,19 @@ export class AssessmentService {
     });
 
     return {
-      id: question.id,
+      id: question.id, // unknown purpose (be careful with this id)
       assessment_id: question.assessment_question_id,
-      question_id: question.assessment_question_id,
+      question_id: question.assessment_question_id, // use this to indicate question
       group_id: question.assessment_group_id,
       name: thisQuestion.name,
       type: thisQuestion.question_type,
       audience: thisQuestion.audience,
+      description: thisQuestion.description,
       file_type: thisQuestion.file_type,
       required: thisQuestion.is_required,
       choices: choices,
       order: question.order,
-      answer: thisQuestion.answer
+      answer: thisQuestion.answer,
     };
   }
 
@@ -381,4 +424,101 @@ export class AssessmentService {
       weight: choice.weight
     };
   }
+
+  /**
+   * hardcode communication to different server
+   * @param {[type]} assessment_id [description]
+   */
+  getPostProgramAssessment(assessment_id) {
+    return this.request.get(`${this.assessmentsUrl}?assessment_id=${assessment_id}&structured=true`);
+  }
+
+  /**
+   * @description get submission status
+   */
+  getStatus(questionsResult, submissionResult): string {
+    let questionsStatus = [];
+    _.forEach(questionsResult, q => {
+      if (q.required && q.answer !== null) {
+        if (
+          q.reviewerAnswer !== null &&
+          submissionResult.status !== 'pending approval' &&
+          (q.reviewerAnswer.answer || q.reviewerAnswer.comment)
+        ) {
+          questionsStatus.push('reviewed');
+        } else {
+          questionsStatus.push('completed');
+        }
+      }
+
+      if (!q.required && q.answer !== null) {
+        if (
+          q.reviewerAnswer !== null &&
+          submissionResult.status !== 'pending approval' &&
+          (q.reviewerAnswer.answer || q.reviewerAnswer.comment)
+        ) {
+          questionsStatus.push('reviewed');
+        } else {
+          questionsStatus.push('completed');
+        }
+      }
+
+      if (q.answer === null) {
+        questionsStatus.push('incomplete');
+      }
+
+      if(q.answer === null && q.audience == '["reviewer"]'){
+        questionsStatus.push('reviewed');
+      }
+    });
+
+    // get final status by checking all questions' statuses
+    let status = 'incomplete';
+    if (_.every(questionsStatus, (v) => {
+      return (v === 'completed');
+    })) {
+      status = 'completed';
+    }
+    if (_.includes(questionsStatus, 'reviewed')) {
+      status = 'reviewed';
+    }
+
+    return status;
+  }
+
+  getSummaries(questionsResult: Array<questionsResult>) {
+    let totalRequiredQuestions = 0;
+    let answeredQuestions = 0;
+    let reviewerFeedback = 0;
+
+    _.forEach(questionsResult, (q) => {
+      // get total number of questions
+      if (q.required) {
+        totalRequiredQuestions += 1;
+      }
+
+      // get total number of answered questions
+      if (q.required && q.answer && q.answer !== null) {
+        answeredQuestions += 1;
+      }
+
+      // get total number of feedback
+      // If API response, the reviewer's answer and comment are empty,
+      // front-end don't consider it as a feedback
+      if (
+        q.reviewerAnswer &&
+        q.reviewerAnswer !== null &&
+        !_.isEmpty(q.reviewerAnswer.answer) &&
+        !_.isEmpty(q.reviewerAnswer.comment)
+      ) {
+        reviewerFeedback += 1;
+      }
+    });
+
+    return {
+      totalRequiredQuestions,
+      answeredQuestions,
+      reviewerFeedback
+    };
+  }
 }
diff --git a/src/services/submission.service.ts b/src/services/submission.service.ts
index 562de8dc..704ebf3c 100755
--- a/src/services/submission.service.ts
+++ b/src/services/submission.service.ts
@@ -1,21 +1,21 @@
 import { Injectable } from '@angular/core';
-
-// Others
 import { RequestService } from '../shared/request/request.service';
+import { Observable } from 'rxjs/Observable';
+
 import * as _ from 'lodash';
 import * as moment from 'moment';
 
 @Injectable()
 export class SubmissionService {
-  targetUrl = 'api/submissions.json';
+  private targetUrl = 'api/submissions.json';
 
-  constructor(
-    public request: RequestService
-  ) {}
+  constructor(private request: RequestService) {}
 
-  // list()
+  /**
+   * @description List all submissions
+   */
   getSubmissions(options?: any) {
-    return this.request.get(this.targetUrl, { search: options });
+    return this.request.get(this.targetUrl, options);
   }
 
   extractPhotos(data) {
@@ -214,12 +214,16 @@ export class SubmissionService {
    * extract reference IDs and prepare Observables to retrieve submissions
    * @param {array} references References array responded with get_activities() api
    */
-  getSubmissionsByReferences(references) {
+  getSubmissionsByReferences(references: Array<{context_id : Number}>): Array<Observable<any>> {
     let tasks = []; // multiple API requests
 
     // get_submissions API to retrieve submitted answer
     let getSubmissions = (contextId) => {
-      return this.getSubmissions({ context_id: contextId });
+      return this.getSubmissions({
+        search: {
+          context_id: contextId
+        }
+      });
     };
     // Congregation of get_submissions API Observable with different context_id
     _.forEach(references, reference => {