diff --git a/src/components/lessons/Quiz.tsx b/src/components/lessons/Quiz.tsx
index 3ea5604..1617e7d 100644
--- a/src/components/lessons/Quiz.tsx
+++ b/src/components/lessons/Quiz.tsx
@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
-import { QuizData } from '../types';
-import { CheckCircle2, XCircle, ChevronRight } from 'lucide-react';
+import React, { useState } from "react";
+import { type QuizData } from "../../types/lesson";
+import { CheckCircle2, XCircle, ChevronRight } from "lucide-react";
 
 interface QuizProps {
   data: QuizData;
@@ -21,20 +21,24 @@ const Quiz: React.FC<QuizProps> = ({ data, onComplete }) => {
   const handleSubmit = () => {
     if (!selectedId) return;
     setIsSubmitted(true);
-    const selectedOption = data.options.find(opt => opt.id === selectedId);
+    const selectedOption = data.options.find((opt) => opt.id === selectedId);
     if (selectedOption?.isCorrect && onComplete) {
       onComplete();
     }
   };
 
-  const selectedOption = data.options.find(opt => opt.id === selectedId);
+  const selectedOption = data.options.find((opt) => opt.id === selectedId);
   const isCorrect = selectedOption?.isCorrect;
 
   return (
     <div className="w-full max-w-2xl mx-auto bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden mt-6">
       <div className="p-6">
-        <h4 className="text-sm font-bold text-slate-400 uppercase tracking-wider mb-2">Concept Check</h4>
-        <p className="text-lg font-medium text-slate-900 mb-6 whitespace-pre-line">{data.question}</p>
+        <h4 className="text-sm font-bold text-slate-400 uppercase tracking-wider mb-2">
+          Concept Check
+        </h4>
+        <p className="text-lg font-medium text-slate-900 mb-6 whitespace-pre-line">
+          {data.question}
+        </p>
 
         <div className="space-y-3">
           {data.options.map((option) => {
@@ -52,11 +56,11 @@ const Quiz: React.FC<QuizProps> = ({ data, onComplete }) => {
                   icon = <XCircle className="w-5 h-5 text-red-600" />;
                 }
               } else if (option.isCorrect) {
-                 // Highlight correct answer if wrong one was picked
-                 borderClass = "border-green-200 bg-green-50/50";
+                // Highlight correct answer if wrong one was picked
+                borderClass = "border-green-200 bg-green-50/50";
               }
             } else if (selectedId === option.id) {
-               borderClass = "border-indigo-600 bg-indigo-50";
+              borderClass = "border-indigo-600 bg-indigo-50";
             }
 
             return (
@@ -67,14 +71,22 @@ const Quiz: React.FC<QuizProps> = ({ data, onComplete }) => {
                 className={`w-full text-left p-4 rounded-lg border-2 transition-all duration-200 flex items-center justify-between group ${borderClass} ${bgClass}`}
               >
                 <div className="flex items-center">
-                  <span className={`w-6 h-6 flex items-center justify-center rounded-full text-xs font-bold mr-3 ${
-                    isSubmitted && option.isCorrect ? 'bg-green-200 text-green-800' : 
-                    isSubmitted && option.id === selectedId ? 'bg-red-200 text-red-800' :
-                    selectedId === option.id ? 'bg-indigo-600 text-white' : 'bg-slate-100 text-slate-500'
-                  }`}>
+                  <span
+                    className={`w-6 h-6 flex items-center justify-center rounded-full text-xs font-bold mr-3 ${
+                      isSubmitted && option.isCorrect
+                        ? "bg-green-200 text-green-800"
+                        : isSubmitted && option.id === selectedId
+                          ? "bg-red-200 text-red-800"
+                          : selectedId === option.id
+                            ? "bg-indigo-600 text-white"
+                            : "bg-slate-100 text-slate-500"
+                    }`}
+                  >
                     {option.id}
                   </span>
-                  <span className="text-slate-700 group-hover:text-slate-900">{option.text}</span>
+                  <span className="text-slate-700 group-hover:text-slate-900">
+                    {option.text}
+                  </span>
                 </div>
                 {icon}
               </button>
@@ -85,21 +97,33 @@ const Quiz: React.FC<QuizProps> = ({ data, onComplete }) => {
 
       {/* Feedback Section */}
       {isSubmitted && (
-        <div className={`p-6 border-t ${isCorrect ? 'bg-green-50 border-green-100' : 'bg-slate-50 border-slate-100'}`}>
+        <div
+          className={`p-6 border-t ${isCorrect ? "bg-green-50 border-green-100" : "bg-slate-50 border-slate-100"}`}
+        >
           <div className="flex items-start gap-3">
-             <div className={`mt-1 p-1 rounded-full ${isCorrect ? 'bg-green-200' : 'bg-slate-200'}`}>
-                {isCorrect ? <CheckCircle2 className="w-4 h-4 text-green-700" /> : <div className="w-4 h-4 text-slate-500 font-bold text-center leading-4">i</div>}
-             </div>
-             <div>
-               <p className={`font-bold ${isCorrect ? 'text-green-800' : 'text-slate-800'} mb-1`}>
-                 {isCorrect ? "That's right!" : "Not quite."}
-               </p>
-               <p className="text-slate-600 mb-2">{selectedOption?.feedback}</p>
-               <div className="text-sm text-slate-500 bg-white p-3 rounded border border-slate-200">
-                 <span className="font-semibold block mb-1">Explanation:</span>
-                 {data.explanation}
-               </div>
-             </div>
+            <div
+              className={`mt-1 p-1 rounded-full ${isCorrect ? "bg-green-200" : "bg-slate-200"}`}
+            >
+              {isCorrect ? (
+                <CheckCircle2 className="w-4 h-4 text-green-700" />
+              ) : (
+                <div className="w-4 h-4 text-slate-500 font-bold text-center leading-4">
+                  i
+                </div>
+              )}
+            </div>
+            <div>
+              <p
+                className={`font-bold ${isCorrect ? "text-green-800" : "text-slate-800"} mb-1`}
+              >
+                {isCorrect ? "That's right!" : "Not quite."}
+              </p>
+              <p className="text-slate-600 mb-2">{selectedOption?.feedback}</p>
+              <div className="text-sm text-slate-500 bg-white p-3 rounded border border-slate-200">
+                <span className="font-semibold block mb-1">Explanation:</span>
+                {data.explanation}
+              </div>
+            </div>
           </div>
         </div>
       )}
@@ -110,9 +134,9 @@ const Quiz: React.FC<QuizProps> = ({ data, onComplete }) => {
             onClick={handleSubmit}
             disabled={!selectedId}
             className={`px-6 py-2 rounded-full font-semibold transition-all flex items-center ${
-              selectedId 
-                ? 'bg-slate-900 text-white hover:bg-slate-800 shadow-md transform hover:-translate-y-0.5' 
-                : 'bg-slate-200 text-slate-400 cursor-not-allowed'
+              selectedId
+                ? "bg-slate-900 text-white hover:bg-slate-800 shadow-md transform hover:-translate-y-0.5"
+                : "bg-slate-200 text-slate-400 cursor-not-allowed"
             }`}
           >
             Check Answer <ChevronRight className="w-4 h-4 ml-1" />