diff --git a/backend/routes/quiz.routes.js b/backend/routes/quiz.routes.js
index 80d8eb0..fbce1dc 100644
--- a/backend/routes/quiz.routes.js
+++ b/backend/routes/quiz.routes.js
@@ -30,6 +30,8 @@ const authenticateUserOrGuest = async (req, res, next) => {
 
   // Try to verify guest token
   const guestToken = req.headers['x-guest-token'];
+  console.log(guestToken);
+
   if (guestToken) {
     try {
       await new Promise((resolve, reject) => {
diff --git a/frontend/src/app/app.ts b/frontend/src/app/app.ts
index f47c83d..f319656 100644
--- a/frontend/src/app/app.ts
+++ b/frontend/src/app/app.ts
@@ -35,26 +35,26 @@ export class App implements OnInit {
   private toastService = inject(ToastService);
   private router = inject(Router);
   protected title = 'Interview Quiz Application';
-  
+
   // Signal for mobile sidebar state
   isSidebarOpen = signal<boolean>(false);
-  
+
   // Signal for app initialization state
   isInitializing = signal<boolean>(true);
-  
+
   // Signal for navigation loading state
   isNavigating = signal<boolean>(false);
-  
+
   // Computed signal to check if user is guest
   isGuest = computed(() => {
     return this.guestService.guestState().isGuest && !this.authService.authState().isAuthenticated;
   });
-  
+
   ngOnInit(): void {
     this.initializeApp();
     this.setupNavigationListener();
   }
-  
+
   /**
    * Setup navigation event listener for progress bar
    */
@@ -71,24 +71,24 @@ export class App implements OnInit {
       }
     });
   }
-  
+
   /**
    * Initialize application and verify token
    */
   private initializeApp(): void {
     const token = this.authService.authState().isAuthenticated;
-    
+
     // If no token, skip verification
     if (!token) {
       this.isInitializing.set(false);
       return;
     }
-    
+
     // Verify token on app load
     this.authService.verifyToken().subscribe({
       next: (response) => {
         this.isInitializing.set(false);
-        if (!response.valid) {
+        if (!response.success) {
           this.toastService.warning('Session expired. Please login again.');
           this.router.navigate(['/login']);
         }
@@ -100,14 +100,14 @@ export class App implements OnInit {
       }
     });
   }
-  
+
   /**
    * Toggle mobile sidebar
    */
   toggleSidebar(): void {
     this.isSidebarOpen.update(value => !value);
   }
-  
+
   /**
    * Close sidebar (for mobile)
    */
diff --git a/frontend/src/app/core/models/category.model.ts b/frontend/src/app/core/models/category.model.ts
index e7cfd0f..5ff4935 100644
--- a/frontend/src/app/core/models/category.model.ts
+++ b/frontend/src/app/core/models/category.model.ts
@@ -61,7 +61,7 @@ export interface QuestionPreview {
 /**
  * Question Types
  */
-export type QuestionType = 'multiple_choice' | 'true_false' | 'written';
+export type QuestionType = 'multiple' | 'trueFalse' | 'written';
 
 /**
  * Difficulty Levels
diff --git a/frontend/src/app/core/models/dashboard.model.ts b/frontend/src/app/core/models/dashboard.model.ts
index 2e2f55c..fc0ce66 100644
--- a/frontend/src/app/core/models/dashboard.model.ts
+++ b/frontend/src/app/core/models/dashboard.model.ts
@@ -1,5 +1,5 @@
 import { User } from './user.model';
-import { QuizSession } from './quiz.model';
+import { QuizSession, QuizSessionHistory } from './quiz.model';
 
 /**
  * User Dashboard Response
@@ -33,8 +33,20 @@ export interface CategoryPerformance {
  */
 export interface QuizHistoryResponse {
   success: boolean;
-  sessions: QuizSession[];
-  pagination: PaginationInfo;
+  data: {
+    sessions: QuizSessionHistory[];
+    pagination: PaginationInfo;
+    filters: {
+      "category": null,
+      "status": null,
+      "startDate": null,
+      "endDate": null
+    }
+    "sorting": {
+      "sortBy": string
+      "sortOrder": string
+    }
+  };
 }
 
 /**
diff --git a/frontend/src/app/core/models/question.model.ts b/frontend/src/app/core/models/question.model.ts
index 33e1ea1..9baeac2 100644
--- a/frontend/src/app/core/models/question.model.ts
+++ b/frontend/src/app/core/models/question.model.ts
@@ -19,7 +19,7 @@ export interface Question {
     color?: string;
     guestAccessible?: boolean;
   };
-  options?: string[]; // For multiple choice
+  options?: string[] | { id: string; text: string }[]; // For multiple choice
   correctAnswer: string | string[];
   explanation: string;
   points: number;
diff --git a/frontend/src/app/core/models/quiz.model.ts b/frontend/src/app/core/models/quiz.model.ts
index df166b3..be1aa03 100644
--- a/frontend/src/app/core/models/quiz.model.ts
+++ b/frontend/src/app/core/models/quiz.model.ts
@@ -1,5 +1,42 @@
+import { Category } from './category.model';
 import { Question } from './question.model';
 
+export interface QuizSessionHistory {
+
+  "time": {
+    "spent": number,
+    "limit": number | null,
+    "percentage": number
+  },
+  "createdAt": "2025-12-19T18:49:58.000Z"
+  id: string;
+
+  category?: {
+    id: string;
+    name: string;
+    slug: string;
+    icon: string;
+    color: string;
+  };
+  quizType: QuizType;
+  difficulty: string;
+  questions: {
+    answered: number,
+    total: number,
+    correct: number,
+    accuracy: number
+  };
+  score: {
+    earned: number
+    total: number
+    percentage: number
+  };
+
+  status: QuizStatus;
+  startedAt: string;
+  completedAt?: string;
+  isPassed?: boolean;
+}
 /**
  * Quiz Session Interface
  * Represents an active or completed quiz session
@@ -40,6 +77,16 @@ export type QuizStatus = 'in_progress' | 'completed' | 'abandoned';
  * Quiz Start Request
  */
 export interface QuizStartRequest {
+  success: true;
+  data: {
+    categoryId: string;
+    questionCount: number;
+    difficulty?: string; // 'easy', 'medium', 'hard', 'mixed'
+    quizType?: QuizType;
+  };
+}
+export interface QuizStartFormRequest {
+
   categoryId: string;
   questionCount: number;
   difficulty?: string; // 'easy', 'medium', 'hard', 'mixed'
@@ -51,10 +98,12 @@ export interface QuizStartRequest {
  */
 export interface QuizStartResponse {
   success: boolean;
-  sessionId: string;
-  questions: Question[];
-  totalQuestions: number;
-  message?: string;
+  data: {
+    sessionId: string;
+    questions: Question[];
+    totalQuestions: number;
+    message?: string;
+  };
 }
 
 /**
diff --git a/frontend/src/app/core/services/auth.service.ts b/frontend/src/app/core/services/auth.service.ts
index c858b38..4e025b4 100644
--- a/frontend/src/app/core/services/auth.service.ts
+++ b/frontend/src/app/core/services/auth.service.ts
@@ -5,12 +5,12 @@ import { Observable, throwError, tap, catchError } from 'rxjs';
 import { environment } from '../../../environments/environment.development';
 import { StorageService } from './storage.service';
 import { ToastService } from './toast.service';
-import { 
-  User, 
-  UserRegistration, 
-  UserLogin, 
+import {
+  User,
+  UserRegistration,
+  UserLogin,
   AuthResponse,
-  AuthState 
+  AuthState
 } from '../models/user.model';
 
 @Injectable({
@@ -21,9 +21,9 @@ export class AuthService {
   private storageService = inject(StorageService);
   private toastService = inject(ToastService);
   private router = inject(Router);
-  
+
   private readonly API_URL = `${environment.apiUrl}/auth`;
-  
+
   // Auth state signal
   private authStateSignal = signal<AuthState>({
     user: this.storageService.getUserData(),
@@ -31,10 +31,10 @@ export class AuthService {
     isLoading: false,
     error: null
   });
-  
+
   // Public readonly auth state
   public readonly authState = this.authStateSignal.asReadonly();
-  
+
   /**
    * Register a new user account
    * Handles guest-to-user conversion if guestSessionId provided
@@ -46,34 +46,34 @@ export class AuthService {
     guestSessionId?: string
   ): Observable<AuthResponse> {
     this.setLoading(true);
-    
+
     const registrationData: UserRegistration = {
       username,
       email,
       password,
       guestSessionId
     };
-    
+
     return this.http.post<AuthResponse>(`${this.API_URL}/register`, registrationData).pipe(
       tap((response) => {
         // Store token and user data
         this.storageService.setToken(response.data.token, true); // Remember me by default
         this.storageService.setUserData(response.data.user);
-        
+
         // Clear guest token if converting
         if (guestSessionId) {
           this.storageService.clearGuestToken();
         }
-        
+
         // Update auth state
         this.updateAuthState(response.data.user, null);
-        
+
         // Show success message
         const message = response.migratedStats
           ? `Welcome ${response.data.user.username}! Your guest progress has been saved.`
           : `Welcome ${response.data.user.username}! Your account has been created.`;
         this.toastService.success(message);
-        
+
         // Auto-login: redirect to categories
         this.router.navigate(['/categories']);
       }),
@@ -83,32 +83,32 @@ export class AuthService {
       })
     );
   }
-  
+
   /**
    * Login user
    */
   login(email: string, password: string, rememberMe: boolean = false, redirectUrl: string = '/categories'): Observable<AuthResponse> {
     this.setLoading(true);
-    
+
     const loginData: UserLogin = { email, password };
-    
+
     return this.http.post<AuthResponse>(`${this.API_URL}/login`, loginData).pipe(
       tap((response) => {
         // Store token and user data
         console.log(response.data.user);
-        
+
         this.storageService.setToken(response.data.token, rememberMe);
         this.storageService.setUserData(response.data.user);
-        
+
         // Clear guest token
         this.storageService.clearGuestToken();
-        
+
         // Update auth state
         this.updateAuthState(response.data.user, null);
-        
+
         // Show success message
         this.toastService.success(`Welcome back, ${response.data.user.username}!`);
-        
+
         // Redirect to requested URL
         this.router.navigate([redirectUrl]);
       }),
@@ -118,18 +118,18 @@ export class AuthService {
       })
     );
   }
-  
+
   /**
    * Logout user
    */
   logout(): Observable<void> {
     this.setLoading(true);
-    
+
     return this.http.post<void>(`${this.API_URL}/logout`, {}).pipe(
       tap(() => {
         // Clear all auth data
         this.storageService.clearAll();
-        
+
         // Reset auth state
         this.authStateSignal.set({
           user: null,
@@ -137,10 +137,10 @@ export class AuthService {
           isLoading: false,
           error: null
         });
-        
+
         // Show success message
         this.toastService.success('You have been logged out successfully.');
-        
+
         // Redirect to login
         this.router.navigate(['/login']);
       }),
@@ -158,13 +158,13 @@ export class AuthService {
       })
     );
   }
-  
+
   /**
    * Verify JWT token validity
    */
-  verifyToken(): Observable<{ valid: boolean; user?: User }> {
+  verifyToken(): Observable<{ success: boolean; data: { user?: User }, message: string }> {
     const token = this.storageService.getToken();
-    
+
     if (!token) {
       this.authStateSignal.update(state => ({
         ...state,
@@ -173,15 +173,15 @@ export class AuthService {
       }));
       return throwError(() => new Error('No token found'));
     }
-    
+
     this.setLoading(true);
-    
-    return this.http.get<{ valid: boolean; user?: User }>(`${this.API_URL}/verify`).pipe(
+
+    return this.http.get<{ success: boolean; data: { user?: User }, message: string }>(`${this.API_URL}/verify`).pipe(
       tap((response) => {
-        if (response.valid && response.user) {
+        if (response.success && response.data.user) {
           // Update user data
-          this.storageService.setUserData(response.user);
-          this.updateAuthState(response.user, null);
+          this.storageService.setUserData(response.data.user);
+          this.updateAuthState(response.data.user, null);
         } else {
           // Token invalid, clear auth
           this.clearAuth();
@@ -194,7 +194,7 @@ export class AuthService {
       })
     );
   }
-  
+
   /**
    * Clear authentication data
    */
@@ -208,7 +208,7 @@ export class AuthService {
       error: null
     });
   }
-  
+
   /**
    * Update auth state signal
    */
@@ -220,20 +220,20 @@ export class AuthService {
       error
     });
   }
-  
+
   /**
    * Set loading state
    */
   private setLoading(isLoading: boolean): void {
     this.authStateSignal.update(state => ({ ...state, isLoading }));
   }
-  
+
   /**
    * Handle authentication errors
    */
   private handleAuthError(error: HttpErrorResponse): void {
     let errorMessage = 'An error occurred. Please try again.';
-    
+
     if (error.status === 400) {
       errorMessage = 'Invalid input. Please check your information.';
     } else if (error.status === 401) {
@@ -245,25 +245,25 @@ export class AuthService {
     } else if (error.status === 0) {
       errorMessage = 'Unable to connect to server. Please check your internet connection.';
     }
-    
+
     this.updateAuthState(null, errorMessage);
     this.toastService.error(errorMessage);
   }
-  
+
   /**
    * Get current user
    */
   getCurrentUser(): User | null {
     return this.authStateSignal().user;
   }
-  
+
   /**
    * Check if user is authenticated
    */
   isAuthenticated(): boolean {
     return this.authStateSignal().isAuthenticated;
   }
-  
+
   /**
    * Check if user is admin
    */
diff --git a/frontend/src/app/core/services/guest.service.ts b/frontend/src/app/core/services/guest.service.ts
index 2b6d0a0..647b8e0 100644
--- a/frontend/src/app/core/services/guest.service.ts
+++ b/frontend/src/app/core/services/guest.service.ts
@@ -15,13 +15,13 @@ export class GuestService {
   private storageService = inject(StorageService);
   private toastService = inject(ToastService);
   private router = inject(Router);
-  
+
   private readonly API_URL = `${environment.apiUrl}/guest`;
   private readonly GUEST_TOKEN_KEY = 'guest_token';
   private readonly GUEST_ID_KEY = 'guest_id';
   private readonly DEVICE_ID_KEY = 'device_id';
   private readonly SESSION_EXPIRY_HOURS = 24;
-  
+
   // Guest state signal
   private guestStateSignal = signal<GuestState>({
     session: null,
@@ -30,34 +30,34 @@ export class GuestService {
     error: null,
     quizLimit: null
   });
-  
+
   // Public readonly guest state
   public readonly guestState = this.guestStateSignal.asReadonly();
-  
+
   /**
    * Start a new guest session
    * Generates device ID and creates session on backend
    */
-  startSession(): Observable<GuestSession> {
+  startSession(): Observable<{ success: boolean, message: string, data: GuestSession }> {
     this.setLoading(true);
-    
+
     const deviceId = this.getOrCreateDeviceId();
-    
-    return this.http.post<GuestSession>(`${this.API_URL}/start-session`, { deviceId }).pipe(
-      tap((session: GuestSession) => {
+
+    return this.http.post<{ success: boolean, message: string, data: GuestSession }>(`${this.API_URL}/start-session`, { deviceId }).pipe(
+      tap((session: { success: boolean, message: string, data: GuestSession }) => {
         // Store guest session data
-        this.storageService.setItem(this.GUEST_TOKEN_KEY, session.sessionToken);
-        this.storageService.setItem(this.GUEST_ID_KEY, session.guestId);
-        
+        this.storageService.setItem(this.GUEST_ID_KEY, session.data.guestId);
+        this.storageService.setGuestToken(session.data.sessionToken);
+
         // Update guest state
         this.guestStateSignal.update(state => ({
           ...state,
-          session,
+          session: session.data,
           isGuest: true,
           isLoading: false,
           error: null
         }));
-        
+
         this.toastService.success('Welcome! You\'re browsing as a guest.');
       }),
       catchError((error: HttpErrorResponse) => {
@@ -67,13 +67,13 @@ export class GuestService {
       })
     );
   }
-  
+
   /**
    * Get guest session details
    */
   getSession(guestId: string): Observable<GuestSession> {
     this.setLoading(true);
-    
+
     return this.http.get<GuestSession>(`${this.API_URL}/session/${guestId}`).pipe(
       tap((session: GuestSession) => {
         this.guestStateSignal.update(state => ({
@@ -95,13 +95,13 @@ export class GuestService {
       })
     );
   }
-  
+
   /**
    * Get remaining quiz attempts for guest
    */
   getQuizLimit(): Observable<GuestLimit> {
     this.setLoading(true);
-    
+
     return this.http.get<GuestLimit>(`${this.API_URL}/quiz-limit`).pipe(
       tap((limit: GuestLimit) => {
         this.guestStateSignal.update(state => ({
@@ -117,14 +117,14 @@ export class GuestService {
       })
     );
   }
-  
+
   /**
    * Convert guest session to registered user
    * Called during registration process
    */
   convertToUser(guestSessionId: string, userData: any): Observable<any> {
     this.setLoading(true);
-    
+
     return this.http.post(`${this.API_URL}/convert`, {
       guestSessionId,
       ...userData
@@ -140,23 +140,23 @@ export class GuestService {
       })
     );
   }
-  
+
   /**
    * Generate or retrieve device ID
    * Used for fingerprinting guest sessions
    */
   private getOrCreateDeviceId(): string {
     let deviceId = this.storageService.getItem(this.DEVICE_ID_KEY);
-    
+
     if (!deviceId) {
       // Generate UUID v4
       deviceId = this.generateUUID();
       this.storageService.setItem(this.DEVICE_ID_KEY, deviceId);
     }
-    
+
     return deviceId;
   }
-  
+
   /**
    * Generate UUID v4
    */
@@ -167,7 +167,7 @@ export class GuestService {
       return v.toString(16);
     });
   }
-  
+
   /**
    * Check if user has an active guest session
    */
@@ -176,42 +176,42 @@ export class GuestService {
     const guestId = this.storageService.getItem(this.GUEST_ID_KEY);
     return !!(token && guestId);
   }
-  
+
   /**
    * Get stored guest token
    */
   getGuestToken(): string | null {
     return this.storageService.getItem(this.GUEST_TOKEN_KEY);
   }
-  
+
   /**
    * Get stored guest ID
    */
   getGuestId(): string | null {
     return this.storageService.getItem(this.GUEST_ID_KEY);
   }
-  
+
   /**
    * Check if session is expired (24 hours)
    */
   isSessionExpired(): boolean {
     const session = this.guestState().session;
     if (!session) return true;
-    
+
     const createdAt = new Date(session.createdAt);
     const now = new Date();
     const hoursDiff = (now.getTime() - createdAt.getTime()) / (1000 * 60 * 60);
-    
+
     return hoursDiff >= this.SESSION_EXPIRY_HOURS;
   }
-  
+
   /**
    * Clear guest session data
    */
   clearGuestSession(): void {
     this.storageService.removeItem(this.GUEST_TOKEN_KEY);
     this.storageService.removeItem(this.GUEST_ID_KEY);
-    
+
     this.guestStateSignal.update(state => ({
       ...state,
       session: null,
@@ -221,14 +221,14 @@ export class GuestService {
       quizLimit: null
     }));
   }
-  
+
   /**
    * Set loading state
    */
   private setLoading(isLoading: boolean): void {
     this.guestStateSignal.update(state => ({ ...state, isLoading }));
   }
-  
+
   /**
    * Set error state
    */
@@ -239,7 +239,7 @@ export class GuestService {
       error
     }));
   }
-  
+
   /**
    * Check if guest has reached quiz limit
    */
@@ -248,24 +248,24 @@ export class GuestService {
     if (!limit) return false;
     return limit.quizzesRemaining <= 0;
   }
-  
+
   /**
    * Get time remaining until session expires
    */
   getTimeRemaining(): string {
     const session = this.guestState().session;
     if (!session) return '0h 0m';
-    
+
     const createdAt = new Date(session.createdAt);
     const expiryTime = new Date(createdAt.getTime() + (this.SESSION_EXPIRY_HOURS * 60 * 60 * 1000));
     const now = new Date();
     const diff = expiryTime.getTime() - now.getTime();
-    
+
     if (diff <= 0) return '0h 0m';
-    
+
     const hours = Math.floor(diff / (1000 * 60 * 60));
     const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
-    
+
     return `${hours}h ${minutes}m`;
   }
 }
diff --git a/frontend/src/app/core/services/quiz.service.ts b/frontend/src/app/core/services/quiz.service.ts
index 7037b19..33391b5 100644
--- a/frontend/src/app/core/services/quiz.service.ts
+++ b/frontend/src/app/core/services/quiz.service.ts
@@ -3,13 +3,14 @@ import { HttpClient } from '@angular/common/http';
 import { Router } from '@angular/router';
 import { Observable, tap, catchError, throwError, map } from 'rxjs';
 import { environment } from '../../../environments/environment';
-import { 
-  QuizSession, 
-  QuizStartRequest, 
+import {
+  QuizSession,
+  QuizStartRequest,
   QuizStartResponse,
   QuizAnswerSubmission,
   QuizAnswerResponse,
-  QuizResults
+  QuizResults,
+  QuizStartFormRequest
 } from '../models/quiz.model';
 import { ToastService } from './toast.service';
 import { StorageService } from './storage.service';
@@ -62,7 +63,7 @@ export class QuizService {
   /**
    * Start a new quiz session
    */
-  startQuiz(request: QuizStartRequest): Observable<QuizStartResponse> {
+  startQuiz(request: QuizStartFormRequest): Observable<QuizStartResponse> {
     // Validate category accessibility
     if (!this.canAccessCategory(request.categoryId)) {
       this.toastService.error('You do not have access to this category');
@@ -87,13 +88,13 @@ export class QuizService {
         if (response.success) {
           // Store session data
           const session: QuizSession = {
-            id: response.sessionId,
+            id: response.data.sessionId,
             userId: this.storageService.getUserData()?.id,
             guestSessionId: this.guestService.guestState().session?.guestId,
             categoryId: request.categoryId,
             quizType: request.quizType || 'practice',
             difficulty: request.difficulty || 'mixed',
-            totalQuestions: response.totalQuestions,
+            totalQuestions: response.data.totalQuestions,
             currentQuestionIndex: 0,
             score: 0,
             correctAnswers: 0,
@@ -104,15 +105,15 @@ export class QuizService {
           };
 
           this._activeSession.set(session);
-          
+
           // Store questions from response
-          if (response.questions) {
-            this._questions.set(response.questions);
+          if (response.data.questions) {
+            this._questions.set(response.data.questions);
           }
-          
+
           // Store session ID for restoration
-          this.storeSessionId(response.sessionId);
-          
+          this.storeSessionId(response.data.sessionId);
+
           this.toastService.success('Quiz started successfully!');
         }
       }),
@@ -139,11 +140,11 @@ export class QuizService {
             const updated: QuizSession = {
               ...currentSession,
               score: response.score,
-              correctAnswers: response.isCorrect 
-                ? currentSession.correctAnswers + 1 
+              correctAnswers: response.isCorrect
+                ? currentSession.correctAnswers + 1
                 : currentSession.correctAnswers,
-              incorrectAnswers: !response.isCorrect 
-                ? currentSession.incorrectAnswers + 1 
+              incorrectAnswers: !response.isCorrect
+                ? currentSession.incorrectAnswers + 1
                 : currentSession.incorrectAnswers,
               currentQuestionIndex: currentSession.currentQuestionIndex + 1
             };
@@ -169,7 +170,7 @@ export class QuizService {
       tap(results => {
         if (results.success) {
           this._quizResults.set(results);
-          
+
           // Update session status
           const currentSession = this._activeSession();
           if (currentSession) {
@@ -277,10 +278,10 @@ export class QuizService {
       tap(session => {
         // Store session ID in localStorage for future restoration
         localStorage.setItem('activeQuizSessionId', sessionId);
-        
+
         // Check if we have questions stored
         const hasQuestions = this._questions().length > 0;
-        
+
         if (!hasQuestions) {
           // Questions need to be fetched separately if not in memory
           // For now, we'll navigate to the quiz page which will handle loading
diff --git a/frontend/src/app/core/services/storage.service.ts b/frontend/src/app/core/services/storage.service.ts
index bf52fec..eefbd02 100644
--- a/frontend/src/app/core/services/storage.service.ts
+++ b/frontend/src/app/core/services/storage.service.ts
@@ -14,25 +14,21 @@ export class StorageService {
   private readonly THEME_KEY = 'app_theme';
   private readonly REMEMBER_ME_KEY = 'remember_me';
 
-  constructor() {}
+  constructor() { }
 
   /**
    * Get item from storage (checks localStorage first, then sessionStorage)
    */
-   getItem(key: string): string | null {
-    return localStorage.getItem(key) || sessionStorage.getItem(key);
+  getItem(key: string): string | null {
+    return localStorage.getItem(key);
   }
 
   /**
    * Set item in storage
    * Uses localStorage if rememberMe is true, otherwise sessionStorage
    */
-   setItem(key: string, value: string, persistent: boolean = true): void {
-    if (persistent) {
-      localStorage.setItem(key, value);
-    } else {
-      sessionStorage.setItem(key, value);
-    }
+  setItem(key: string, value: string, persistent: boolean = true): void {
+    localStorage.setItem(key, value);
   }
 
   // Auth Token Methods
@@ -55,7 +51,7 @@ export class StorageService {
   }
 
   setGuestToken(token: string): void {
-    this.setItem(this.GUEST_TOKEN_KEY, token, true);
+    this.setItem(this.GUEST_TOKEN_KEY, token);
   }
 
   clearGuestToken(): void {
@@ -118,6 +114,5 @@ export class StorageService {
   // Remove a specific item from storage
   removeItem(key: string): void {
     localStorage.removeItem(key);
-    sessionStorage.removeItem(key);
   }
 }
diff --git a/frontend/src/app/features/admin/admin-question-form/admin-question-form.component.html b/frontend/src/app/features/admin/admin-question-form/admin-question-form.component.html
index 82d2f42..684dc04 100644
--- a/frontend/src/app/features/admin/admin-question-form/admin-question-form.component.html
+++ b/frontend/src/app/features/admin/admin-question-form/admin-question-form.component.html
@@ -2,60 +2,56 @@
   <!-- Header -->
   <div class="form-header">
     @if (isEditMode()) {
-      <h1>
-        <mat-icon>edit</mat-icon>
-        Edit Question
-      </h1>
-      <p class="subtitle">Update the details below to modify the quiz question</p>
-      @if (questionId()) {
-        <p class="question-id">Question ID: {{ questionId() }}</p>
-      }
+    <h1>
+      <mat-icon>edit</mat-icon>
+      Edit Question
+    </h1>
+    <p class="subtitle">Update the details below to modify the quiz question</p>
+    @if (questionId()) {
+    <p class="question-id">Question ID: {{ questionId() }}</p>
+    }
     } @else {
-      <h1>
-        <mat-icon>add_circle</mat-icon>
-        Create New Question
-      </h1>
-      <p class="subtitle">Fill in the details below to create a new quiz question</p>
+    <h1>
+      <mat-icon>add_circle</mat-icon>
+      Create New Question
+    </h1>
+    <p class="subtitle">Fill in the details below to create a new quiz question</p>
     }
   </div>
 
   <div class="form-layout">
     <!-- Loading State -->
     @if (isLoadingQuestion()) {
-      <mat-card class="form-card loading-card">
-        <mat-card-content>
-          <div class="loading-container">
-            <mat-icon class="loading-icon">hourglass_empty</mat-icon>
-            <p>Loading question data...</p>
-          </div>
-        </mat-card-content>
-      </mat-card>
+    <mat-card class="form-card loading-card">
+      <mat-card-content>
+        <div class="loading-container">
+          <mat-icon class="loading-icon">hourglass_empty</mat-icon>
+          <p>Loading question data...</p>
+        </div>
+      </mat-card-content>
+    </mat-card>
     } @else {
-      <!-- Form Section -->
-      <mat-card class="form-card">
-        <mat-card-content>
-          <form [formGroup]="questionForm" (ngSubmit)="onSubmit()">
-            <!-- Form-level Error -->
+    <!-- Form Section -->
+    <mat-card class="form-card">
+      <mat-card-content>
+        <form [formGroup]="questionForm" (ngSubmit)="onSubmit()">
+          <!-- Form-level Error -->
           @if (getFormError()) {
-            <div class="form-error">
-              <mat-icon>error</mat-icon>
-              <span>{{ getFormError() }}</span>
-            </div>
+          <div class="form-error">
+            <mat-icon>error</mat-icon>
+            <span>{{ getFormError() }}</span>
+          </div>
           }
 
           <!-- Question Text -->
           <mat-form-field appearance="outline" class="full-width">
             <mat-label>Question Text</mat-label>
-            <textarea
-              matInput
-              formControlName="questionText"
-              placeholder="Enter your question here..."
-              rows="4"
+            <textarea matInput formControlName="questionText" placeholder="Enter your question here..." rows="4"
               required>
             </textarea>
             <mat-hint>Minimum 10 characters</mat-hint>
             @if (getErrorMessage('questionText')) {
-              <mat-error>{{ getErrorMessage('questionText') }}</mat-error>
+            <mat-error>{{ getErrorMessage('questionText') }}</mat-error>
             }
           </mat-form-field>
 
@@ -65,13 +61,13 @@
               <mat-label>Question Type</mat-label>
               <mat-select formControlName="questionType" required>
                 @for (type of questionTypes; track type.value) {
-                  <mat-option [value]="type.value">
-                    {{ type.label }}
-                  </mat-option>
+                <mat-option [value]="type.value">
+                  {{ type.label }}
+                </mat-option>
                 }
               </mat-select>
               @if (getErrorMessage('questionType')) {
-                <mat-error>{{ getErrorMessage('questionType') }}</mat-error>
+              <mat-error>{{ getErrorMessage('questionType') }}</mat-error>
               }
             </mat-form-field>
 
@@ -79,17 +75,17 @@
               <mat-label>Category</mat-label>
               <mat-select formControlName="categoryId" required>
                 @if (isLoadingCategories()) {
-                  <mat-option disabled>Loading categories...</mat-option>
+                <mat-option disabled>Loading categories...</mat-option>
                 } @else {
-                  @for (category of categories(); track category.id) {
-                    <mat-option [value]="category.id">
-                      {{ category.name }}
-                    </mat-option>
-                  }
+                @for (category of categories(); track category.id) {
+                <mat-option [value]="category.id">
+                  {{ category.name }}
+                </mat-option>
+                }
                 }
               </mat-select>
               @if (getErrorMessage('categoryId')) {
-                <mat-error>{{ getErrorMessage('categoryId') }}</mat-error>
+              <mat-error>{{ getErrorMessage('categoryId') }}</mat-error>
               }
             </mat-form-field>
           </div>
@@ -100,29 +96,22 @@
               <mat-label>Difficulty</mat-label>
               <mat-select formControlName="difficulty" required>
                 @for (level of difficultyLevels; track level.value) {
-                  <mat-option [value]="level.value">
-                    {{ level.label }}
-                  </mat-option>
+                <mat-option [value]="level.value">
+                  {{ level.label }}
+                </mat-option>
                 }
               </mat-select>
               @if (getErrorMessage('difficulty')) {
-                <mat-error>{{ getErrorMessage('difficulty') }}</mat-error>
+              <mat-error>{{ getErrorMessage('difficulty') }}</mat-error>
               }
             </mat-form-field>
 
             <mat-form-field appearance="outline" class="half-width">
               <mat-label>Points</mat-label>
-              <input
-                matInput
-                type="number"
-                formControlName="points"
-                min="1"
-                max="100"
-                placeholder="10"
-                required>
+              <input matInput type="number" formControlName="points" min="1" max="100" placeholder="10" required>
               <mat-hint>Between 1 and 100</mat-hint>
               @if (getErrorMessage('points')) {
-                <mat-error>{{ getErrorMessage('points') }}</mat-error>
+              <mat-error>{{ getErrorMessage('points') }}</mat-error>
               }
             </mat-form-field>
           </div>
@@ -131,109 +120,93 @@
 
           <!-- Multiple Choice Options -->
           @if (showOptions()) {
-            <div class="options-section">
-              <h3>
-                <mat-icon>list</mat-icon>
-                Answer Options
-              </h3>
+          <div class="options-section">
+            <h3>
+              <mat-icon>list</mat-icon>
+              Answer Options
+            </h3>
 
-              <div formArrayName="options" class="options-list">
-                @for (option of optionsArray.controls; track $index) {
-                  <div [formGroupName]="$index" class="option-row">
-                    <span class="option-label">Option {{ $index + 1 }}</span>
-                    <mat-form-field appearance="outline" class="option-input">
-                      <input
-                        matInput
-                        formControlName="text"
-                        [placeholder]="'Enter option ' + ($index + 1)"
-                        required>
-                    </mat-form-field>
-                    @if (optionsArray.length > 2) {
-                      <button
-                        mat-icon-button
-                        type="button"
-                        color="warn"
-                        (click)="removeOption($index)"
-                        matTooltip="Remove option">
-                        <mat-icon>delete</mat-icon>
-                      </button>
-                    }
-                  </div>
+            <div formArrayName="options" class="options-list">
+              @for (option of optionsArray.controls; track $index) {
+              <div [formGroupName]="$index" class="option-row">
+                <span class="option-label">Option {{ $index + 1 }}</span>
+                <mat-form-field appearance="outline" class="option-input">
+                  <input matInput formControlName="text" [placeholder]="'Enter option ' + ($index + 1)" required>
+                </mat-form-field>
+                @if (optionsArray.length > 2) {
+                <button mat-icon-button type="button" color="warn" (click)="removeOption($index)"
+                  matTooltip="Remove option">
+                  <mat-icon>delete</mat-icon>
+                </button>
                 }
               </div>
-
-              @if (optionsArray.length < 10) {
-                <button
-                  mat-stroked-button
-                  type="button"
-                  (click)="addOption()"
-                  class="add-option-btn">
-                  <mat-icon>add</mat-icon>
-                  Add Option
-                </button>
               }
             </div>
 
-            <mat-divider></mat-divider>
+            @if (optionsArray.length < 10) { <button mat-stroked-button type="button" (click)="addOption()"
+              class="add-option-btn">
+              <mat-icon>add</mat-icon>
+              Add Option
+              </button>
+              }
+          </div>
 
-            <!-- Correct Answer Selection -->
-            <div class="correct-answer-section">
-              <h3>
-                <mat-icon>check_circle</mat-icon>
-                Correct Answer
-              </h3>
-              <mat-form-field appearance="outline" class="full-width">
-                <mat-label>Select Correct Answer</mat-label>
-                <mat-select formControlName="correctAnswer" required>
-                  @for (optionText of getOptionTexts(); track $index) {
-                    <mat-option [value]="optionText">
-                      {{ optionText }}
-                    </mat-option>
-                  }
-                </mat-select>
-                @if (getErrorMessage('correctAnswer')) {
-                  <mat-error>{{ getErrorMessage('correctAnswer') }}</mat-error>
+          <mat-divider></mat-divider>
+
+          <!-- Correct Answer Selection -->
+          <div class="correct-answer-section">
+            <h3>
+              <mat-icon>check_circle</mat-icon>
+              Correct Answer
+            </h3>
+            <mat-form-field appearance="outline" class="full-width">
+              <mat-label>Select Correct Answer</mat-label>
+              <mat-select formControlName="correctAnswer" required>
+                @for (optionText of getOptionTexts(); track $index) {
+                <mat-option [value]="optionText">
+                  {{ optionText }}
+                </mat-option>
                 }
-              </mat-form-field>
-            </div>
+              </mat-select>
+              @if (getErrorMessage('correctAnswer')) {
+              <mat-error>{{ getErrorMessage('correctAnswer') }}</mat-error>
+              }
+            </mat-form-field>
+          </div>
           }
 
           <!-- True/False Options -->
           @if (showTrueFalse()) {
-            <div class="correct-answer-section">
-              <h3>
-                <mat-icon>check_circle</mat-icon>
-                Correct Answer
-              </h3>
-              <mat-radio-group formControlName="correctAnswer" class="radio-group">
-                <mat-radio-button value="true">True</mat-radio-button>
-                <mat-radio-button value="false">False</mat-radio-button>
-              </mat-radio-group>
-            </div>
+          <div class="correct-answer-section">
+            <h3>
+              <mat-icon>check_circle</mat-icon>
+              Correct Answer
+            </h3>
+            <mat-radio-group formControlName="correctAnswer" class="radio-group">
+              <mat-radio-button value="true">True</mat-radio-button>
+              <mat-radio-button value="false">False</mat-radio-button>
+            </mat-radio-group>
+          </div>
           }
 
           <!-- Written Answer -->
           @if (selectedQuestionType() === 'written') {
-            <div class="correct-answer-section">
-              <h3>
-                <mat-icon>edit</mat-icon>
-                Sample Correct Answer
-              </h3>
-              <mat-form-field appearance="outline" class="full-width">
-                <mat-label>Expected Answer</mat-label>
-                <textarea
-                  matInput
-                  formControlName="correctAnswer"
-                  placeholder="Enter a sample correct answer..."
-                  rows="3"
-                  required>
+          <div class="correct-answer-section">
+            <h3>
+              <mat-icon>edit</mat-icon>
+              Sample Correct Answer
+            </h3>
+            <mat-form-field appearance="outline" class="full-width">
+              <mat-label>Expected Answer</mat-label>
+              <textarea matInput formControlName="correctAnswer" placeholder="Enter a sample correct answer..." rows="3"
+                required>
                 </textarea>
-                <mat-hint>This is a reference answer for grading</mat-hint>
-                @if (getErrorMessage('correctAnswer')) {
-                  <mat-error>{{ getErrorMessage('correctAnswer') }}</mat-error>
-                }
-              </mat-form-field>
-            </div>
+              <mat-hint>This is a reference answer for grading</mat-hint>
+              @if (getErrorMessage('correctAnswer')) {
+              <mat-error>{{ getErrorMessage('correctAnswer') }}</mat-error>
+              }
+            </mat-form-field>
+          </div>
           }
 
           <mat-divider></mat-divider>
@@ -241,16 +214,12 @@
           <!-- Explanation -->
           <mat-form-field appearance="outline" class="full-width">
             <mat-label>Explanation</mat-label>
-            <textarea
-              matInput
-              formControlName="explanation"
-              placeholder="Explain why this is the correct answer..."
-              rows="4"
-              required>
+            <textarea matInput formControlName="explanation" placeholder="Explain why this is the correct answer..."
+              rows="4" required>
             </textarea>
             <mat-hint>Minimum 10 characters</mat-hint>
             @if (getErrorMessage('explanation')) {
-              <mat-error>{{ getErrorMessage('explanation') }}</mat-error>
+            <mat-error>{{ getErrorMessage('explanation') }}</mat-error>
             }
           </mat-form-field>
 
@@ -264,19 +233,16 @@
               <mat-label>Add Tags</mat-label>
               <mat-chip-grid #chipGrid>
                 @for (tag of tagsArray; track tag) {
-                  <mat-chip-row (removed)="removeTag(tag)">
-                    {{ tag }}
-                    <button matChipRemove>
-                      <mat-icon>cancel</mat-icon>
-                    </button>
-                  </mat-chip-row>
+                <mat-chip-row (removed)="removeTag(tag)">
+                  {{ tag }}
+                  <button matChipRemove>
+                    <mat-icon>cancel</mat-icon>
+                  </button>
+                </mat-chip-row>
                 }
               </mat-chip-grid>
-              <input
-                placeholder="Type tag and press Enter..."
-                [matChipInputFor]="chipGrid"
-                [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-                (matChipInputTokenEnd)="addTag($event)">
+              <input placeholder="Type tag and press Enter..." [matChipInputFor]="chipGrid"
+                [matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="addTag($event)">
               <mat-hint>Press Enter or comma to add tags</mat-hint>
             </mat-form-field>
           </div>
@@ -293,29 +259,23 @@
 
           <!-- Action Buttons -->
           <div class="form-actions">
-            <button
-              mat-button
-              type="button"
-              (click)="onCancel()">
+            <button mat-button type="button" (click)="onCancel()">
               <mat-icon>close</mat-icon>
               Cancel
             </button>
 
-            <button
-              mat-raised-button
-              color="primary"
-              type="submit"
+            <button mat-raised-button color="primary" type="submit"
               [disabled]="!isFormValid() || isSubmitting() || isLoadingQuestion()">
               @if (isSubmitting()) {
-                <ng-container>
-                  <mat-icon>hourglass_empty</mat-icon>
-                  <span>{{ isEditMode() ? 'Updating...' : 'Creating...' }}</span>
-                </ng-container>
+              <ng-container>
+                <mat-icon>hourglass_empty</mat-icon>
+                <span>{{ isEditMode() ? 'Updating...' : 'Creating...' }}</span>
+              </ng-container>
               } @else {
-                <ng-container>
-                  <mat-icon>save</mat-icon>
-                  <span>{{ isEditMode() ? 'Update Question' : 'Save Question' }}</span>
-                </ng-container>
+              <ng-container>
+                <mat-icon>save</mat-icon>
+                <span>{{ isEditMode() ? 'Update Question' : 'Save Question' }}</span>
+              </ng-container>
               }
             </button>
           </div>
@@ -347,7 +307,8 @@
             <span class="preview-badge type-badge">
               {{ questionForm.get('questionType')?.value | titlecase }}
             </span>
-            <span class="preview-badge difficulty-badge" [class]="'difficulty-' + questionForm.get('difficulty')?.value">
+            <span class="preview-badge difficulty-badge"
+              [class]="'difficulty-' + questionForm.get('difficulty')?.value">
               {{ questionForm.get('difficulty')?.value | titlecase }}
             </span>
             <span class="preview-badge points-badge">
@@ -357,56 +318,59 @@
 
           <!-- Options Preview (MCQ) -->
           @if (showOptions() && getOptionTexts().length > 0) {
-            <div class="preview-section">
-              <div class="preview-label">Options:</div>
-              <div class="preview-options">
-                @for (optionText of getOptionTexts(); track $index) {
-                  <div class="preview-option" [class.correct]="questionForm.get('correctAnswer')?.value === optionText">
-                    <mat-icon>{{ questionForm.get('correctAnswer')?.value === optionText ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>
-                    <span>{{ optionText }}</span>
-                  </div>
-                }
+          <div class="preview-section">
+            <div class="preview-label">Options:</div>
+            <div class="preview-options">
+              @for (optionText of getOptionTexts(); track $index) {
+              <div class="preview-option" [class.correct]="questionForm.get('correctAnswer')?.value === optionText">
+                <mat-icon>{{ questionForm.get('correctAnswer')?.value === optionText ? 'check_circle' :
+                  'radio_button_unchecked' }}</mat-icon>
+                <span>{{ optionText }}</span>
               </div>
+              }
             </div>
+          </div>
           }
 
           <!-- True/False Preview -->
           @if (showTrueFalse()) {
-            <div class="preview-section">
-              <div class="preview-label">Options:</div>
-              <div class="preview-options">
-                <div class="preview-option" [class.correct]="questionForm.get('correctAnswer')?.value === 'true'">
-                  <mat-icon>{{ questionForm.get('correctAnswer')?.value === 'true' ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>
-                  <span>True</span>
-                </div>
-                <div class="preview-option" [class.correct]="questionForm.get('correctAnswer')?.value === 'false'">
-                  <mat-icon>{{ questionForm.get('correctAnswer')?.value === 'false' ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>
-                  <span>False</span>
-                </div>
+          <div class="preview-section">
+            <div class="preview-label">Options:</div>
+            <div class="preview-options">
+              <div class="preview-option" [class.correct]="questionForm.get('correctAnswer')?.value === 'true'">
+                <mat-icon>{{ questionForm.get('correctAnswer')?.value === 'true' ? 'check_circle' :
+                  'radio_button_unchecked' }}</mat-icon>
+                <span>True</span>
+              </div>
+              <div class="preview-option" [class.correct]="questionForm.get('correctAnswer')?.value === 'false'">
+                <mat-icon>{{ questionForm.get('correctAnswer')?.value === 'false' ? 'check_circle' :
+                  'radio_button_unchecked' }}</mat-icon>
+                <span>False</span>
               </div>
             </div>
+          </div>
           }
 
           <!-- Explanation Preview -->
           @if (questionForm.get('explanation')?.value) {
-            <div class="preview-section">
-              <div class="preview-label">Explanation:</div>
-              <div class="preview-explanation">
-                {{ questionForm.get('explanation')?.value }}
-              </div>
+          <div class="preview-section">
+            <div class="preview-label">Explanation:</div>
+            <div class="preview-explanation">
+              {{ questionForm.get('explanation')?.value }}
             </div>
+          </div>
           }
 
           <!-- Tags Preview -->
           @if (tagsArray.length > 0) {
-            <div class="preview-section">
-              <div class="preview-label">Tags:</div>
-              <div class="preview-tags">
-                @for (tag of tagsArray; track tag) {
-                  <span class="preview-tag">{{ tag }}</span>
-                }
-              </div>
+          <div class="preview-section">
+            <div class="preview-label">Tags:</div>
+            <div class="preview-tags">
+              @for (tag of tagsArray; track tag) {
+              <span class="preview-tag">{{ tag }}</span>
+              }
             </div>
+          </div>
           }
 
           <!-- Accessibility Preview -->
@@ -414,12 +378,12 @@
             <div class="preview-label">Access:</div>
             <div class="preview-access">
               @if (questionForm.get('isPublic')?.value) {
-                <span class="access-badge public">Public</span>
+              <span class="access-badge public">Public</span>
               } @else {
-                <span class="access-badge private">Private</span>
+              <span class="access-badge private">Private</span>
               }
               @if (questionForm.get('isGuestAccessible')?.value) {
-                <span class="access-badge guest">Guest Accessible</span>
+              <span class="access-badge guest">Guest Accessible</span>
               }
             </div>
           </div>
@@ -427,4 +391,4 @@
       </mat-card-content>
     </mat-card>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/features/admin/admin-question-form/admin-question-form.component.ts b/frontend/src/app/features/admin/admin-question-form/admin-question-form.component.ts
index ff3abdf..5b54566 100644
--- a/frontend/src/app/features/admin/admin-question-form/admin-question-form.component.ts
+++ b/frontend/src/app/features/admin/admin-question-form/admin-question-form.component.ts
@@ -102,12 +102,12 @@ export class AdminQuestionFormComponent implements OnInit {
 
   readonly showOptions = computed(() => {
     const type = this.selectedQuestionType();
-    return type === 'multiple_choice';
+    return type === 'multiple';
   });
 
   readonly showTrueFalse = computed(() => {
     const type = this.selectedQuestionType();
-    return type === 'true_false';
+    return type === 'trueFalse';
   });
 
   readonly isFormValid = computed(() => {
@@ -147,17 +147,17 @@ export class AdminQuestionFormComponent implements OnInit {
     this.isLoadingQuestion.set(true);
 
     this.adminService.getQuestion(id).subscribe({
-        next: (response) => {
-          this.isLoadingQuestion.set(false);
-          this.populateForm(response.data);
-        },
-        error: (error) => {
-          this.isLoadingQuestion.set(false);
-          console.error('Error loading question:', error);
-          // Redirect back if question not found
-          this.router.navigate(['/admin/questions']);
-        }
-      });
+      next: (response) => {
+        this.isLoadingQuestion.set(false);
+        this.populateForm(response.data);
+      },
+      error: (error) => {
+        this.isLoadingQuestion.set(false);
+        console.error('Error loading question:', error);
+        // Redirect back if question not found
+        this.router.navigate(['/admin/questions']);
+      }
+    });
   }
 
   /**
@@ -182,8 +182,8 @@ export class AdminQuestionFormComponent implements OnInit {
     });
 
     // Populate options for multiple choice
-    if (question.questionType === 'multiple_choice' && question.options) {
-      question.options.forEach((option: string) => {
+    if (question.questionType === 'multiple' && question.options) {
+      question.options.forEach((option: string | { text: string, id: string }) => {
         this.optionsArray.push(this.createOption(option));
       });
     }
@@ -222,7 +222,7 @@ export class AdminQuestionFormComponent implements OnInit {
   /**
    * Create option form control
    */
-  private createOption(value: string = ''): FormGroup {
+  private createOption(value: string | { text: string, id: string } = ''): FormGroup {
     return this.fb.group({
       text: [value, Validators.required]
     });
@@ -247,14 +247,14 @@ export class AdminQuestionFormComponent implements OnInit {
    */
   private onQuestionTypeChange(type: QuestionType): void {
     const correctAnswerControl = this.questionForm.get('correctAnswer');
-    
-    if (type === 'multiple_choice') {
+
+    if (type === 'multiple') {
       // Ensure at least 2 options
       while (this.optionsArray.length < 2) {
         this.addOption();
       }
       correctAnswerControl?.setValidators([Validators.required]);
-    } else if (type === 'true_false') {
+    } else if (type === 'trueFalse') {
       // Clear options for True/False
       this.optionsArray.clear();
       correctAnswerControl?.setValidators([Validators.required]);
@@ -287,7 +287,7 @@ export class AdminQuestionFormComponent implements OnInit {
   removeOption(index: number): void {
     if (this.optionsArray.length > 2) {
       this.optionsArray.removeAt(index);
-      
+
       // Clear correct answer if it matches the removed option
       const correctAnswer = this.questionForm.get('correctAnswer')?.value;
       const removedOption = this.optionsArray.at(index)?.get('text')?.value;
@@ -336,7 +336,7 @@ export class AdminQuestionFormComponent implements OnInit {
     if (questionType === 'multiple_choice' && correctAnswer && options) {
       const optionTexts = options.controls.map(opt => opt.get('text')?.value);
       const isValid = optionTexts.includes(correctAnswer);
-      
+
       if (!isValid) {
         return { correctAnswerMismatch: true };
       }
@@ -388,15 +388,15 @@ export class AdminQuestionFormComponent implements OnInit {
       : this.adminService.createQuestion(questionData);
 
     serviceCall.subscribe({
-        next: (response) => {
-          this.isSubmitting.set(false);
-          this.router.navigate(['/admin/questions']);
-        },
-        error: (error) => {
-          this.isSubmitting.set(false);
-          console.error(`Error ${this.isEditMode() ? 'updating' : 'creating'} question:`, error);
-        }
-      });
+      next: (response) => {
+        this.isSubmitting.set(false);
+        this.router.navigate(['/admin/questions']);
+      },
+      error: (error) => {
+        this.isSubmitting.set(false);
+        console.error(`Error ${this.isEditMode() ? 'updating' : 'creating'} question:`, error);
+      }
+    });
   }
 
   /**
@@ -425,7 +425,7 @@ export class AdminQuestionFormComponent implements OnInit {
    */
   getErrorMessage(fieldName: string): string {
     const control = this.questionForm.get(fieldName);
-    
+
     if (!control || !control.errors || !control.touched) {
       return '';
     }
diff --git a/frontend/src/app/features/auth/login/login.ts b/frontend/src/app/features/auth/login/login.ts
index 238ebe7..052d45b 100644
--- a/frontend/src/app/features/auth/login/login.ts
+++ b/frontend/src/app/features/auth/login/login.ts
@@ -13,6 +13,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import { AuthService } from '../../../core/services/auth.service';
 import { GuestService } from '../../../core/services/guest.service';
 import { Subject, takeUntil } from 'rxjs';
+import { StorageService } from '../../../core/services';
 
 @Component({
   selector: 'app-login',
@@ -36,19 +37,20 @@ export class LoginComponent implements OnDestroy {
   private fb = inject(FormBuilder);
   private authService = inject(AuthService);
   private guestService = inject(GuestService);
+  private storageService = inject(StorageService);
   private router = inject(Router);
   private route = inject(ActivatedRoute);
   private destroy$ = new Subject<void>();
-  
+
   // Signals
   isSubmitting = signal<boolean>(false);
   hidePassword = signal<boolean>(true);
   returnUrl = signal<string>('/categories');
   isStartingGuestSession = signal<boolean>(false);
-  
+
   // Form
   loginForm: FormGroup;
-  
+
   constructor() {
     // Initialize form
     this.loginForm = this.fb.group({
@@ -56,27 +58,27 @@ export class LoginComponent implements OnDestroy {
       password: ['', [Validators.required, Validators.minLength(8)]],
       rememberMe: [false]
     });
-    
+
     // Get return URL from query params
     this.route.queryParams
       .pipe(takeUntil(this.destroy$))
       .subscribe(params => {
         this.returnUrl.set(params['returnUrl'] || '/categories');
       });
-    
+
     // Redirect if already authenticated
     if (this.authService.isAuthenticated()) {
       this.router.navigate(['/categories']);
     }
   }
-  
+
   /**
    * Toggle password visibility
    */
   togglePasswordVisibility(): void {
     this.hidePassword.update(val => !val);
   }
-  
+
   /**
    * Submit login form
    */
@@ -85,11 +87,11 @@ export class LoginComponent implements OnDestroy {
       this.loginForm.markAllAsTouched();
       return;
     }
-    
+
     this.isSubmitting.set(true);
-    
+
     const { email, password, rememberMe } = this.loginForm.value;
-    
+
     this.authService.login(email, password, rememberMe, this.returnUrl())
       .pipe(takeUntil(this.destroy$))
       .subscribe({
@@ -102,33 +104,33 @@ export class LoginComponent implements OnDestroy {
         }
       });
   }
-  
+
   /**
    * Get form control error message
    */
   getErrorMessage(controlName: string): string {
     const control = this.loginForm.get(controlName);
-    
+
     if (!control || !control.touched) {
       return '';
     }
-    
+
     if (control.hasError('required')) {
       return `${this.getFieldLabel(controlName)} is required`;
     }
-    
+
     if (control.hasError('email')) {
       return 'Please enter a valid email address';
     }
-    
+
     if (control.hasError('minlength')) {
       const minLength = control.getError('minlength').requiredLength;
       return `Must be at least ${minLength} characters`;
     }
-    
+
     return '';
   }
-  
+
   /**
    * Get field label
    */
@@ -139,7 +141,7 @@ export class LoginComponent implements OnDestroy {
     };
     return labels[controlName] || controlName;
   }
-  
+
   /**
    * Start guest session
    */
@@ -148,7 +150,7 @@ export class LoginComponent implements OnDestroy {
     this.guestService.startSession()
       .pipe(takeUntil(this.destroy$))
       .subscribe({
-        next: () => {
+        next: (res: {}) => {
           this.isStartingGuestSession.set(false);
           this.router.navigate(['/guest-welcome']);
         },
diff --git a/frontend/src/app/features/history/quiz-history.component.html b/frontend/src/app/features/history/quiz-history.component.html
index 1dd9c91..5dd70e3 100644
--- a/frontend/src/app/features/history/quiz-history.component.html
+++ b/frontend/src/app/features/history/quiz-history.component.html
@@ -17,7 +17,7 @@
 
 <!-- History Content -->
 <div *ngIf="!isLoading() && !error()" class="history-container">
-  
+
   <!-- Header -->
   <div class="history-header">
     <div class="header-title">
@@ -32,7 +32,7 @@
       Export CSV
     </button>
   </div>
-  
+
   <!-- Filters and Sort -->
   <mat-card class="filters-card">
     <mat-card-content>
@@ -46,7 +46,7 @@
             </mat-option>
           </mat-select>
         </mat-form-field>
-        
+
         <mat-form-field appearance="outline" class="filter-field">
           <mat-label>Sort By</mat-label>
           <mat-select [value]="sortBy()" (selectionChange)="onSortChange($event.value)">
@@ -54,14 +54,14 @@
             <mat-option value="score">Score (Highest First)</mat-option>
           </mat-select>
         </mat-form-field>
-        
+
         <button mat-icon-button (click)="refresh()" matTooltip="Refresh">
           <mat-icon>refresh</mat-icon>
         </button>
       </div>
     </mat-card-content>
   </mat-card>
-  
+
   <!-- Empty State -->
   <div *ngIf="isEmpty()" class="empty-state">
     <mat-icon class="empty-icon">quiz</mat-icon>
@@ -72,11 +72,11 @@
       Start a Quiz
     </button>
   </div>
-  
+
   <!-- Desktop Table View -->
   <mat-card class="table-card desktop-only" *ngIf="!isEmpty()">
     <table mat-table [dataSource]="history()" class="history-table">
-      
+
       <!-- Date Column -->
       <ng-container matColumnDef="date">
         <th mat-header-cell *matHeaderCellDef>Date</th>
@@ -84,74 +84,66 @@
           {{ formatDate(session.completedAt || session.startedAt) }}
         </td>
       </ng-container>
-      
+
       <!-- Category Column -->
       <ng-container matColumnDef="category">
         <th mat-header-cell *matHeaderCellDef>Category</th>
         <td mat-cell *matCellDef="let session">
-          {{ session.categoryName || 'Unknown' }}
+          {{ session.category.name || 'Unknown' }}
         </td>
       </ng-container>
-      
+
       <!-- Score Column -->
       <ng-container matColumnDef="score">
         <th mat-header-cell *matHeaderCellDef>Score</th>
         <td mat-cell *matCellDef="let session">
           <span class="score-badge" [ngClass]="getScoreColor(session.score, session.totalQuestions)">
-            {{ session.score }}/{{ session.totalQuestions }}
-            <span class="percentage">({{ ((session.score / session.totalQuestions) * 100).toFixed(0) }}%)</span>
+            {{ session.score.earned }}/{{ session.questions.total }}
+            <span class="percentage">({{ ((session.score.earned / session.questions.total) * 100).toFixed(0) }}%)</span>
           </span>
         </td>
       </ng-container>
-      
+
       <!-- Time Column -->
       <ng-container matColumnDef="time">
         <th mat-header-cell *matHeaderCellDef>Time Spent</th>
         <td mat-cell *matCellDef="let session">
-          {{ formatDuration(session.timeSpent) }}
+          {{ formatDuration(session.time.spent) }}
         </td>
       </ng-container>
-      
+
       <!-- Status Column -->
       <ng-container matColumnDef="status">
         <th mat-header-cell *matHeaderCellDef>Status</th>
         <td mat-cell *matCellDef="let session">
           <mat-chip [ngClass]="getStatusClass(session.status)">
-            {{ session.status === 'in_progress' ? 'In Progress' : 
-               session.status === 'completed' ? 'Completed' : 
-               'Abandoned' }}
+            {{ session.status === 'in_progress' ? 'In Progress' :
+            session.status === 'completed' ? 'Completed' :
+            'Abandoned' }}
           </mat-chip>
         </td>
       </ng-container>
-      
+
       <!-- Actions Column -->
       <ng-container matColumnDef="actions">
         <th mat-header-cell *matHeaderCellDef>Actions</th>
         <td mat-cell *matCellDef="let session">
-          <button 
-            mat-icon-button 
-            (click)="viewResults(session.id)"
-            matTooltip="View Results"
-            *ngIf="session.status === 'completed'"
-          >
+          <button mat-icon-button (click)="viewResults(session.id)" matTooltip="View Results"
+            *ngIf="session.status === 'completed'">
             <mat-icon>visibility</mat-icon>
           </button>
-          <button 
-            mat-icon-button 
-            (click)="reviewQuiz(session.id)"
-            matTooltip="Review Quiz"
-            *ngIf="session.status === 'completed'"
-          >
+          <button mat-icon-button (click)="reviewQuiz(session.id)" matTooltip="Review Quiz"
+            *ngIf="session.status === 'completed'">
             <mat-icon>rate_review</mat-icon>
           </button>
         </td>
       </ng-container>
-      
+
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
   </mat-card>
-  
+
   <!-- Mobile Card View -->
   <div class="mobile-cards mobile-only" *ngIf="!isEmpty()">
     <mat-card *ngFor="let session of history()" class="history-card">
@@ -159,15 +151,15 @@
         <div class="card-header">
           <div class="card-title">
             <mat-icon>quiz</mat-icon>
-            <span>{{ session.categoryName || 'Unknown' }}</span>
+            <span>{{ session.category?.name || 'Unknown' }}</span>
           </div>
           <mat-chip [ngClass]="getStatusClass(session.status)">
-            {{ session.status === 'in_progress' ? 'In Progress' : 
-               session.status === 'completed' ? 'Completed' : 
-               'Abandoned' }}
+            {{ session.status === 'in_progress' ? 'In Progress' :
+            session.status === 'completed' ? 'Completed' :
+            'Abandoned' }}
           </mat-chip>
         </div>
-        
+
         <div class="card-details">
           <div class="detail-row">
             <mat-icon>calendar_today</mat-icon>
@@ -175,17 +167,17 @@
           </div>
           <div class="detail-row">
             <mat-icon>timer</mat-icon>
-            <span>{{ formatDuration(session.timeSpent) }}</span>
+            <span>{{ formatDuration(session.time.spent) }}</span>
           </div>
           <div class="detail-row score-row">
             <span class="score-label">Score:</span>
-            <span class="score-value" [ngClass]="getScoreColor(session.score, session.totalQuestions)">
-              {{ session.score }}/{{ session.totalQuestions }} 
-              ({{ ((session.score / session.totalQuestions) * 100).toFixed(0) }}%)
+            <span class="score-value" [ngClass]="getScoreColor(session.score.earned, session.questions.total)">
+              {{ session.score.earned }}/{{ session.questions.total }}
+              ({{ ((session.score.earned / session.questions.total) * 100).toFixed(0) }}%)
             </span>
           </div>
         </div>
-        
+
         <div class="card-actions" *ngIf="session.status === 'completed'">
           <button mat-button color="primary" (click)="viewResults(session.id)">
             <mat-icon>visibility</mat-icon>
@@ -199,16 +191,9 @@
       </mat-card-content>
     </mat-card>
   </div>
-  
+
   <!-- Pagination -->
-  <mat-paginator
-    *ngIf="!isEmpty()"
-    [length]="totalItems()"
-    [pageSize]="pageSize()"
-    [pageIndex]="currentPage() - 1"
-    [pageSizeOptions]="[5, 10, 20, 50]"
-    (page)="onPageChange($event)"
-    showFirstLastButtons
-  >
+  <mat-paginator *ngIf="!isEmpty()" [length]="totalItems()" [pageSize]="pageSize()" [pageIndex]="currentPage() - 1"
+    [pageSizeOptions]="[5, 10, 20, 50]" (page)="onPageChange($event)" showFirstLastButtons>
   </mat-paginator>
-</div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/features/history/quiz-history.component.ts b/frontend/src/app/features/history/quiz-history.component.ts
index d1e2420..068316e 100644
--- a/frontend/src/app/features/history/quiz-history.component.ts
+++ b/frontend/src/app/features/history/quiz-history.component.ts
@@ -15,7 +15,7 @@ import { UserService } from '../../core/services/user.service';
 import { AuthService } from '../../core/services/auth.service';
 import { CategoryService } from '../../core/services/category.service';
 import { QuizHistoryResponse, PaginationInfo } from '../../core/models/dashboard.model';
-import { QuizSession } from '../../core/models/quiz.model';
+import { QuizSession, QuizSessionHistory } from '../../core/models/quiz.model';
 import { Category } from '../../core/models/category.model';
 
 @Component({
@@ -44,32 +44,32 @@ export class QuizHistoryComponent implements OnInit {
   private categoryService = inject(CategoryService);
   private router = inject(Router);
   private route = inject(ActivatedRoute);
-  
+
   // Signals
   isLoading = signal<boolean>(true);
-  history = signal<QuizSession[]>([]);
+  history = signal<QuizSessionHistory[]>([]);
   pagination = signal<PaginationInfo | null>(null);
   categories = signal<Category[]>([]);
   error = signal<string | null>(null);
-  
+
   // Filter and sort state
   currentPage = signal<number>(1);
   pageSize = signal<number>(10);
   selectedCategory = signal<string | null>(null);
   sortBy = signal<'date' | 'score'>('date');
-  
+
   // Table columns
   displayedColumns: string[] = ['date', 'category', 'score', 'time', 'status', 'actions'];
-  
+
   // Computed values
   isEmpty = computed(() => this.history().length === 0 && !this.isLoading());
   totalItems = computed(() => this.pagination()?.totalItems || 0);
-  
+
   ngOnInit(): void {
     this.loadCategories();
     this.loadHistoryFromRoute();
   }
-  
+
   /**
    * Load categories for filter
    */
@@ -83,7 +83,7 @@ export class QuizHistoryComponent implements OnInit {
       }
     });
   }
-  
+
   /**
    * Load history based on route query params
    */
@@ -93,31 +93,31 @@ export class QuizHistoryComponent implements OnInit {
       const limit = params['limit'] ? parseInt(params['limit'], 10) : 10;
       const category = params['category'] || null;
       const sortBy = params['sortBy'] || 'date';
-      
+
       this.currentPage.set(page);
       this.pageSize.set(limit);
       this.selectedCategory.set(category);
       this.sortBy.set(sortBy);
-      
+
       this.loadHistory();
     });
   }
-  
+
   /**
    * Load quiz history
    */
   loadHistory(): void {
     const state: any = (this.authService as any).authState();
     const user = state?.user;
-    
+
     if (!user || !user.id) {
       this.router.navigate(['/login']);
       return;
     }
-    
+
     this.isLoading.set(true);
     this.error.set(null);
-    
+
     (this.userService as any).getHistory(
       user.id,
       this.currentPage(),
@@ -126,8 +126,8 @@ export class QuizHistoryComponent implements OnInit {
       this.sortBy()
     ).subscribe({
       next: (response: QuizHistoryResponse) => {
-        this.history.set(response.sessions || []);
-        this.pagination.set(response.pagination);
+        this.history.set(response.data.sessions || []);
+        this.pagination.set(response.data.pagination);
         this.isLoading.set(false);
       },
       error: (err: any) => {
@@ -137,7 +137,7 @@ export class QuizHistoryComponent implements OnInit {
       }
     });
   }
-  
+
   /**
    * Handle page change
    */
@@ -146,7 +146,7 @@ export class QuizHistoryComponent implements OnInit {
     this.pageSize.set(event.pageSize);
     this.updateUrlAndLoad();
   }
-  
+
   /**
    * Handle category filter change
    */
@@ -155,7 +155,7 @@ export class QuizHistoryComponent implements OnInit {
     this.currentPage.set(1); // Reset to first page
     this.updateUrlAndLoad();
   }
-  
+
   /**
    * Handle sort change
    */
@@ -164,7 +164,7 @@ export class QuizHistoryComponent implements OnInit {
     this.currentPage.set(1); // Reset to first page
     this.updateUrlAndLoad();
   }
-  
+
   /**
    * Update URL with query params and reload data
    */
@@ -174,18 +174,18 @@ export class QuizHistoryComponent implements OnInit {
       limit: this.pageSize(),
       sortBy: this.sortBy()
     };
-    
+
     if (this.selectedCategory()) {
       queryParams.category = this.selectedCategory();
     }
-    
+
     this.router.navigate([], {
       relativeTo: this.route,
       queryParams,
       queryParamsHandling: 'merge'
     });
   }
-  
+
   /**
    * View quiz results
    */
@@ -194,7 +194,7 @@ export class QuizHistoryComponent implements OnInit {
       this.router.navigate(['/quiz', sessionId, 'results']);
     }
   }
-  
+
   /**
    * Review quiz
    */
@@ -203,13 +203,13 @@ export class QuizHistoryComponent implements OnInit {
       this.router.navigate(['/quiz', sessionId, 'review']);
     }
   }
-  
+
   /**
    * Format date
    */
   formatDate(dateString: string | undefined): string {
     if (!dateString) return 'N/A';
-    
+
     const date = new Date(dateString);
     return date.toLocaleDateString('en-US', {
       year: 'numeric',
@@ -219,23 +219,23 @@ export class QuizHistoryComponent implements OnInit {
       minute: '2-digit'
     });
   }
-  
+
   /**
    * Format duration
    */
   formatDuration(seconds: number | undefined): string {
     if (!seconds) return '0s';
-    
+
     const minutes = Math.floor(seconds / 60);
     const secs = seconds % 60;
-    
+
     if (minutes === 0) {
       return `${secs}s`;
     }
-    
+
     return `${minutes}m ${secs}s`;
   }
-  
+
   /**
    * Get score color
    */
@@ -245,7 +245,7 @@ export class QuizHistoryComponent implements OnInit {
     if (percentage >= 60) return 'warning';
     return 'error';
   }
-  
+
   /**
    * Get status badge class
    */
@@ -261,7 +261,7 @@ export class QuizHistoryComponent implements OnInit {
         return '';
     }
   }
-  
+
   /**
    * Export to CSV
    */
@@ -269,32 +269,32 @@ export class QuizHistoryComponent implements OnInit {
     if (this.history().length === 0) {
       return;
     }
-    
+
     // Create CSV header
     const headers = ['Date', 'Category', 'Score', 'Total Questions', 'Percentage', 'Time Spent', 'Status'];
     const csvRows = [headers.join(',')];
-    
+
     // Add data rows
     this.history().forEach(session => {
-      const percentage = ((session.score / session.totalQuestions) * 100).toFixed(2);
+      const percentage = ((session.score.earned / session.questions.total) * 100).toFixed(2);
       const row = [
         this.formatDate(session.completedAt || session.startedAt),
-        session.categoryName || 'Unknown',
-        session.score.toString(),
-        session.totalQuestions.toString(),
+        session.category?.name || 'Unknown',
+        session.score.earned.toString(),
+        session.questions.total.toString(),
         `${percentage}%`,
-        this.formatDuration(session.timeSpent),
+        this.formatDuration(session.time.spent),
         session.status
       ];
       csvRows.push(row.join(','));
     });
-    
+
     // Create blob and download
     const csvContent = csvRows.join('\n');
     const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
     const link = document.createElement('a');
     const url = URL.createObjectURL(blob);
-    
+
     link.setAttribute('href', url);
     link.setAttribute('download', `quiz-history-${new Date().toISOString().split('T')[0]}.csv`);
     link.style.visibility = 'hidden';
@@ -302,7 +302,7 @@ export class QuizHistoryComponent implements OnInit {
     link.click();
     document.body.removeChild(link);
   }
-  
+
   /**
    * Refresh history
    */
diff --git a/frontend/src/app/features/quiz/quiz-question/quiz-question.html b/frontend/src/app/features/quiz/quiz-question/quiz-question.html
index 1d62d37..5932abf 100644
--- a/frontend/src/app/features/quiz/quiz-question/quiz-question.html
+++ b/frontend/src/app/features/quiz/quiz-question/quiz-question.html
@@ -6,187 +6,164 @@
         Question {{ currentQuestionIndex() + 1 }} of {{ totalQuestions() }}
       </span>
       @if (activeSession()?.quizType === 'timed') {
-        <div class="timer" [class.warning]="timeRemaining() < 60">
-          <mat-icon>timer</mat-icon>
-          <span>{{ formatTime(timeRemaining()) }}</span>
-        </div>
+      <div class="timer" [class.warning]="timeRemaining() < 60">
+        <mat-icon>timer</mat-icon>
+        <span>{{ formatTime(timeRemaining()) }}</span>
+      </div>
       }
       <div class="score-display">
         <mat-icon>stars</mat-icon>
         <span>Score: {{ currentScore() }}</span>
       </div>
     </div>
-    <mat-progress-bar 
-      mode="determinate" 
-      [value]="progress()"
-      class="progress-bar">
+    <mat-progress-bar mode="determinate" [value]="progress()" class="progress-bar">
     </mat-progress-bar>
   </div>
 
   <!-- Question Card -->
   <mat-card class="question-card">
     @if (currentQuestion(); as question) {
-      <!-- Question Header -->
-      <mat-card-header>
-        <div class="question-header">
-          <div class="question-meta">
-            <mat-chip class="type-chip">{{ questionTypeLabel() }}</mat-chip>
-            <mat-chip 
-              class="difficulty-chip"
-              [style.background-color]="getDifficultyColor(question.difficulty) + '20'"
-              [style.color]="getDifficultyColor(question.difficulty)">
-              {{ question.difficulty | titlecase }}
-            </mat-chip>
-            <span class="points">{{ question.points }} points</span>
-          </div>
+    <!-- Question Header -->
+    <mat-card-header>
+      <div class="question-header">
+        <div class="question-meta">
+          <mat-chip class="type-chip">{{ questionTypeLabel() }}</mat-chip>
+          <mat-chip class="difficulty-chip" [style.background-color]="getDifficultyColor(question.difficulty) + '20'"
+            [style.color]="getDifficultyColor(question.difficulty)">
+            {{ question.difficulty | titlecase }}
+          </mat-chip>
+          <span class="points">{{ question.points }} points</span>
         </div>
-      </mat-card-header>
+      </div>
+    </mat-card-header>
 
-      <mat-divider></mat-divider>
+    <mat-divider></mat-divider>
 
-      <mat-card-content>
-        <!-- Question Text -->
-        <div class="question-text">
-          <h2>{{ question.questionText }}</h2>
+    <mat-card-content>
+      <!-- Question Text -->
+      <div class="question-text">
+        <h2>{{ question.questionText }}</h2>
+      </div>
+
+      <!-- Answer Form -->
+      <form [formGroup]="answerForm" (ngSubmit)="submitAnswer()" class="answer-form">
+
+        <!-- Multiple Choice -->
+        @if (question.questionType === 'multiple' && question.options) {
+        <mat-radio-group formControlName="answer" class="radio-group">
+          @for (option of question.options; track option) {
+          <mat-radio-button [value]="typeof option === 'string' ? option : option.id" [disabled]="answerSubmitted()"
+            class="radio-option">
+            {{ typeof option === 'string' ? option : option.text }}
+          </mat-radio-button>
+          }
+        </mat-radio-group>
+        }
+
+        <!-- True/False -->
+        @if (isTrueFalse()) {
+        <div class="true-false-buttons">
+          <button type="button" mat-raised-button [class.selected]="answerForm.get('answer')?.value === 'true'"
+            [disabled]="answerSubmitted()" (click)="answerForm.patchValue({ answer: 'true' })"
+            class="tf-button true-button">
+            <mat-icon>check_circle</mat-icon>
+            <span>True</span>
+          </button>
+          <button type="button" mat-raised-button [class.selected]="answerForm.get('answer')?.value === 'false'"
+            [disabled]="answerSubmitted()" (click)="answerForm.patchValue({ answer: 'false' })"
+            class="tf-button false-button">
+            <mat-icon>cancel</mat-icon>
+            <span>False</span>
+          </button>
         </div>
+        }
 
-        <!-- Answer Form -->
-        <form [formGroup]="answerForm" (ngSubmit)="submitAnswer()" class="answer-form">
-          
-          <!-- Multiple Choice -->
-          @if (isMultipleChoice() && question.options) {
-            <mat-radio-group formControlName="answer" class="radio-group">
-              @for (option of question.options; track option) {
-                <mat-radio-button 
-                  [value]="option"
-                  [disabled]="answerSubmitted()"
-                  class="radio-option">
-                  {{ option }}
-                </mat-radio-button>
-              }
-            </mat-radio-group>
-          }
-
-          <!-- True/False -->
-          @if (isTrueFalse()) {
-            <div class="true-false-buttons">
-              <button
-                type="button"
-                mat-raised-button
-                [class.selected]="answerForm.get('answer')?.value === 'true'"
-                [disabled]="answerSubmitted()"
-                (click)="answerForm.patchValue({ answer: 'true' })"
-                class="tf-button true-button">
-                <mat-icon>check_circle</mat-icon>
-                <span>True</span>
-              </button>
-              <button
-                type="button"
-                mat-raised-button
-                [class.selected]="answerForm.get('answer')?.value === 'false'"
-                [disabled]="answerSubmitted()"
-                (click)="answerForm.patchValue({ answer: 'false' })"
-                class="tf-button false-button">
-                <mat-icon>cancel</mat-icon>
-                <span>False</span>
-              </button>
-            </div>
-          }
-
-          <!-- Written Answer -->
-          @if (isWritten()) {
-            <mat-form-field appearance="outline" class="full-width">
-              <mat-label>Your Answer</mat-label>
-              <textarea
-                matInput
-                formControlName="answer"
-                [disabled]="answerSubmitted()"
-                rows="6"
-                placeholder="Type your answer here...">
+        <!-- Written Answer -->
+        @if (isWritten()) {
+        <mat-form-field appearance="outline" class="full-width">
+          <mat-label>Your Answer</mat-label>
+          <textarea matInput formControlName="answer" [disabled]="answerSubmitted()" rows="6"
+            placeholder="Type your answer here...">
               </textarea>
-              <mat-hint>Be as detailed as possible</mat-hint>
-            </mat-form-field>
-          }
+          <mat-hint>Be as detailed as possible</mat-hint>
+        </mat-form-field>
+        }
 
-          <!-- Answer Feedback -->
-          @if (answerSubmitted() && answerResult()) {
-            <div class="answer-feedback" [class.correct]="answerResult()?.isCorrect" [class.incorrect]="!answerResult()?.isCorrect">
-              <div class="feedback-header">
-                <mat-icon [style.color]="getFeedbackColor()">
-                  {{ getFeedbackIcon() }}
-                </mat-icon>
-                <h3 [style.color]="getFeedbackColor()">
-                  {{ getFeedbackMessage() }}
-                </h3>
-              </div>
-              
-              @if (!answerResult()?.isCorrect) {
-                <div class="correct-answer">
-                  <strong>Correct Answer:</strong>
-                  <p>{{ answerResult()?.correctAnswer }}</p>
-                </div>
-              }
-              
-              @if (answerResult()?.explanation) {
-                <div class="explanation">
-                  <strong>Explanation:</strong>
-                  <p>{{ answerResult()?.explanation }}</p>
-                </div>
-              }
-              
-              <div class="points-earned">
-                <mat-icon>stars</mat-icon>
-                <span>Points earned: {{ answerResult()?.points }}</span>
-              </div>
-            </div>
-          }
-
-          <!-- Action Buttons -->
-          <div class="action-buttons">
-            @if (!answerSubmitted()) {
-              <button 
-                type="submit" 
-                mat-raised-button 
-                color="primary"
-                [disabled]="!canSubmitAnswer()">
-                @if (isSubmittingAnswer()) {
-                  <mat-spinner diameter="20"></mat-spinner>
-                  <span>Submitting...</span>
-                } @else {
-                  <ng-container>
-                    <mat-icon>send</mat-icon>
-                    <span>Submit Answer</span>
-                  </ng-container>
-                }
-              </button>
-            } @else {
-              <button 
-                type="button" 
-                mat-raised-button 
-                color="primary"
-                (click)="nextQuestion()">
-                @if (isLastQuestion()) {
-                  <ng-container>
-                    <mat-icon>flag</mat-icon>
-                    <span>Complete Quiz</span>
-                  </ng-container>
-                } @else {
-                  <ng-container>
-                    <mat-icon>arrow_forward</mat-icon>
-                    <span>Next Question</span>
-                  </ng-container>
-                }
-              </button>
-            }
+        <!-- Answer Feedback -->
+        @if (answerSubmitted() && answerResult()) {
+        <div class="answer-feedback" [class.correct]="answerResult()?.isCorrect"
+          [class.incorrect]="!answerResult()?.isCorrect">
+          <div class="feedback-header">
+            <mat-icon [style.color]="getFeedbackColor()">
+              {{ getFeedbackIcon() }}
+            </mat-icon>
+            <h3 [style.color]="getFeedbackColor()">
+              {{ getFeedbackMessage() }}
+            </h3>
           </div>
-        </form>
-      </mat-card-content>
+
+          @if (!answerResult()?.isCorrect) {
+          <div class="correct-answer">
+            <strong>Correct Answer:</strong>
+            <p>{{ answerResult()?.correctAnswer }}</p>
+          </div>
+          }
+
+          @if (answerResult()?.explanation) {
+          <div class="explanation">
+            <strong>Explanation:</strong>
+            <p>{{ answerResult()?.explanation }}</p>
+          </div>
+          }
+
+          <div class="points-earned">
+            <mat-icon>stars</mat-icon>
+            <span>Points earned: {{ answerResult()?.points }}</span>
+          </div>
+        </div>
+        }
+
+        {{this.answerForm?.valid }}
+        {{ !this.answerSubmitted()}}
+        {{ !this.isSubmittingAnswer()}}
+        <!-- Action Buttons -->
+        <div class="action-buttons">
+          @if (!answerSubmitted()) {
+          <button type="submit" mat-raised-button color="primary" [disabled]="!answerForm?.valid || !canSubmitAnswer()">
+            @if (isSubmittingAnswer()) {
+            <mat-spinner diameter="20"></mat-spinner>
+            <span>Submitting...</span>
+            } @else {
+            <ng-container>
+              <mat-icon>send</mat-icon>
+              <span>Submit Answer</span>
+            </ng-container>
+            }
+          </button>
+          } @else {
+          <button type="button" mat-raised-button color="primary" (click)="nextQuestion()">
+            @if (isLastQuestion()) {
+            <ng-container>
+              <mat-icon>flag</mat-icon>
+              <span>Complete Quiz</span>
+            </ng-container>
+            } @else {
+            <ng-container>
+              <mat-icon>arrow_forward</mat-icon>
+              <span>Next Question</span>
+            </ng-container>
+            }
+          </button>
+          }
+        </div>
+      </form>
+    </mat-card-content>
     } @else {
-      <!-- Loading State -->
-      <mat-card-content class="loading-container">
-        <mat-spinner diameter="50"></mat-spinner>
-        <p>Loading question...</p>
-      </mat-card-content>
+    <!-- Loading State -->
+    <mat-card-content class="loading-container">
+      <mat-spinner diameter="50"></mat-spinner>
+      <p>Loading question...</p>
+    </mat-card-content>
     }
   </mat-card>
 
@@ -208,4 +185,4 @@
       </div>
     </div>
   </mat-card>
-</div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/features/quiz/quiz-question/quiz-question.ts b/frontend/src/app/features/quiz/quiz-question/quiz-question.ts
index 985bc86..ade4cb4 100644
--- a/frontend/src/app/features/quiz/quiz-question/quiz-question.ts
+++ b/frontend/src/app/features/quiz/quiz-question/quiz-question.ts
@@ -56,21 +56,21 @@ export class QuizQuestionComponent implements OnInit, OnDestroy {
   readonly activeSession = this.quizService.activeSession;
   readonly isSubmittingAnswer = this.quizService.isSubmittingAnswer;
   readonly questions = this.quizService.questions;
-  
+
   // Current question state
   readonly currentQuestionIndex = computed(() => this.activeSession()?.currentQuestionIndex ?? 0);
   readonly totalQuestions = computed(() => this.activeSession()?.totalQuestions ?? 0);
   readonly currentQuestion = signal<Question | null>(null);
-  
+
   // Answer feedback state
   readonly answerSubmitted = signal<boolean>(false);
   readonly answerResult = signal<QuizAnswerResponse | null>(null);
   readonly showExplanation = signal<boolean>(false);
-  
+
   // Timer state (for timed quizzes)
   readonly timeRemaining = signal<number>(0); // in seconds
   readonly timerRunning = signal<boolean>(false);
-  
+
   // Progress
   readonly progress = computed(() => {
     const total = this.totalQuestions();
@@ -93,8 +93,8 @@ export class QuizQuestionComponent implements OnInit, OnDestroy {
   readonly questionTypeLabel = computed(() => {
     const type = this.currentQuestion()?.questionType;
     switch (type) {
-      case 'multiple_choice': return 'Multiple Choice';
-      case 'true_false': return 'True/False';
+      case 'multiple': return 'Multiple Choice';
+      case 'trueFalse': return 'True/False';
       case 'written': return 'Written Answer';
       default: return '';
     }
@@ -102,7 +102,7 @@ export class QuizQuestionComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.sessionId = this.route.snapshot.params['sessionId'];
-    
+
     if (!this.sessionId) {
       this.router.navigate(['/quiz/setup']);
       return;
@@ -110,6 +110,8 @@ export class QuizQuestionComponent implements OnInit, OnDestroy {
 
     this.initForm();
     this.loadQuizSession();
+    console.log(this.questions());
+
   }
 
   ngOnDestroy(): void {
@@ -134,16 +136,16 @@ export class QuizQuestionComponent implements OnInit, OnDestroy {
     // Check if we have an active session with questions already loaded
     const activeSession = this.activeSession();
     const questions = this.questions();
-    
+
     if (activeSession && activeSession.id === this.sessionId && questions.length > 0) {
       // Session and questions already loaded from quiz start
       if (activeSession.status === 'completed') {
         this.router.navigate(['/quiz', this.sessionId, 'results']);
         return;
       }
-      
+
       this.loadCurrentQuestion();
-      
+
       // Start timer for timed quizzes
       if (activeSession.quizType === 'timed' && activeSession.timeSpent) {
         const timeLimit = this.calculateTimeLimit(activeSession.totalQuestions);
@@ -212,7 +214,7 @@ export class QuizQuestionComponent implements OnInit, OnDestroy {
   private loadCurrentQuestion(): void {
     const index = this.currentQuestionIndex();
     const allQuestions = this.questions();
-    
+
     if (index < allQuestions.length) {
       this.currentQuestion.set(allQuestions[index]);
       this.answerSubmitted.set(false);
@@ -264,7 +266,7 @@ export class QuizQuestionComponent implements OnInit, OnDestroy {
     if (!question) return;
 
     const answer = this.answerForm.get('answer')?.value;
-    
+
     const submission: QuizAnswerSubmission = {
       questionId: question.id,
       answer: answer,
@@ -359,14 +361,14 @@ export class QuizQuestionComponent implements OnInit, OnDestroy {
    * Check if answer is multiple choice
    */
   isMultipleChoice(): boolean {
-    return this.currentQuestion()?.questionType === 'multiple_choice';
+    return this.currentQuestion()?.questionType === 'multiple';
   }
 
   /**
    * Check if answer is true/false
    */
   isTrueFalse(): boolean {
-    return this.currentQuestion()?.questionType === 'true_false';
+    return this.currentQuestion()?.questionType === 'trueFalse';
   }
 
   /**
diff --git a/frontend/src/app/features/quiz/quiz-setup/quiz-setup.html b/frontend/src/app/features/quiz/quiz-setup/quiz-setup.html
index 06433b6..b84a04e 100644
--- a/frontend/src/app/features/quiz/quiz-setup/quiz-setup.html
+++ b/frontend/src/app/features/quiz/quiz-setup/quiz-setup.html
@@ -13,191 +13,176 @@
     <mat-card-content>
       <!-- Guest Warning -->
       @if (showGuestWarning()) {
-        <div class="guest-warning">
-          <mat-icon class="warning-icon">warning</mat-icon>
-          <div class="warning-content">
-            <p><strong>Limited Quizzes Remaining</strong></p>
-            <p>You have {{ remainingQuizzes() }} quiz(es) left as a guest.</p>
-            <button mat-stroked-button color="primary" (click)="navigateToRegister()">
-              Sign Up for Unlimited Access
-            </button>
-          </div>
+      <div class="guest-warning">
+        <mat-icon class="warning-icon">warning</mat-icon>
+        <div class="warning-content">
+          <p><strong>Limited Quizzes Remaining</strong></p>
+          <p>You have {{ remainingQuizzes() }} quiz(es) left as a guest.</p>
+          <button mat-stroked-button color="primary" (click)="navigateToRegister()">
+            Sign Up for Unlimited Access
+          </button>
         </div>
+      </div>
       }
 
       <!-- Loading State -->
       @if (isLoadingCategories()) {
-        <div class="loading-container">
-          <mat-spinner diameter="50"></mat-spinner>
-          <p>Loading categories...</p>
-        </div>
+      <div class="loading-container">
+        <mat-spinner diameter="50"></mat-spinner>
+        <p>Loading categories...</p>
+      </div>
       }
 
       <!-- Setup Form -->
       @if (!isLoadingCategories()) {
-        <form [formGroup]="setupForm" (ngSubmit)="startQuiz()" class="setup-form">
-          
-          <!-- Category Selection -->
-          <div class="form-section">
-            <h2>
-              <mat-icon>category</mat-icon>
-              Select Category
-            </h2>
-            <mat-form-field appearance="outline" class="full-width">
-              <mat-label>Choose a category</mat-label>
-              <mat-select formControlName="categoryId" required>
-                @for (category of getAvailableCategories(); track category.id) {
-                  <mat-option [value]="category.id">
-                    <div class="category-option">
-                      @if (category.icon) {
-                        <mat-icon [style.color]="category.color">{{ category.icon }}</mat-icon>
-                      }
-                      <span class="category-name">{{ category.name }}</span>
-                      <span class="question-count">({{ category.questionCount }} questions)</span>
-                    </div>
-                  </mat-option>
-                }
-              </mat-select>
-              @if (setupForm.get('categoryId')?.hasError('required') && setupForm.get('categoryId')?.touched) {
-                <mat-error>Please select a category</mat-error>
-              }
-            </mat-form-field>
+      <form [formGroup]="setupForm" (ngSubmit)="startQuiz()" class="setup-form">
 
-            @if (selectedCategory()) {
-              <div class="category-preview">
-                <mat-icon [style.color]="selectedCategory()?.color">{{ selectedCategory()?.icon }}</mat-icon>
-                <div class="category-info">
-                  <h3>{{ selectedCategory()?.name }}</h3>
-                  <p>{{ selectedCategory()?.description }}</p>
+        <!-- Category Selection -->
+        <div class="form-section">
+          <h2>
+            <mat-icon>category</mat-icon>
+            Select Category
+          </h2>
+          <mat-form-field appearance="outline" class="full-width">
+            <mat-label>Choose a category</mat-label>
+            <mat-select formControlName="categoryId" required>
+              @for (category of getAvailableCategories(); track category.id) {
+              <mat-option [value]="category.id">
+                <div class="category-option">
+                  @if (category.icon) {
+                  <mat-icon [style.color]="category.color">{{ category.icon }}</mat-icon>
+                  }
+                  <span class="category-name">{{ category.name }}</span>
+                  <span class="question-count">({{ category.questionCount }} questions)</span>
                 </div>
-              </div>
+              </mat-option>
+              }
+            </mat-select>
+            @if (setupForm.get('categoryId')?.hasError('required') && setupForm.get('categoryId')?.touched) {
+            <mat-error>Please select a category</mat-error>
+            }
+          </mat-form-field>
+
+          @if (selectedCategory()) {
+          <div class="category-preview">
+            <mat-icon [style.color]="selectedCategory()?.color">{{ selectedCategory()?.icon }}</mat-icon>
+            <div class="category-info">
+              <h3>{{ selectedCategory()?.name }}</h3>
+              <p>{{ selectedCategory()?.description }}</p>
+            </div>
+          </div>
+          }
+        </div>
+
+        <!-- Question Count -->
+        <div class="form-section">
+          <h2>
+            <mat-icon>format_list_numbered</mat-icon>
+            Number of Questions
+          </h2>
+          <div class="question-count-selector">
+            @for (count of questionCountOptions; track count) {
+            <button type="button" mat-stroked-button [class.selected]="setupForm.get('questionCount')?.value === count"
+              (click)="setupForm.patchValue({ questionCount: count })">
+              {{ count }}
+            </button>
             }
           </div>
+          <p class="helper-text">Selected: {{ setupForm.get('questionCount')?.value }} questions</p>
+        </div>
 
-          <!-- Question Count -->
-          <div class="form-section">
-            <h2>
-              <mat-icon>format_list_numbered</mat-icon>
-              Number of Questions
-            </h2>
-            <div class="question-count-selector">
-              @for (count of questionCountOptions; track count) {
-                <button
-                  type="button"
-                  mat-stroked-button
-                  [class.selected]="setupForm.get('questionCount')?.value === count"
-                  (click)="setupForm.patchValue({ questionCount: count })">
-                  {{ count }}
-                </button>
-              }
-            </div>
-            <p class="helper-text">Selected: {{ setupForm.get('questionCount')?.value }} questions</p>
+        <!-- Difficulty Selection -->
+        <div class="form-section">
+          <h2>
+            <mat-icon>tune</mat-icon>
+            Difficulty Level
+          </h2>
+          <div class="difficulty-selector">
+            @for (difficulty of difficultyOptions; track difficulty.value) {
+            <button type="button" mat-stroked-button class="difficulty-option"
+              [class.selected]="setupForm.get('difficulty')?.value === difficulty.value"
+              (click)="setupForm.patchValue({ difficulty: difficulty.value })">
+              <mat-icon [style.color]="difficulty.color">{{ difficulty.icon }}</mat-icon>
+              <span>{{ difficulty.label }}</span>
+            </button>
+            }
           </div>
+        </div>
 
-          <!-- Difficulty Selection -->
-          <div class="form-section">
-            <h2>
-              <mat-icon>tune</mat-icon>
-              Difficulty Level
-            </h2>
-            <div class="difficulty-selector">
-              @for (difficulty of difficultyOptions; track difficulty.value) {
-                <button
-                  type="button"
-                  mat-stroked-button
-                  class="difficulty-option"
-                  [class.selected]="setupForm.get('difficulty')?.value === difficulty.value"
-                  (click)="setupForm.patchValue({ difficulty: difficulty.value })">
-                  <mat-icon [style.color]="difficulty.color">{{ difficulty.icon }}</mat-icon>
-                  <span>{{ difficulty.label }}</span>
-                </button>
-              }
-            </div>
-          </div>
-
-          <!-- Quiz Type Selection -->
-          <div class="form-section">
-            <h2>
-              <mat-icon>mode</mat-icon>
-              Quiz Mode
-            </h2>
-            <div class="quiz-type-selector">
-              @for (type of quizTypeOptions; track type.value) {
-                <mat-card 
-                  class="quiz-type-card"
-                  [class.selected]="setupForm.get('quizType')?.value === type.value"
-                  (click)="setupForm.patchValue({ quizType: type.value })">
-                  <mat-icon class="type-icon">{{ type.icon }}</mat-icon>
-                  <h3>{{ type.label }}</h3>
-                  <p>{{ type.description }}</p>
-                </mat-card>
-              }
-            </div>
-          </div>
-
-          <!-- Summary Card -->
-          <div class="summary-section">
-            <mat-card class="summary-card">
-              <h3>
-                <mat-icon>info</mat-icon>
-                Quiz Summary
-              </h3>
-              <div class="summary-details">
-                <div class="summary-item">
-                  <span class="label">Category:</span>
-                  <span class="value">{{ selectedCategory()?.name || 'Not selected' }}</span>
-                </div>
-                <div class="summary-item">
-                  <span class="label">Questions:</span>
-                  <span class="value">{{ setupForm.get('questionCount')?.value }}</span>
-                </div>
-                <div class="summary-item">
-                  <span class="label">Difficulty:</span>
-                  <span class="value">
-                    {{ getSelectedDifficultyLabel() }}
-                  </span>
-                </div>
-                <div class="summary-item">
-                  <span class="label">Mode:</span>
-                  <span class="value">
-                    {{ getSelectedQuizTypeLabel() }}
-                  </span>
-                </div>
-                <div class="summary-item">
-                  <span class="label">Estimated Time:</span>
-                  <span class="value">~{{ estimatedTime() }} minutes</span>
-                </div>
-              </div>
+        <!-- Quiz Type Selection -->
+        <div class="form-section">
+          <h2>
+            <mat-icon>mode</mat-icon>
+            Quiz Mode
+          </h2>
+          <div class="quiz-type-selector">
+            @for (type of quizTypeOptions; track type.value) {
+            <mat-card class="quiz-type-card" [class.selected]="setupForm.get('quizType')?.value === type.value"
+              (click)="setupForm.patchValue({ quizType: type.value })">
+              <mat-icon class="type-icon">{{ type.icon }}</mat-icon>
+              <h3>{{ type.label }}</h3>
+              <p>{{ type.description }}</p>
             </mat-card>
+            }
           </div>
+        </div>
 
-          <!-- Action Buttons -->
-          <div class="action-buttons">
-            <button 
-              type="button" 
-              mat-stroked-button 
-              routerLink="/categories">
-              <mat-icon>arrow_back</mat-icon>
-              Back to Categories
-            </button>
-            <button 
-              type="submit" 
-              mat-raised-button 
-              color="primary"
-              [disabled]="!canStartQuiz()">
-              @if (isStartingQuiz()) {
-                <mat-spinner diameter="20"></mat-spinner>
-                <span>Starting...</span>
-              } @else {
-                <ng-container>
-                  <mat-icon>play_arrow</mat-icon>
-                  <span>Start Quiz</span>
-                </ng-container>
-              }
-            </button>
-          </div>
-        </form>
+        <!-- Summary Card -->
+        <div class="summary-section">
+          <mat-card class="summary-card">
+            <h3>
+              <mat-icon>info</mat-icon>
+              Quiz Summary
+            </h3>
+            <div class="summary-details">
+              <div class="summary-item">
+                <span class="label">Category:</span>
+                <span class="value">{{ selectedCategory()?.name || 'Not selected' }}</span>
+              </div>
+              <div class="summary-item">
+                <span class="label">Questions:</span>
+                <span class="value">{{ setupForm.get('questionCount')?.value }}</span>
+              </div>
+              <div class="summary-item">
+                <span class="label">Difficulty:</span>
+                <span class="value">
+                  {{ getSelectedDifficultyLabel() }}
+                </span>
+              </div>
+              <div class="summary-item">
+                <span class="label">Mode:</span>
+                <span class="value">
+                  {{ getSelectedQuizTypeLabel() }}
+                </span>
+              </div>
+              <div class="summary-item">
+                <span class="label">Estimated Time:</span>
+                <span class="value">~{{ estimatedTime() }} minutes</span>
+              </div>
+            </div>
+          </mat-card>
+        </div>
+
+        <!-- Action Buttons -->
+        <div class="action-buttons">
+          <button type="button" mat-stroked-button routerLink="/categories">
+            <mat-icon>arrow_back</mat-icon>
+            Back to Categories
+          </button>
+          <button type="submit" mat-raised-button color="primary" [disabled]="(setupForm.invalid && !isStartingQuiz())">
+            @if (isStartingQuiz()) {
+            <mat-spinner diameter="20"></mat-spinner>
+            <span>Starting...</span>
+            } @else {
+            <ng-container>
+              <mat-icon>play_arrow</mat-icon>
+              <span>Start Quiz</span>
+            </ng-container>
+            }
+          </button>
+        </div>
+      </form>
       }
     </mat-card-content>
   </mat-card>
-</div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/features/quiz/quiz-setup/quiz-setup.ts b/frontend/src/app/features/quiz/quiz-setup/quiz-setup.ts
index a020082..6ab8bbe 100644
--- a/frontend/src/app/features/quiz/quiz-setup/quiz-setup.ts
+++ b/frontend/src/app/features/quiz/quiz-setup/quiz-setup.ts
@@ -17,7 +17,7 @@ import { CategoryService } from '../../../core/services/category.service';
 import { GuestService } from '../../../core/services/guest.service';
 import { StorageService } from '../../../core/services/storage.service';
 import { Category } from '../../../core/models/category.model';
-import { QuizStartRequest } from '../../../core/models/quiz.model';
+import { QuizStartFormRequest, QuizStartRequest } from '../../../core/models/quiz.model';
 
 @Component({
   selector: 'app-quiz-setup',
@@ -56,7 +56,7 @@ export class QuizSetupComponent implements OnInit, OnDestroy {
   readonly categories = this.categoryService.categories;
   readonly isLoadingCategories = this.categoryService.isLoading;
   readonly isStartingQuiz = this.quizService.isStartingQuiz;
-  
+
   // Guest limit
   readonly isGuest = computed(() => !this.storageService.isAuthenticated());
   readonly guestState = this.guestService.guestState;
@@ -68,7 +68,7 @@ export class QuizSetupComponent implements OnInit, OnDestroy {
 
   // Question count options
   readonly questionCountOptions = [5, 10, 15, 20];
-  
+
   // Difficulty options
   readonly difficultyOptions = [
     { value: 'easy', label: 'Easy', icon: 'sentiment_satisfied', color: '#4CAF50' },
@@ -79,15 +79,15 @@ export class QuizSetupComponent implements OnInit, OnDestroy {
 
   // Quiz type options
   readonly quizTypeOptions = [
-    { 
-      value: 'practice', 
-      label: 'Practice Mode', 
+    {
+      value: 'practice',
+      label: 'Practice Mode',
       icon: 'school',
       description: 'No time limit, learn at your own pace'
     },
-    { 
-      value: 'timed', 
-      label: 'Timed Mode', 
+    {
+      value: 'timed',
+      label: 'Timed Mode',
       icon: 'timer',
       description: 'Challenge yourself with time constraints'
     }
@@ -125,7 +125,7 @@ export class QuizSetupComponent implements OnInit, OnDestroy {
    */
   private initForm(): void {
     this.setupForm = this.fb.group({
-      categoryId: ['', Validators.required],
+      categoryId: [null, Validators.required],
       questionCount: [10, [Validators.required, Validators.min(5), Validators.max(20)]],
       difficulty: ['mixed', Validators.required],
       quizType: ['practice', Validators.required]
@@ -160,7 +160,7 @@ export class QuizSetupComponent implements OnInit, OnDestroy {
     }
 
     const formValue = this.setupForm.value;
-    const request: QuizStartRequest = {
+    const request: QuizStartFormRequest = {
       categoryId: formValue.categoryId,
       questionCount: formValue.questionCount,
       difficulty: formValue.difficulty,
@@ -173,7 +173,7 @@ export class QuizSetupComponent implements OnInit, OnDestroy {
         next: (response) => {
           if (response.success) {
             // Navigate to quiz page
-            this.router.navigate(['/quiz', response.sessionId]);
+            this.router.navigate(['/quiz', response.data.sessionId]);
           }
         },
         error: (error) => {
@@ -187,12 +187,12 @@ export class QuizSetupComponent implements OnInit, OnDestroy {
    */
   getAvailableCategories(): Category[] {
     const allCategories = this.categories() || [];
-    
+
     if (this.isGuest()) {
       // Filter to show only guest-accessible categories
       return allCategories.filter(cat => cat.guestAccessible);
     }
-    
+
     return allCategories;
   }
 
diff --git a/frontend/src/app/shared/components/resume-quiz-dialog/resume-quiz-dialog.html b/frontend/src/app/shared/components/resume-quiz-dialog/resume-quiz-dialog.html
index f381dbe..8e9888d 100644
--- a/frontend/src/app/shared/components/resume-quiz-dialog/resume-quiz-dialog.html
+++ b/frontend/src/app/shared/components/resume-quiz-dialog/resume-quiz-dialog.html
@@ -25,11 +25,8 @@
         </div>
 
         <div class="progress-container">
-          <mat-progress-bar 
-            mode="determinate" 
-            [value]="progress()"
-            [color]="progress() > 66 ? 'primary' : progress() > 33 ? 'accent' : 'warn'"
-          ></mat-progress-bar>
+          <mat-progress-bar mode="determinate" [value]="progress()"
+            [color]="progress() > 66 ? 'primary' : progress() > 33 ? 'accent' : 'warn'"></mat-progress-bar>
           <span class="progress-text">{{ progress() }}% Complete</span>
         </div>
 
@@ -76,32 +73,23 @@
         </div>
 
         @if (session().score > 0) {
-          <div class="current-score">
-            <mat-icon>emoji_events</mat-icon>
-            <span>Current Score: <strong>{{ session().score }} points</strong></span>
-          </div>
+        <div class="current-score">
+          <mat-icon>emoji_events</mat-icon>
+          <span>Current Score: <strong>{{ session().score }} points</strong></span>
+        </div>
         }
       </div>
     </div>
   </mat-dialog-content>
 
   <mat-dialog-actions align="end">
-    <button 
-      mat-button 
-      (click)="startNewQuiz()"
-      class="action-btn secondary"
-    >
+    <button mat-button (click)="startNewQuiz()" class="action-btn secondary">
       <mat-icon>add</mat-icon>
       Start New Quiz
     </button>
-    <button 
-      mat-raised-button 
-      color="primary"
-      (click)="resumeQuiz()"
-      class="action-btn primary"
-    >
+    <button mat-raised-button color="primary" (click)="resumeQuiz()" class="action-btn primary">
       <mat-icon>play_arrow</mat-icon>
       Continue Quiz
     </button>
   </mat-dialog-actions>
-</div>
+</div>
\ No newline at end of file