diff --git a/package.json b/package.json
index 265c848048..5b9f8f81de 100755
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.22.89",
+  "version": "0.22.90",
   "myplanet": {
     "latest": "v0.55.91",
     "min": "v0.53.91"
diff --git a/src/app/exams/exams-add.component.html b/src/app/exams/exams-add.component.html
index e9a56a2b7f..8fa5026c5f 100644
--- a/src/app/exams/exams-add.component.html
+++ b/src/app/exams/exams-add.component.html
@@ -25,7 +25,7 @@
         <button mat-menu-item type="button" (click)="addQuestion('textarea')" i18n>Text - Long answer</button>
         <button mat-menu-item type="button" (click)="addQuestion('select')" i18n>Multiple Choice - single answer</button>
         <button mat-menu-item type="button" (click)="addQuestion('selectMultiple')" i18n>Multiple Choice - multiple answer</button>
-        <button *ngIf="examType !== 'exam'" mat-menu-item type="button" (click)="addQuestion('ratingScale')" i18n>Rating Scale - 1 to 9</button>
+        <button *ngIf="examType !== 'exam'" mat-menu-item type="button" (click)="addQuestion('ratingScale')" i18n>Rating Scale</button>
       </mat-menu>
       <mat-accordion class="exam-inputs" *ngIf="!isCourseContent">
         <mat-expansion-panel [expanded]="!isQuestionsActive">
diff --git a/src/app/exams/exams-question.component.html b/src/app/exams/exams-question.component.html
index b1842acceb..0fc36188b7 100644
--- a/src/app/exams/exams-question.component.html
+++ b/src/app/exams/exams-question.component.html
@@ -1,5 +1,11 @@
 <form class="vertical-form" [formGroup]="questionForm">
   <div class="type-title-container">
+    <div class="scale-max-field" *ngIf="questionForm.controls.type.value === 'ratingScale'">
+      <span class="scale-max-label" i18n>Scale</span>
+      <mat-button-toggle-group formControlName="scaleMax">
+        <mat-button-toggle *ngFor="let n of scaleMaxOptions" [value]="n">{{n}}</mat-button-toggle>
+      </mat-button-toggle-group>
+    </div>
     <mat-form-field>
       <mat-label i18n>Type</mat-label>
       <mat-select formControlName="type" (selectionChange)="clearChoices()" panelClass="exam-question-select">
@@ -7,7 +13,7 @@
         <mat-option value="textarea" i18n>Text - Long answer</mat-option>
         <mat-option value="select" i18n>Multiple Choice - single answer</mat-option>
         <mat-option value="selectMultiple" i18n>Multiple Choice - multiple answer</mat-option>
-        <mat-option *ngIf="examType !== 'exam'" value="ratingScale" i18n>Rating Scale - 1 to 9</mat-option>
+        <mat-option *ngIf="examType !== 'exam'" value="ratingScale" i18n>Rating Scale</mat-option>
       </mat-select>
     </mat-form-field>
   </div>
diff --git a/src/app/exams/exams-question.component.ts b/src/app/exams/exams-question.component.ts
index b7816029aa..01ac4014e9 100644
--- a/src/app/exams/exams-question.component.ts
+++ b/src/app/exams/exams-question.component.ts
@@ -16,6 +16,7 @@ import { NgIf, NgFor } from '@angular/common';
 import { PlanetMarkdownTextboxComponent } from '../shared/forms/planet-markdown-textbox.component';
 import { FormErrorMessagesComponent } from '../shared/forms/form-error-messages.component';
 import { MatButton, MatIconButton } from '@angular/material/button';
+import { MatButtonToggle, MatButtonToggleGroup } from '@angular/material/button-toggle';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { MatInput } from '@angular/material/input';
 import { MatIcon } from '@angular/material/icon';
@@ -27,7 +28,7 @@ import { MatIcon } from '@angular/material/icon';
   imports: [
     FormsModule, ReactiveFormsModule, MatFormField, MatLabel, MatSelect, MatOption, NgIf,
     PlanetMarkdownTextboxComponent, MatError, FormErrorMessagesComponent, MatButton, NgFor, MatCheckbox,
-    MatInput, MatIconButton, MatSuffix, MatIcon
+    MatInput, MatIconButton, MatSuffix, MatIcon, MatButtonToggle, MatButtonToggleGroup
   ]
 })
 export class ExamsQuestionComponent implements OnInit, OnChanges, OnDestroy, AfterViewChecked {
@@ -38,6 +39,7 @@ export class ExamsQuestionComponent implements OnInit, OnChanges, OnDestroy, Aft
   @Output() questionRemove = new EventEmitter<any>();
   @ViewChildren('choiceInput') choiceInputs: QueryList<ElementRef>;
   correctCheckboxes: any = {};
+  scaleMaxOptions = [ 5, 6, 7, 8, 9 ];
   questionForm: QuestionFormGroup = this.examsService.newQuestionForm(this.examType === 'courses');
   initializing = true;
   choiceAdded = false;
diff --git a/src/app/exams/exams-question.scss b/src/app/exams/exams-question.scss
index 4b2cfc3238..7c3e5fddbc 100644
--- a/src/app/exams/exams-question.scss
+++ b/src/app/exams/exams-question.scss
@@ -5,6 +5,7 @@
   form {
     display: grid;
     grid-template-rows: 56px auto 56px;
+    grid-row-gap: 1rem;
   }
 
   .question-choices {
@@ -20,8 +21,21 @@
 
   .type-title-container {
     display: grid;
-    grid-template-columns: 1fr v.$form-width-1;
-    grid-column-gap: 0.5rem;
+    grid-template-columns: 2fr 8fr;
+    grid-column-gap: 1rem;
+    align-items: center;
+  }
+
+  .scale-max-field {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+  }
+
+  .scale-max-label {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.6);
   }
 
 }
diff --git a/src/app/exams/exams-view.component.html b/src/app/exams/exams-view.component.html
index 614f854e63..968077aa46 100644
--- a/src/app/exams/exams-view.component.html
+++ b/src/app/exams/exams-view.component.html
@@ -32,86 +32,114 @@
     <button mat-icon-button [disabled]="isLoading || questionNum === 1" (click)="moveQuestion(-1)"><mat-icon>navigate_before</mat-icon></button>
     <button mat-icon-button [disabled]="isLoading || questionNum === maxQuestions" (click)="nextQuestion({ nextClicked: true })"><mat-icon>navigate_next</mat-icon></button>
   </mat-toolbar>
+  <div class="progress-bar-track" *ngIf="!isLoading && maxQuestions > 0">
+    <div class="progress-bar-fill" [style.width.%]="progressPercent"></div>
+  </div>
   <div class="view-container" [ngClass]="{ 'view-full-height': !isDialog }">
     <ng-container *ngIf="!isLoading; else LoadingContent">
-      <td-markdown [content]="question?.body"></td-markdown>
-      <div [ngSwitch]="mode">
-        <ng-container *ngSwitchCase="'take'">
-          <ng-container [ngSwitch]="question?.type">
-            <mat-form-field class="full-width" *ngSwitchCase="'input'">
-              <mat-label i18n>Enter answer here</mat-label>
-              <input matInput [formControl]="answer">
-            </mat-form-field>
-            <mat-form-field *ngSwitchCase="'textarea'" class="full-width mat-form-field-type-no-underline">
-              <planet-markdown-textbox [formControl]="answer"></planet-markdown-textbox>
-            </mat-form-field>
-            <mat-radio-group *ngSwitchCase="'select'" class="question-list" [formControl]="answer">
-              <mat-radio-button [value]="option" *ngFor="let option of question?.choices">
-                <span class="multiple-choice-text">{{option.text}}</span>
-              </mat-radio-button>
-              <ng-container *ngIf="question?.hasOtherOption">
-                <div class="other-option-flex">
-                  <mat-radio-button [value]="currentOtherOption">
-                    <span class="multiple-choice-text" i18n>Other: </span>
+      <div [ngClass]="slideDirection === 'right'
+        ? (slideAnimationVariant === 'a' ? 'slide-in-right-a' : 'slide-in-right-b')
+        : (slideAnimationVariant === 'a' ? 'slide-in-left-a' : 'slide-in-left-b')">
+        <td-markdown [content]="question?.body"></td-markdown>
+        <div [ngSwitch]="mode">
+          <ng-container *ngSwitchCase="'take'">
+            <ng-container [ngSwitch]="question?.type">
+              <mat-form-field class="full-width" *ngSwitchCase="'input'">
+                <mat-label i18n>Enter answer here</mat-label>
+                <input matInput [formControl]="answer">
+              </mat-form-field>
+              <mat-form-field *ngSwitchCase="'textarea'" class="full-width mat-form-field-type-no-underline">
+                <planet-markdown-textbox [formControl]="answer"></planet-markdown-textbox>
+              </mat-form-field>
+              <mat-radio-group *ngSwitchCase="'select'" class="question-list" [formControl]="answer">
+                <div class="option-card" *ngFor="let option of question?.choices" [class.selected]="isSelectOptionSelected(option)" (click)="selectOption(option)">
+                  <mat-radio-button [value]="option">
+                    <span class="multiple-choice-text">{{option.text}}</span>
                   </mat-radio-button>
-                  <input matInput
-                    class="other-option-input"
-                    [disabled]="!isOtherSelected()"
-                    [(ngModel)]="currentOtherOption.text"
-                    (ngModelChange)="updateOtherText()">
+                  <mat-icon class="option-check" *ngIf="isSelectOptionSelected(option)">check</mat-icon>
                 </div>
-              </ng-container>
-            </mat-radio-group>
-            <div *ngSwitchCase="'selectMultiple'" class="question-list">
-              <span class="mat-caption" i18n>
-                {examType, select, survey {You can choose one or more answers.} exam {There are one or more correct answers. Please choose all correct answers.}}
-              </span>
-              <mat-checkbox *ngFor="let option of question?.choices" [value]="option" (change)="setAnswer($event, option)" [checked]="checkboxState[option.id]">
-                <span class="multiple-choice-text">{{option.text}}</span>
-              </mat-checkbox>
-              <ng-container *ngIf="question?.hasOtherOption">
-                <div class="other-option-flex">
-                  <mat-checkbox [checked]="checkboxState['other']" (change)="toggleOtherMultiple($event)">
-                    <span class="multiple-choice-text" i18n>Other: </span>
+                <ng-container *ngIf="question?.hasOtherOption">
+                  <div class="option-card" [class.selected]="isOtherSelected()" (click)="selectOtherRadio()">
+                    <mat-radio-button [value]="currentOtherOption">
+                      <span class="multiple-choice-text" i18n>Other: </span>
+                    </mat-radio-button>
+                    <div class="other-option-flex">
+                      <input matInput
+                        #singleOtherInput
+                        class="other-option-input"
+                        [(ngModel)]="currentOtherOption.text"
+                        (ngModelChange)="updateOtherText()"
+                        (focus)="selectOtherRadio()"
+                        (click)="$event.stopPropagation()">
+                    </div>
+                    <mat-icon class="option-check" *ngIf="isOtherSelected()">check</mat-icon>
+                  </div>
+                </ng-container>
+              </mat-radio-group>
+              <div *ngSwitchCase="'selectMultiple'" class="question-list">
+                <span i18n>
+                  {examType, select, survey {You can choose one or more answers.} exam {There are one or more correct answers. Please choose all correct answers.}}
+                </span>
+                <div class="option-card" *ngFor="let option of question?.choices" [class.selected]="checkboxState[option.id]" (click)="toggleMultipleOption(option)">
+                  <mat-checkbox [value]="option" (change)="setAnswer($event, option)" [checked]="checkboxState[option.id]" (click)="$event.stopPropagation()">
+                    <span class="multiple-choice-text">{{option.text}}</span>
                   </mat-checkbox>
-                  <input matInput class="other-option-input" [disabled]="!checkboxState['other']" [(ngModel)]="currentOtherOption.text" (ngModelChange)="updateOtherText()">
+                  <mat-icon class="option-check" *ngIf="checkboxState[option.id]">check</mat-icon>
                 </div>
-              </ng-container>
-            </div>
-            <div *ngSwitchCase="'ratingScale'" class="rating-scale-keypad">
-              <div class="rating-scale-grid">
-                <button type="button" mat-raised-button class="rating-scale-button" *ngFor="let num of [1,2,3,4,5,6,7,8,9]" [class.selected]="answer.value === num.toString()" [attr.data-rating]="num" (click)="setRatingScaleAnswer(num)">
-                  {{num}}
-                </button>
+                <ng-container *ngIf="question?.hasOtherOption">
+                  <div class="option-card" [class.selected]="checkboxState['other']" (click)="toggleOtherCheckbox()">
+                    <mat-checkbox [checked]="checkboxState['other']" (change)="toggleOtherMultiple($event)" (click)="$event.stopPropagation()">
+                      <span class="multiple-choice-text" i18n>Other: </span>
+                    </mat-checkbox>
+                    <div class="other-option-flex">
+                      <input matInput #multipleOtherInput class="other-option-input" [(ngModel)]="currentOtherOption.text" (ngModelChange)="updateOtherText()" (focus)="ensureOtherCheckboxSelected()" (click)="$event.stopPropagation()">
+                    </div>
+                    <mat-icon class="option-check" *ngIf="checkboxState['other']">check</mat-icon>
+                  </div>
+                </ng-container>
               </div>
-            </div>
+              <ng-container *ngSwitchCase="'ratingScale'">
+                <div class="rating-scale-keypad rating-scale-keypad--grid" *ngIf="(question?.scaleMax ?? 9) === 9; else ratingScaleRow">
+                  <button type="button" mat-raised-button class="rating-scale-button rating-scale-button--phone" *ngFor="let num of ratingScaleNumbers" [class.selected]="answer.value === num.toString()" [attr.data-rating]="num" (click)="setRatingScaleAnswer(num)">
+                    {{num}}
+                  </button>
+                </div>
+                <ng-template #ratingScaleRow>
+                  <div class="rating-scale-keypad rating-scale-keypad--row">
+                    <button type="button" class="rating-scale-button rating-scale-button--line" *ngFor="let num of ratingScaleNumbers" [class.selected]="answer.value === num.toString()" (click)="setRatingScaleAnswer(num)">
+                      {{num}}
+                    </button>
+                  </div>
+                </ng-template>
+              </ng-container>
+            </ng-container>
           </ng-container>
-        </ng-container>
-        <ng-container *ngSwitchCase="'grade'">
-          <p><b i18n>Submitted answer:</b></p>
-          <td-markdown [content]="answer?.value?.text || answer?.value"></td-markdown>
-          <mat-radio-group [(ngModel)]="grade" [disabled]="question?.type === 'select' || question?.type === 'selectMultiple'">
-            <mat-radio-button [value]="1" class="planet-radio-button" i18n>Correct</mat-radio-button>
-            <mat-radio-button [value]="0" class="planet-radio-button" i18n>Incorrect</mat-radio-button>
-          </mat-radio-group>
-          <mat-form-field class="full-width mat-form-field-type-no-underline">
-            <mat-label i18n>Comment</mat-label>
-            <planet-markdown-textbox class="full-width" [(ngModel)]="comment"></planet-markdown-textbox>
-          </mat-form-field>
-        </ng-container>
-        <ng-container *ngSwitchCase="'view'">
-          <p><b i18n>Response:</b></p>
-          <td-markdown [content]="answer?.value?.text || answer?.value"></td-markdown>
-          <ng-container *ngIf="grade>=0">
-            <p><b i18n>Grade:</b></p>
-            <p *ngIf="grade===1" i18n>Correct</p>
-            <p *ngIf="grade===0" i18n>Incorrect</p>
+          <ng-container *ngSwitchCase="'grade'">
+            <p><b i18n>Submitted answer:</b></p>
+            <td-markdown [content]="answer?.value?.text || answer?.value"></td-markdown>
+            <mat-radio-group [(ngModel)]="grade" [disabled]="question?.type === 'select' || question?.type === 'selectMultiple'">
+              <mat-radio-button [value]="1" class="planet-radio-button" i18n>Correct</mat-radio-button>
+              <mat-radio-button [value]="0" class="planet-radio-button" i18n>Incorrect</mat-radio-button>
+            </mat-radio-group>
+            <mat-form-field class="full-width mat-form-field-type-no-underline">
+              <mat-label i18n>Comment</mat-label>
+              <planet-markdown-textbox class="full-width" [(ngModel)]="comment"></planet-markdown-textbox>
+            </mat-form-field>
           </ng-container>
-          <ng-container *ngIf="comment">
-            <p><b i18n>Feedback:</b></p>
-            <td-markdown [content]="comment"></td-markdown>
+          <ng-container *ngSwitchCase="'view'">
+            <p><b i18n>Response:</b></p>
+            <td-markdown [content]="answer?.value?.text || answer?.value"></td-markdown>
+            <ng-container *ngIf="grade>=0">
+              <p><b i18n>Grade:</b></p>
+              <p *ngIf="grade===1" i18n>Correct</p>
+              <p *ngIf="grade===0" i18n>Incorrect</p>
+            </ng-container>
+            <ng-container *ngIf="comment">
+              <p><b i18n>Feedback:</b></p>
+              <td-markdown [content]="comment"></td-markdown>
+            </ng-container>
           </ng-container>
-        </ng-container>
+        </div>
       </div>
       <div class="v-align-center action-buttons">
         <button
@@ -124,8 +152,8 @@
         </button>
         <button
           *ngIf="mode === 'take'"
-          mat-raised-button
-          color="accent"
+          mat-stroked-button
+          color="primary"
           (click)="nextQuestion({ isFinish: true })"
           [disabled]="!isComplete || !answer.valid || grade === undefined || grade === null"
           i18n>
diff --git a/src/app/exams/exams-view.component.ts b/src/app/exams/exams-view.component.ts
index 08631c294b..bb40dfa30e 100644
--- a/src/app/exams/exams-view.component.ts
+++ b/src/app/exams/exams-view.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, Input } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input, ViewChild, ElementRef } from '@angular/core';
 import {
   AbstractControl, FormBuilder, FormControl, FormGroup, ValidationErrors, ValidatorFn, FormsModule, ReactiveFormsModule
 } from '@angular/forms';
@@ -86,6 +86,12 @@ export class ExamsViewComponent implements OnInit, OnDestroy {
   courseId: string;
   teamId = this.route.snapshot.params.teamId || null;
   currentOtherOption: ExamOtherAnswerOption = { id: 'other', text: '', isOther: true };
+  slideDirection: 'right' | 'left' = 'right';
+  slideAnimationVariant: 'a' | 'b' = 'a';
+  @ViewChild('singleOtherInput') singleOtherInput?: ElementRef<HTMLInputElement>;
+  @ViewChild('multipleOtherInput') multipleOtherInput?: ElementRef<HTMLInputElement>;
+  progressPercent = 0;
+  ratingScaleNumbers: number[] = [];
   private readonly answerValidator: ValidatorFn = (ac: AbstractControl<ExamAnswerValue>): ValidationErrors | null => {
     const value = ac.value;
     if (typeof value === 'string') {
@@ -243,6 +249,10 @@ export class ExamsViewComponent implements OnInit, OnDestroy {
   }
 
   moveQuestion(direction: number) {
+    if (direction !== 0) {
+      this.slideDirection = direction > 0 ? 'right' : 'left';
+      this.slideAnimationVariant = this.slideAnimationVariant === 'a' ? 'b' : 'a';
+    }
     if (this.isDialog) {
       this.questionNum = this.questionNum + direction;
       this.setExamPreview();
@@ -291,6 +301,9 @@ export class ExamsViewComponent implements OnInit, OnDestroy {
   setQuestion(questions: any[]) {
     this.question = questions[this.questionNum - 1];
     this.maxQuestions = questions.length;
+    this.progressPercent = this.maxQuestions ? Math.round((this.questionNum / this.maxQuestions) * 100) : 0;
+    const scaleMax = this.question?.scaleMax ?? 9;
+    this.ratingScaleNumbers = Array.from({ length: scaleMax }, (_, i) => i + 1);
     this.answer.markAsUntouched();
     this.currentOtherOption = { id: 'other', text: '', isOther: true };
   }
@@ -463,12 +476,47 @@ export class ExamsViewComponent implements OnInit, OnDestroy {
     return this.isOtherOption(this.answer.value);
   }
 
+  isSelectOptionSelected(option: ExamAnswerOption): boolean {
+    const value = this.answer.value;
+    return this.isAnswerOption(value) && !this.isOtherOption(value) && value.id === option.id;
+  }
+
+  selectOption(option: ExamAnswerOption): void {
+    this.answer.setValue(option);
+    this.answer.updateValueAndValidity();
+  }
+
+  selectOtherRadio(): void {
+    if (this.isOtherSelected()) {
+      this.focusOtherInput('single');
+      return;
+    }
+    this.answer.setValue(this.currentOtherOption);
+    this.answer.updateValueAndValidity();
+    this.focusOtherInput('single');
+  }
+
+  toggleMultipleOption(option: ExamAnswerOption): void {
+    this.setAnswer({ checked: !this.checkboxState[option.id] }, option);
+  }
+
+  toggleOtherCheckbox(): void {
+    this.toggleOtherMultiple({ checked: !this.checkboxState['other'] });
+  }
+
+  ensureOtherCheckboxSelected(): void {
+    if (!this.checkboxState['other']) {
+      this.toggleOtherMultiple({ checked: true });
+    }
+  }
+
   toggleOtherMultiple({ checked }: Pick<MatCheckboxChange, 'checked'>): void {
     this.checkboxState['other'] = checked;
     if (checked) {
       if (this.currentOtherOption) {
         this.setAnswer({ checked: true }, this.currentOtherOption);
       }
+      this.focusOtherInput('multiple');
     } else {
       const remaining = Array.isArray(this.answer.value) ? this.answer.value.filter(o => o.id !== 'other') : [];
       this.answer.setValue(remaining.length ? remaining : null);
@@ -488,4 +536,11 @@ export class ExamsViewComponent implements OnInit, OnDestroy {
     return this.isAnswerOption(value) && value.isOther === true;
   }
 
+  private focusOtherInput(type: 'single' | 'multiple'): void {
+    setTimeout(() => {
+      const inputRef = type === 'single' ? this.singleOtherInput : this.multipleOtherInput;
+      inputRef?.nativeElement.focus();
+    });
+  }
+
 }
diff --git a/src/app/exams/exams-view.scss b/src/app/exams/exams-view.scss
index ede94f0ea5..47eb1d688b 100644
--- a/src/app/exams/exams-view.scss
+++ b/src/app/exams/exams-view.scss
@@ -5,100 +5,208 @@
   mat-toolbar.primary-color > span {
     display: inline-flex;
     align-items: center;
+    min-width: 0;
+    overflow: hidden;
+
+    .ellipsis-title {
+      flex: 0 1 auto;
+      min-width: 0;
+    }
+  }
+
+  mat-toolbar.primary-color button[mat-icon-button] {
+    flex: 0 0 auto;
   }
 
   .view-container {
     display: grid;
     grid-template-rows: min-content minmax(auto, min-content) max-content min-content;
+  }
 
-    td-markdown {
-      overflow-y: auto;
-    }
+  .view-container.view-full-height {
+    height: auto;
+    min-height: calc(#{v.$view-container-height} - 4px);
+  }
+
+  .progress-bar-track {
+    background: #d4deea;
+  }
+
+  .progress-bar-fill {
+    background: #0a2d49;
+    height: 8px;
+    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
   .question-list {
     display: flex;
     flex-direction: column;
-
-    mat-radio-button, mat-checkbox {
-      margin: 5px;
-      float: left;
-    }
-
-    mat-radio-button:last-child, mat-checkbox:last-child {
-      margin-bottom: 15px;
-    }
+    gap: 10px;
   }
 
-  .v-align-center, .v-align-center > * {
+  .option-card {
     display: flex;
     align-items: center;
-  }
+    flex-wrap: wrap;
+    gap: 14px;
+    padding: 14px 16px;
+    border: 2px solid #e8e8e8;
+    border-radius: 10px;
+    background: white;
+    cursor: pointer;
+    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
+    user-select: none;
+    margin: 0;
+    min-width: 0;
 
-  .question-header {
-    margin-bottom: 8px;
-  }
+    &:hover {
+      border-color: v.$primary-light;
+      background: v.$primary-lighter;
+    }
 
-  .multiple-choice-text {
-    white-space: normal;
+    &.selected {
+      border-color: v.$primary;
+      background: v.$primary-lighter;
+    }
+
+    .multiple-choice-text {
+      font-size: 15px;
+    }
+
+    .option-check {
+      color: v.$primary;
+      font-size: 20px;
+      margin-left: auto;
+    }
   }
 
   .other-option-flex {
     display: flex;
     align-items: center;
     gap: 8px;
+    flex: 1 1 auto;
+    min-width: 0;
   }
 
   .other-option-input {
+    flex: 1 1 auto;
+    min-width: 0;
+    width: 100%;
     border: none;
-    border-bottom: 1px dotted #000;
+    border-bottom: 2px solid #e0e0e0;
     outline: none;
-    max-width: 50%;
+    font: inherit;
+    padding: 4px 2px;
+    background: transparent;
+    transition: border-color 0.2s ease;
+
+    &:focus {
+      border-bottom-color: v.$primary;
+    }
   }
 
-  .rating-scale-keypad {
+  .v-align-center, .v-align-center > * {
     display: flex;
-    justify-content: flex-start;
-    margin: 20px 0;
+    align-items: center;
   }
 
-  .rating-scale-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
+  .action-buttons {
     gap: 12px;
-    max-width: 240px;
-    width: 100%;
+    flex-wrap: wrap;
+    margin-top: 20px;
+    padding-top: 16px;
+    border-top: 1px solid #f0f0f0;
+  }
+
+  .rating-scale-keypad {
+    margin: 8px 0 20px;
+
+    &--grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 12px;
+      max-width: 240px;
+    }
+
+    &--row {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      flex-wrap: wrap;
+      max-width: 532px;
+    }
   }
 
   .rating-scale-button {
-    height: 60px;
-    font-size: 28px;
+    padding: 0;
+    border: 2px solid #e0e0e0;
+    border-radius: 10px;
+    background: white;
+    color: #555;
     font-weight: 500;
-    border: 2px solid #ddd;
-    border-radius: 8px;
-    transition: all 0.2s ease;
-
-    &[data-rating="1"] { background-color: #ffeaea; }
-    &[data-rating="2"] { background-color: #ffeeea; }
-    &[data-rating="3"] { background-color: #fff2ea; }
-    &[data-rating="4"] { background-color: #fff6ea; }
-    &[data-rating="5"] { background-color: #fffaea; }
-    &[data-rating="6"] { background-color: #f6faea; }
-    &[data-rating="7"] { background-color: #f2faea; }
-    &[data-rating="8"] { background-color: #eefaea; }
-    &[data-rating="9"] { background-color: #eafaea; }
-
-    &:hover {
-      border-color: v.$primary;
-      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    font-family: inherit;
+    cursor: pointer;
+    transition: border-color 0.18s ease, background 0.18s ease,
+      color 0.18s ease, box-shadow 0.18s ease;
+
+    &:hover:not(.selected):not([disabled]) {
+      border-color: v.$primary-light;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     }
 
     &.selected {
-      background-color: v.$primary;
+      background: v.$primary;
       color: white;
       border-color: v.$primary;
-      box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18);
     }
+
+    &--line {
+      width: 52px;
+      height: 52px;
+      min-width: 52px;
+      font-size: 18px;
+
+      &:hover:not(.selected):not([disabled]) {
+        background: v.$primary-lighter;
+      }
+    }
+
+    &--phone {
+      $rating-bg: (
+        1: #ffeaea,
+        2: #ffeeea,
+        3: #fff2ea,
+        4: #fff6ea,
+        5: #fffaea,
+        6: #f6faea,
+        7: #f2faea,
+        8: #eefaea,
+        9: #eafaea
+      );
+
+      height: 60px;
+      font-size: 28px;
+
+      @each $rating, $color in $rating-bg {
+        &[data-rating="#{$rating}"]:not(.selected) {
+          background-color: $color;
+        }
+      }
+    }
+  }
+
+  @keyframes slideInRight {
+    from { opacity: 0; transform: translateX(30px); }
+    to { opacity: 1; transform: translateX(0); }
   }
 
+  @keyframes slideInLeft {
+    from { opacity: 0; transform: translateX(-30px); }
+    to { opacity: 1; transform: translateX(0); }
+  }
+
+  .slide-in-right-a, .slide-in-right-b { animation: slideInRight 0.28s ease; }
+  .slide-in-left-a, .slide-in-left-b { animation: slideInLeft 0.28s ease; }
+
 }
diff --git a/src/app/exams/exams.model.ts b/src/app/exams/exams.model.ts
index afb081346c..e157fc5ed7 100644
--- a/src/app/exams/exams.model.ts
+++ b/src/app/exams/exams.model.ts
@@ -17,4 +17,5 @@ export interface ExamQuestion {
   correctChoice: string[];
   marks: number;
   choices: { text: string, id: string }[];
+  scaleMax?: number;
 }
diff --git a/src/app/exams/exams.service.ts b/src/app/exams/exams.service.ts
index b24f963b96..5bacb300f5 100644
--- a/src/app/exams/exams.service.ts
+++ b/src/app/exams/exams.service.ts
@@ -17,6 +17,7 @@ export interface QuestionValue {
   marks: number;
   choices: QuestionChoice[];
   hasOtherOption: boolean;
+  scaleMax: number;
 }
 
 export type QuestionChoiceFormGroup = FormGroup<{
@@ -31,6 +32,7 @@ export type QuestionFormGroup = FormGroup<{
   marks: FormControl<number>;
   choices: FormArray<QuestionChoiceFormGroup>;
   hasOtherOption: FormControl<boolean>;
+  scaleMax: FormControl<number>;
 }>;
 
 @Injectable({
@@ -56,7 +58,8 @@ export class ExamsService {
       choices: this.fb.array<QuestionChoiceFormGroup>(
         choices.length === 0 ? [] : choices.map(choice => this.newQuestionChoice(choice.id ?? '', choice))
       ),
-      hasOtherOption: this.fb.control(false)
+      hasOtherOption: this.fb.control(false),
+      scaleMax: this.fb.control(9)
     }, { validators: this.choiceRequiredValidator.bind(this) });
 
     return this.setInitalFormValue(formGroup, initialValue);
diff --git a/src/app/submissions/submissions.service.ts b/src/app/submissions/submissions.service.ts
index d71c9e90b7..7f6118ec85 100644
--- a/src/app/submissions/submissions.service.ts
+++ b/src/app/submissions/submissions.service.ts
@@ -684,8 +684,9 @@ export class SubmissionsService {
   }
 
   calculateAverageRating(question, submissions): number {
+    const scaleMax = question.scaleMax ?? 9;
     const validRatings = submissions.map(
-      sub => parseInt(sub.answers[question.index].value, 10)).filter(rating => !isNaN(rating) && rating >= 1 && rating <= 9
+      sub => parseInt(sub.answers[question.index].value, 10)).filter(rating => !isNaN(rating) && rating >= 1 && rating <= scaleMax
     );
     const sum = validRatings.reduce((total, rating) => total + rating, 0);
     return parseFloat((sum / validRatings.length).toFixed(1));
@@ -696,9 +697,10 @@ export class SubmissionsService {
   ) {
     const totalUsers = submissions.length;
     const counts: Record<string, Set<string>> = {};
+    const scaleMax = question.scaleMax ?? 9;
 
     if (question.type === 'ratingScale') {
-      for (let i = 1; i <= 9; i++) {
+      for (let i = 1; i <= scaleMax; i++) {
         counts[i.toString()] = new Set();
       }
     } else {
@@ -737,7 +739,7 @@ export class SubmissionsService {
       }
     });
 
-    const labels = question.type === 'ratingScale' ? Array.from({length: 9}, (_, i) => (i + 1).toString()) : Object.keys(counts);
+    const labels = question.type === 'ratingScale' ? Array.from({length: scaleMax}, (_, i) => (i + 1).toString()) : Object.keys(counts);
     const userCounts = labels.map(l => counts[l].size);
     const totalSelections = userCounts.reduce((sum, count) => sum + count, 0);
     let data: number[];