diff --git a/src/app/quiz/quiz-checkbox.component.scss b/src/app/quiz/quiz-checkbox.component.scss
index a429ab23..6902e5ad 100644
--- a/src/app/quiz/quiz-checkbox.component.scss
+++ b/src/app/quiz/quiz-checkbox.component.scss
@@ -14,8 +14,6 @@ clr-checkbox-container {
 .quiz-question-title {
   white-space: wrap;
   width: calc(100% - 40px) !important;
-  margin-left: 20px;
-  margin-right: 20px;
   margin-bottom: 10px;
   max-width: 100%;
 }
diff --git a/src/app/quiz/quiz.component.html b/src/app/quiz/quiz.component.html
index be6b9893..29156655 100644
--- a/src/app/quiz/quiz.component.html
+++ b/src/app/quiz/quiz.component.html
@@ -1,19 +1,99 @@
-<pre class="quiz-container">
-  @if (quizTitle) { <h5 class="quiz-title">{{ quizTitle }}</h5> }
+<div class="quiz-container">
+  <div class="card quiz-card">
+    <div class="card-block">
+      @if (quizTitle) {
+        <h5 class="quiz-title">{{ quizTitle }}</h5>
+      }
 
-  @if(isPersistent && !loadingQuiz && !currentQuiz) {
-    <clr-alert
-      [clrAlertType]="'danger'"
-      [clrAlertClosable]="false"
-    >
-      <clr-alert-item>
-        <span class="alert-text">
-          Failed to load quiz!
+      @if (isPersistent && !loadingQuiz && !currentQuiz) {
+        <clr-alert [clrAlertType]="'danger'" [clrAlertClosable]="false">
+          <clr-alert-item>
+            <span class="alert-text"> Failed to load quiz! </span>
+          </clr-alert-item>
+        </clr-alert>
+      }
+
+      @if (isPersistent && loadingQuestions && started) {
+        <span class="spinner spinner-inline"> Loading... </span>
+        <span> Loading Questions... </span>
+      }
+      @if (
+        (!isPersistent || (isPersistent && started)) && questions.length > 0
+      ) {
+        <div class="quiz-progress">
+          <div class="progress">
+            <progress [value]="progress" max="100"></progress>
+          </div>
+        </div>
+
+        @for (q of questions; track q.id || q.title; let i = $index) {
+          <div [hidden]="i !== currentIndex">
+            @if (q.type === 'checkbox') {
+              <quiz-checkbox
+                [quizId]="quizId"
+                [scenarioId]="scenarioId"
+                [questionId]="q.id || ''"
+                [title]="q.title"
+                [helperText]="q.helperText || ''"
+                [validation]="q.validation"
+                [successMsg]="q.successMsg"
+                [errMsg]="q.errorMsg"
+                [shuffle]="q.shuffle"
+                [questionAnswers]="q.answers"
+                [correctAnswerIds]="correctIdsByQid.get(q.id ?? '') ?? testObs"
+                [remotePass]="remotePass"
+              ></quiz-checkbox>
+            } @else {
+              <quiz-radio
+                [quizId]="quizId"
+                [scenarioId]="scenarioId"
+                [questionId]="q.id || ''"
+                [title]="q.title"
+                [helperText]="q.helperText || ''"
+                [validation]="q.validation"
+                [successMsg]="q.successMsg"
+                [errMsg]="q.errorMsg"
+                [shuffle]="q.shuffle"
+                [questionAnswers]="q.answers"
+                [correctAnswerIds]="correctIdsByQid.get(q.id ?? '') ?? testObs"
+                [remotePass]="remotePass"
+              ></quiz-radio>
+            }
+          </div>
+        }
+      }
+    </div>
+
+    @if ((!isPersistent || (isPersistent && started)) && questions.length > 0) {
+      <div class="card-footer quiz-footer">
+        <button
+          class="btn btn-outline"
+          type="button"
+          (click)="prevQuestion()"
+          [disabled]="currentIndex === 0"
+        >
+          Previous
+        </button>
+
+        <span class="quiz-footer-label">
+          Question {{ currentIndex + 1 }} / {{ totalQuestions }}
         </span>
-      </clr-alert-item>
-    </clr-alert>
-  }
-  @else if (isPersistent && alreadyPassed) {
+
+        <button
+          class="btn"
+          [ngClass]="
+            currentIndex === totalQuestions - 1 ? 'btn-outline' : 'btn-primary'
+          "
+          type="button"
+          (click)="nextQuestion()"
+          [disabled]="currentIndex === totalQuestions - 1"
+        >
+          Next
+        </button>
+      </div>
+    }
+  </div>
+  @if (isPersistent && alreadyPassed) {
     <app-alert #failedDownloadAlert></app-alert>
     <clr-alert
       [clrAlertType]="'success'"
@@ -21,63 +101,29 @@
       [clrAlertIcon]="'check-circle'"
     >
       <clr-alert-item class="centered">
-        <span class="alert-text">
-          You passed this quiz. Great job!
-        </span>
-        @if(quizIssuer) {
+        <span class="alert-text"> You passed this quiz. Great job! </span>
+        @if (quizIssuer) {
           <div class="alert-actions">
-            <button class="btn alert-action" (click)="download()">Download Certificate</button>
+            <button class="btn btn-primary" (click)="download()">
+              Download Certificate
+            </button>
           </div>
         }
       </clr-alert-item>
     </clr-alert>
-  } @else if(isPersistent && loadingQuestions && started) {
-    <span class="spinner spinner-inline"> Loading... </span>
-    <span> Loading Questions... </span>
-  } @else if (!isPersistent || isPersistent && !alreadyPassed && started) { 
-    @for (q of questions; track q.id || q.title; let i = $index) {
-      @if (q.type === 'checkbox') {
-        <quiz-checkbox
-          [quizId]="quizId"
-          [scenarioId]="scenarioId"
-          [questionId]="q.id || ''"
-          [title]="q.title"
-          [helperText]="q.helperText || ''"
-          [validation]="q.validation"
-          [successMsg]="q.successMsg"
-          [errMsg]="q.errorMsg"
-          [shuffle]="q.shuffle"
-          [questionAnswers]="q.answers"
-          [correctAnswerIds]="correctIdsByQid.get(q.id ?? '') ?? testObs"
-          [remotePass]="remotePass"
-        ></quiz-checkbox>
-      } @else {
-        <quiz-radio
-          [quizId]="quizId"
-          [scenarioId]="scenarioId"
-          [questionId]="q.id || ''"
-          [title]="q.title"
-          [helperText]="q.helperText || ''"
-          [validation]="q.validation"
-          [successMsg]="q.successMsg"
-          [errMsg]="q.errorMsg"
-          [shuffle]="q.shuffle"
-          [questionAnswers]="q.answers"
-          [correctAnswerIds]="correctIdsByQid.get(q.id ?? '') ?? testObs"
-          [remotePass]="remotePass"
-        ></quiz-radio>
-      }
+  }
+  @if (!isPersistent || (isPersistent && !alreadyPassed && started)) {
+    @if (isSubmitted && alreadyPassed === false) {
+      <clr-alert [clrAlertType]="'warning'" [clrAlertClosable]="false">
+        <clr-alert-item>
+          <span class="alert-text">
+            You did not reach the required score. Please try again.
+          </span>
+        </clr-alert-item>
+      </clr-alert>
     }
 
     <div class="button-container">
-      <button
-        [disabled]="allowedAtts < 1 || isSubmitted || alreadyPassed"
-        class="btn btn-success-outline submit-button"
-        type="submit"
-        (click)="submit()"
-      >
-        Submit
-      </button>
       <button
         [disabled]="allowedAtts < 1 || !isSubmitted || alreadyPassed"
         class="btn btn-outline reset-button"
@@ -85,23 +131,60 @@
       >
         Retry
       </button>
+      <button
+        [disabled]="allowedAtts < 1 || isSubmitted || alreadyPassed"
+        class="btn"
+        [ngClass]="
+          currentIndex === totalQuestions - 1
+            ? 'btn-success'
+            : 'btn-success-outline'
+        "
+        type="submit"
+        (click)="submit()"
+      >
+        Submit Quiz
+      </button>
     </div>
-    @if(allowedAtts <= 100) {
-      <span class="clr-subtext">Allowed attempts left: {{ allowedAtts }}</span> 
+
+    @if (allowedAtts <= 100) {
+      <span class="clr-subtext attempts">
+        Allowed attempts left: {{ allowedAtts }}
+      </span>
     }
   }
-  @if(isPersistent && loadingQuestions && !started && !alreadyPassed && !loadingQuiz) {
+
+  @if (
+    isPersistent &&
+    loadingQuestions &&
+    !started &&
+    !alreadyPassed &&
+    !loadingQuiz
+  ) {
     <div class="button-container">
       <button
         [disabled]="started || alreadyPassed || allowedAtts < 1"
         class="btn btn-success-outline submit-button"
         (click)="start(currentQuiz)"
       >
-        Start
+        Start Quiz
       </button>
     </div>
-    @if(allowedAtts <= 100) {
-      <span class="clr-subtext">Allowed attempts left: {{ allowedAtts }}</span> 
+    @if (allowedAtts <= 100) {
+      <span class="clr-subtext attempts">
+        Allowed attempts left: {{ allowedAtts }}
+      </span>
     }
   }
-</pre>
+</div>
+
+<clr-modal [(clrModalOpen)]="showIncompleteModal" [clrModalClosable]="true">
+  <h3 class="modal-title">Incomplete quiz</h3>
+  <div class="modal-body">
+    <p>Please answer all questions before submitting your quiz.</p>
+  </div>
+  <div class="modal-footer">
+    <button class="btn btn-primary" (click)="showIncompleteModal = false">
+      OK
+    </button>
+  </div>
+</clr-modal>
diff --git a/src/app/quiz/quiz.component.scss b/src/app/quiz/quiz.component.scss
index 7ed0cf9a..c3c18ca4 100644
--- a/src/app/quiz/quiz.component.scss
+++ b/src/app/quiz/quiz.component.scss
@@ -1,10 +1,15 @@
 .quiz-container {
   display: flex;
   flex-direction: column;
+  border: none;
+  padding: 20px;
+  margin-top: 20px;
+  border-radius: var(--cds-alias-object-border-radius-100);
 }
 
 .quiz-title {
-  margin-bottom: 1.2rem;
+  margin-bottom: 1rem;
+  margin-top: 0;
   font-weight: bold;
 }
 
@@ -12,6 +17,9 @@
   display: flex;
   width: 100%;
   flex-direction: row;
+  padding: 20px;
+  justify-content: flex-end;
+  gap: 5px;
 }
 
 .submit-button {
@@ -24,3 +32,39 @@
 .centered {
   align-items: center;
 }
+
+.attempts {
+  align-self: flex-end;
+}
+
+.nav-container {
+  display: flex;
+  align-items: center;
+  margin: 1rem 0;
+
+  .nav-label {
+    margin: 0 1rem;
+  }
+}
+
+.quiz-progress {
+  margin-bottom: 1rem;
+}
+
+.quiz-card {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  border: 1px;
+  border-radius: var(--cds-alias-object-border-radius-100);
+}
+
+.quiz-footer {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+
+  &-label {
+    font-size: var(--cds-alias-typography-caption-font-size);
+    opacity: 0.8;
+  }
+}
diff --git a/src/app/quiz/quiz.component.ts b/src/app/quiz/quiz.component.ts
index 25694b03..a9cdbb0d 100644
--- a/src/app/quiz/quiz.component.ts
+++ b/src/app/quiz/quiz.component.ts
@@ -75,12 +75,15 @@ export class QuizComponent implements OnInit {
   validationType: Validation = 'standard';
   isSubmitted = false;
   isPersistent = false;
-  alreadyPassed = false;
+  alreadyPassed: boolean | null = null;
   started = false;
   loadingQuestions = true;
   loadingQuiz = true;
   currentQuiz?: Quiz;
   quizIssuer = '';
+  currentIndex = 0;
+  lastPass: boolean | null = null;
+  showIncompleteModal = false;
 
   correctsByQuestionId: Record<string, string[]> = {};
 
@@ -97,6 +100,7 @@ export class QuizComponent implements OnInit {
       this.qs.recordEvaluation(this.quizId, this.scenarioId, answers).pipe(
         map((res) => {
           this.alreadyPassed = res.attempt.pass;
+
           this.timeStamp = res.attempt.timestamp;
           return {
             pass: res.attempt.pass,
@@ -148,6 +152,8 @@ export class QuizComponent implements OnInit {
     if (this.shuffle) shuffleStringArray(pool);
     const selected = pool.slice(0, this.questionCount);
     this.questions = selected.map((raw) => this.fromRaw(raw));
+
+    this.currentIndex = 0;
   }
 
   private fromRaw(raw: string): Question {
@@ -207,17 +213,19 @@ export class QuizComponent implements OnInit {
       this.qs.getEvaluationForUser(this.quizId, this.scenarioId).subscribe({
         next: (ev: PreparedQuizEvaluation) => {
           const last = ev.attempts?.[ev.attempts.length - 1];
-          this.alreadyPassed = !!last?.pass;
+          this.alreadyPassed = last ? last.pass : null;
           this.timeStamp = last.timestamp;
           const used = ev.attempts?.length ?? 0;
           this.allowedAtts = Math.max(0, (quiz.max_attempts ?? 1) - used);
           this.currentQuiz = quiz;
           this.loadingQuiz = false;
+          this.currentIndex = 0;
         },
         error: () => {
           this.allowedAtts = quiz.max_attempts ?? 1;
           this.currentQuiz = quiz;
           this.loadingQuiz = false;
+          this.currentIndex = 0;
         },
       });
     });
@@ -260,6 +268,7 @@ export class QuizComponent implements OnInit {
         this.isSubmitted = false;
         this.loadingQuestions = false;
         this.started = true;
+        this.currentIndex = 0;
       });
   }
 
@@ -274,21 +283,37 @@ export class QuizComponent implements OnInit {
       return;
     }
 
+    this.alreadyPassed = null;
+
     // Build answers from children (answer IDs only)
     const answers: Record<string, string[]> = {};
     let r = 0,
-      c = 0;
+      c = 0,
+      hasIncomplete = false;
     this.questions.forEach((q) => {
       if (!q.id) return;
       if (q.type === 'radio') {
         const comp = this.rad.get(r++);
-        answers[q.id] = comp?.getSelectedAnswerIds() ?? [];
+        const sel = comp?.getSelectedAnswerIds() ?? [];
+        answers[q.id] = sel;
+        if (sel.length === 0) {
+          hasIncomplete = true;
+        }
       } else {
         const comp = this.chk.get(c++);
-        answers[q.id] = comp?.getSelectedAnswerIds() ?? [];
+        const sel = comp?.getSelectedAnswerIds() ?? [];
+        answers[q.id] = sel;
+        if (sel.length === 0) {
+          hasIncomplete = true;
+        }
       }
     });
 
+    if (hasIncomplete) {
+      this.showIncompleteModal = true;
+      return;
+    }
+
     this.attempt.next(answers);
     this.isSubmitted = true;
     this.allowedAtts = Math.max(0, this.allowedAtts - 1);
@@ -300,6 +325,7 @@ export class QuizComponent implements OnInit {
       this.rad?.forEach((c) => c.reset());
       this.chk?.forEach((c) => c.reset());
       this.isSubmitted = false;
+      this.currentIndex = 0;
       return;
     }
     if (this.allowedAtts < 1) return;
@@ -307,6 +333,8 @@ export class QuizComponent implements OnInit {
     this.rad?.forEach((c) => c.reset());
     this.chk?.forEach((c) => c.reset());
     this.isSubmitted = false;
+    this.currentIndex = 0;
+    this.alreadyPassed = null;
     this.qs.getUserQuiz(this.quizId).subscribe((quiz) => this.start(quiz));
   }
 
@@ -329,4 +357,27 @@ export class QuizComponent implements OnInit {
       issuer: `${this.quizIssuer}`,
     });
   }
+
+  get totalQuestions(): number {
+    return this.questions.length;
+  }
+
+  get progress(): number {
+    if (!this.totalQuestions) {
+      return 0;
+    }
+    return ((this.currentIndex + 1) / this.totalQuestions) * 100;
+  }
+
+  nextQuestion(): void {
+    if (this.currentIndex < this.questions.length - 1) {
+      this.currentIndex++;
+    }
+  }
+
+  prevQuestion(): void {
+    if (this.currentIndex > 0) {
+      this.currentIndex--;
+    }
+  }
 }