diff --git a/src/components/CountryTrendChart.jsx b/src/components/CountryTrendChart.jsx
index d0cdd0a..73f359d 100644
--- a/src/components/CountryTrendChart.jsx
+++ b/src/components/CountryTrendChart.jsx
@@ -1,216 +1,216 @@
-import { useEffect, useState, useRef, useMemo, useState as useLocalState } from 'react';
+import { useEffect, useState, useRef, useMemo } from 'react';
 import Loading from './Loading.jsx';
 import ChartPlaceholder from './ChartPlaceholder.jsx';
 import ErrorMessage from './ErrorMessage.jsx';
 
 function SimpleLineChart({ data, width = 600, height = 250 }) {
-   const [hover, setHover] = useLocalState(null);
-   if (!data || data.length === 0) return <ChartPlaceholder label="No data" />;
-
-   const padding = 40;
-   const dates = data.map(d => new Date(d.date));
-   const values = data.map(d => d.value);
-
-   const minY = Math.min(...values);
-   const maxY = Math.max(...values);
-   const yRange = maxY - minY || 1;
-
-   const x = i => padding + (i / (data.length - 1)) * (width - padding * 2);
-   const y = v => height - padding - ((v - minY) / yRange) * (height - padding * 2);
-
-   // Smooth path using quadratic curves
-   const path = data.reduce((acc, d, i, arr) => {
-      const px = x(i);
-      const py = y(d.value);
-      if (i === 0) return `M ${px} ${py}`;
-      const prevX = x(i - 1);
-      const prevY = y(arr[i - 1].value);
-      const midX = (px + prevX) / 2;
-      const midY = (py + prevY) / 2;
-      return acc + ` Q ${prevX} ${prevY}, ${midX} ${midY}`;
-   }, '');
-
-   const yTicks = 5;
-   const yStep = yRange / yTicks;
-   const yLabels = Array.from({ length: yTicks + 1 }, (_, i) => minY + i * yStep);
-
-   return (
-      <svg
-         width="100%"
-         viewBox={`0 0 ${width} ${height}`}
-         preserveAspectRatio="none"
-         style={{ background: 'transparent', borderRadius: 6 }}// give it trasparent background
-         onMouseLeave={() => setHover(null)}
-      >
-         {/* Grid lines */}
-         {yLabels.map((v, i) => (
-            <line
-               key={i}
-               x1={padding + 10}
-               x2={width - padding}
-               y1={y(v)}
-               y2={y(v)}
-               stroke="#e5e7eb"
-               strokeWidth="1"
-            />
-         ))}
-
-         {/* Y-axis labels */}
-         {yLabels.map((v, i) => (
-            <text
-               key={i}
-               x={padding + 8}
-               y={y(v) + 4}
-               textAnchor="end"
-               fontSize="10"
-               fill="#6b7280"
-            >
-               {Math.round(v).toLocaleString()}
-            </text>
-         ))}
-
-         {/* Area fill */}
-         <defs>
-            <linearGradient id="g" x1="0" x2="0" y1="0" y2="1">
-               <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.3" />
-               <stop offset="100%" stopColor="#3b82f6" stopOpacity="0.05" />
-            </linearGradient>
-         </defs>
-         <path
-            d={`${path} L ${x(data.length - 1)} ${height - padding} L ${x(0)} ${height - padding} Z`}
-            fill="url(#g)"
-         />
-         <path
-            d={path}
-            fill="none"
-            stroke="#2563eb"
-            strokeWidth="2.5"
-            strokeLinejoin="round"
-            strokeLinecap="round"
-         />
-
-         {/* Data points */}
-         {data.map((d, i) => {
-            const cx = x(i);
-            const cy = y(d.value);
-            return (
-               <circle
-                  key={d.date}
-                  cx={cx}
-                  cy={cy}
-                  r={hover === i ? 4 : 2.5}
-                  fill={hover === i ? '#1e40af' : '#1d4ed8'}
-                  onMouseEnter={() => setHover(i)}
-               />
-            );
-         })}
-
-         {/* Tooltip */}
-         {hover !== null && (
-            <>
-               <rect
-                  x={x(hover) - 45}
-                  y={y(data[hover].value) - 45}
-                  width="90"
-                  height="32"
-                  rx="4"
-                  fill="#111827"
-                  opacity="0.85"
-               />
-               <text
-                  x={x(hover)}
-                  y={y(data[hover].value) - 28}
-                  textAnchor="middle"
-                  fill="white"
-                  fontSize="10"
-               >
-                  {new Date(data[hover].date).toLocaleDateString()}
-               </text>
-               <text
-                  x={x(hover)}
-                  y={y(data[hover].value) - 15}
-                  textAnchor="middle"
-                  fill="#a5b4fc"
-                  fontSize="11"
-                  fontWeight="bold"
-               >
-                  {data[hover].value.toLocaleString()}
-               </text>
-            </>
-         )}
-      </svg>
-   );
+  const [hover, setHover] = useState(null);
+  if (!data || data.length === 0) return <ChartPlaceholder label="No data" />;
+
+  const padding = 40;
+  const dates = data.map(d => new Date(d.date));
+  const values = data.map(d => d.value);
+
+  const minY = Math.min(...values);
+  const maxY = Math.max(...values);
+  const yRange = maxY - minY || 1;
+
+  const x = i => padding + (i / (data.length - 1)) * (width - padding * 2);
+  const y = v => height - padding - ((v - minY) / yRange) * (height - padding * 2);
+
+  // Smooth path using quadratic curves
+  const path = data.reduce((acc, d, i, arr) => {
+    const px = x(i);
+    const py = y(d.value);
+    if (i === 0) return `M ${px} ${py}`;
+    const prevX = x(i - 1);
+    const prevY = y(arr[i - 1].value);
+    const midX = (px + prevX) / 2;
+    const midY = (py + prevY) / 2;
+    return acc + ` Q ${prevX} ${prevY}, ${midX} ${midY}`;
+  }, '');
+
+  const yTicks = 5;
+  const yStep = yRange / yTicks;
+  const yLabels = Array.from({ length: yTicks + 1 }, (_, i) => minY + i * yStep);
+
+  return (
+    <svg
+      width="100%"
+      viewBox={`0 0 ${width} ${height}`}
+      preserveAspectRatio="none"
+      style={{ background: 'transparent', borderRadius: 6 }}
+      onMouseLeave={() => setHover(null)}
+    >
+      {/* Grid lines */}
+      {yLabels.map((v, i) => (
+        <line
+          key={i}
+          x1={padding + 10}
+          x2={width - padding}
+          y1={y(v)}
+          y2={y(v)}
+          stroke="#e5e7eb"
+          strokeWidth="1"
+        />
+      ))}
+
+      {/* Y-axis labels */}
+      {yLabels.map((v, i) => (
+        <text
+          key={i}
+          x={padding + 8}
+          y={y(v) + 4}
+          textAnchor="end"
+          fontSize="10"
+          fill="#6b7280"
+        >
+          {Math.round(v).toLocaleString()}
+        </text>
+      ))}
+
+      {/* Area fill */}
+      <defs>
+        <linearGradient id="g" x1="0" x2="0" y1="0" y2="1">
+          <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.3" />
+          <stop offset="100%" stopColor="#3b82f6" stopOpacity="0.05" />
+        </linearGradient>
+      </defs>
+      <path
+        d={`${path} L ${x(data.length - 1)} ${height - padding} L ${x(0)} ${height - padding} Z`}
+        fill="url(#g)"
+      />
+      <path
+        d={path}
+        fill="none"
+        stroke="#2563eb"
+        strokeWidth="2.5"
+        strokeLinejoin="round"
+        strokeLinecap="round"
+      />
+
+      {/* Data points */}
+      {data.map((d, i) => {
+        const cx = x(i);
+        const cy = y(d.value);
+        return (
+          <circle
+            key={d.date}
+            cx={cx}
+            cy={cy}
+            r={hover === i ? 4 : 2.5}
+            fill={hover === i ? '#1e40af' : '#1d4ed8'}
+            onMouseEnter={() => setHover(i)}
+          />
+        );
+      })}
+
+      {/* Tooltip */}
+      {hover !== null && (
+        <>
+          <rect
+            x={x(hover) - 45}
+            y={y(data[hover].value) - 45}
+            width="90"
+            height="32"
+            rx="4"
+            fill="#111827"
+            opacity="0.85"
+          />
+          <text
+            x={x(hover)}
+            y={y(data[hover].value) - 28}
+            textAnchor="middle"
+            fill="white"
+            fontSize="10"
+          >
+            {new Date(data[hover].date).toLocaleDateString()}
+          </text>
+          <text
+            x={x(hover)}
+            y={y(data[hover].value) - 15}
+            textAnchor="middle"
+            fill="#a5b4fc"
+            fontSize="11"
+            fontWeight="bold"
+          >
+            {data[hover].value.toLocaleString()}
+          </text>
+        </>
+      )}
+    </svg>
+  );
 }
 
 export default function CountryTrendChart({ slug }) {
-   const [loading, setLoading] = useState(false);
-   const [error, setError] = useState(null);
-   const [series, setSeries] = useState([]);
-   const abortRef = useRef();
-   const lastSlugRef = useRef(slug);
-
-   useEffect(() => {
-      if (!slug) {
-         lastSlugRef.current = slug;
-         setSeries([]);
-         setError(null);
-         setLoading(false);
-         if (abortRef.current) abortRef.current.abort();
-         return;
-      }
-
-      const controller = new AbortController();
-      abortRef.current = controller;
-      let mounted = true;
-
-      async function load() {
-         setLoading(true);
-         setError(null);
-         setSeries([]);
-         try {
-            const res = await fetch(
-               `https://disease.sh/v3/covid-19/historical/${slug}?lastdays=all`,
-               { signal: controller.signal }
-            );
-            if (!res.ok) throw new Error('Failed to fetch country trends');
-            const json = await res.json();
-
-            if (!mounted || lastSlugRef.current !== slug) return;
-
-            const cases = json.timeline?.cases || {};
-            const seriesData = Object.entries(cases).map(([date, value]) => ({
-               date,
-               value: Number(value || 0),
-            }));
-
-            seriesData.sort((a, b) => new Date(a.date) - new Date(b.date));
-
-            setSeries(seriesData);
-         } catch (e) {
-            if (e.name === 'AbortError') return;
-            setError(e);
-         } finally {
-            if (mounted) setLoading(false);
-         }
-      }
-
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [series, setSeries] = useState([]);
+  const abortRef = useRef();
+  const lastSlugRef = useRef(slug);
+
+  useEffect(() => {
+    if (!slug) {
       lastSlugRef.current = slug;
-      load();
-
-      return () => {
-         mounted = false;
-         controller.abort();
-      };
-   }, [slug]);
-
-   if (!slug) return <ChartPlaceholder label="Select a country to view trends" />;
-   if (loading && series.length === 0) return <Loading />;
-   if (error) return <ErrorMessage error={error} />;
-
-   return (
-      <div className="country-trend-chart">
-         <h3>Confirmed Cases — Cumulative</h3>
-         <SimpleLineChart data={series} />
-      </div>
-   );
+      setSeries([]);
+      setError(null);
+      setLoading(false);
+      if (abortRef.current) abortRef.current.abort();
+      return;
+    }
+
+    const controller = new AbortController();
+    abortRef.current = controller;
+    let mounted = true;
+
+    async function load() {
+      setLoading(true);
+      setError(null);
+      setSeries([]);
+      try {
+        const res = await fetch(
+          `https://disease.sh/v3/covid-19/historical/${slug}?lastdays=all`,
+          { signal: controller.signal }
+        );
+        if (!res.ok) throw new Error('Failed to fetch country trends');
+        const json = await res.json();
+
+        if (!mounted || lastSlugRef.current !== slug) return;
+
+        const cases = json.timeline?.cases || {};
+        const seriesData = Object.entries(cases).map(([date, value]) => ({
+          date,
+          value: Number(value || 0),
+        }));
+
+        seriesData.sort((a, b) => new Date(a.date) - new Date(b.date));
+
+        setSeries(seriesData);
+      } catch (e) {
+        if (e.name === 'AbortError') return;
+        setError(e);
+      } finally {
+        if (mounted) setLoading(false);
+      }
+    }
+
+    lastSlugRef.current = slug;
+    load();
+
+    return () => {
+      mounted = false;
+      controller.abort();
+    };
+  }, [slug]);
+
+  if (!slug) return <ChartPlaceholder label="Select a country to view trends" />;
+  if (loading && series.length === 0) return <Loading />;
+  if (error) return <ErrorMessage error={error} />;
+
+  return (
+    <div className="country-trend-chart">
+      <h3>Confirmed Cases — Cumulative</h3>
+      <SimpleLineChart data={series} />
+    </div>
+  );
 }
diff --git a/src/components/HeroSection.jsx b/src/components/HeroSection.jsx
index f1be622..52b95f3 100644
--- a/src/components/HeroSection.jsx
+++ b/src/components/HeroSection.jsx
@@ -1,21 +1,31 @@
-
 import React from 'react';
 
-
-const HeroSection = ({ image, title, subtitle }) => {
+export default function HeroSection({ image, title, subtitle }) {
   return (
     <section
-      className="hero-section"
-      style={{ backgroundImage: `url(${image})` }}
+      className="relative overflow-hidden rounded-xl mb-6 bg-gradient-to-r from-indigo-50 to-blue-50 hero-section"
+      style={image ? { backgroundImage: `url(${image})`, backgroundSize: 'cover', backgroundPosition: 'center' } : {}}
     >
-      <div className="hero-overlay">
-        <div className="hero-content">
-          <h1 className="hero-title">{title}</h1>
-          {subtitle && <p className="hero-subtitle">{subtitle}</p>}
+      <div className="absolute inset-0 bg-black/10 hero-overlay" />
+      <div className="relative max-w-7xl mx-auto px-4 py-10 flex items-center gap-6 hero-content">
+        {image && (
+          <img
+            src={image}
+            alt=""
+            className="w-24 h-24 object-cover rounded-lg shadow-md hidden sm:block"
+          />
+        )}
+        <div>
+          <h1 className="text-3xl md:text-4xl font-extrabold text-gray-800 hero-title">
+            {title}
+          </h1>
+          {subtitle && (
+            <p className="text-gray-600 mt-2 hero-subtitle">
+              {subtitle}
+            </p>
+          )}
         </div>
       </div>
     </section>
   );
-};
-
-export default HeroSection;
+}
diff --git a/src/pages/Trivia.jsx b/src/pages/Trivia.jsx
index 084a78e..429af08 100644
--- a/src/pages/Trivia.jsx
+++ b/src/pages/Trivia.jsx
@@ -9,7 +9,7 @@
  * Medium:
  *  - [ ] Timer per question + bonus points for speed
  *  - [ ] Show progress bar (questions answered / total)
- *  - [ ] Local high score persistence
+ *  - [x] Local high score persistence
  *  - [ ] Review mode (see all answers after completion)
  * Advanced:
  *  - [ ] Question set builder (choose amount, difficulty, category)
@@ -32,17 +32,33 @@ export default function Trivia() {
   const [error, setError] = useState(null);
   const [score, setScore] = useState(0);
   const [showReview, setShowReview] = useState(false);
+  const [highScore, setHighScore] = useState(0);
+  const [hasSavedForSet, setHasSavedForSet] = useState(false);
 
   useEffect(() => {
     fetchQuestions();
   }, [category, difficulty]);
 
+  // Load high score once on mount
+  useEffect(() => {
+    try {
+      const stored =
+        typeof window !== 'undefined'
+          ? localStorage.getItem('triviaHighScore')
+          : null;
+      if (stored !== null) setHighScore(parseInt(stored, 10) || 0);
+    } catch (_) {
+      // ignore storage errors
+    }
+  }, []);
+
   async function fetchQuestions() {
     try {
       setLoading(true);
       setError(null);
       setScore(0);
       setShowReview(false);
+      setHasSavedForSet(false);
 
       const res = await fetch(
         `https://opentdb.com/api.php?amount=5&category=${category}&difficulty=${difficulty}&type=multiple`
@@ -89,195 +105,249 @@ export default function Trivia() {
 
   const allAnswered = answeredCount === totalQuestions && totalQuestions > 0;
 
-  return (
-    <>
-        <HeroSection
-  image={Quiz}
- title={
-    <>
-      Think Fast, <span style={{ color: 'grey' }}>Learn Faster</span>
-    </>
-  }
-  subtitle="A trivia playground for curious minds, quick thinkers, and casual know-it-alls"
-/>
-    <div style={{ padding: '20px' }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '20px' }}>
-        <h2 style={{ margin: 0 }}>Trivia Quiz</h2>
-        <span style={{ 
-          backgroundColor: difficulty === 'easy' ? '#4caf50' : difficulty === 'medium' ? '#ff9800' : '#f44336',
-          color: 'white',
-          padding: '4px 8px',
-          borderRadius: '4px',
-          fontSize: '0.9em'
-        }}>
-          {difficulty.charAt(0).toUpperCase() + difficulty.slice(1)}
-        </span>
-      </div>
+  // Persist high score at end of game (once per question set)
+  useEffect(() => {
+    if (!allAnswered || hasSavedForSet) return;
+    if (score > highScore) {
+      try {
+        if (typeof window !== 'undefined')
+          localStorage.setItem('triviaHighScore', String(score));
+      } catch (_) {
+        // ignore storage errors
+      }
+      setHighScore(score);
+    }
+    setHasSavedForSet(true);
+  }, [allAnswered, score, highScore, hasSavedForSet]);
 
-      {/* Category Selector */}
-      <div style={{ display: 'flex', gap: '20px', marginBottom: '20px' }}>
-        <label>
-          Category:{' '}
-          <select
-            value={category}
-            onChange={(e) => setCategory(e.target.value)}
-            disabled={showReview}
-          >
-            <option value="18">Science: Computers</option>
-            <option value="21">Sports</option>
-            <option value="23">History</option>
-          </select>
-        </label>
-        {/* Difficulty Selector */}
-        <label>
-          Difficulty:{' '}
-          <select
-            value={difficulty}
-            onChange={(e) => setDifficulty(e.target.value)}
-            disabled={showReview}
-          >
-            <option value="easy">Easy</option>
-            <option value="medium">Medium</option>
-            <option value="hard">Hard</option>
-          </select>
-        </label>
-      </div>
+  function resetHighScore() {
+    try {
+      if (typeof window !== 'undefined')
+        localStorage.removeItem('triviaHighScore');
+    } catch (_) {
+      // ignore storage errors
+    }
+    setHighScore(0);
+  }
 
-      {/* Loading / Error */}
-      {loading && <Loading />}
-      <ErrorMessage error={error} />
+  return (
+    <>
+      <HeroSection
+        image={Quiz}
+        title={
+          <>
+            Think Fast, <span style={{ color: 'grey' }}>Learn Faster</span>
+          </>
+        }
+        subtitle="A trivia playground for curious minds, quick thinkers, and casual know-it-alls"
+      />
 
-      {/* Progress Bar */}
-      {totalQuestions > 0 && (
-        <div style={{ margin: '15px 0' }}>
-          <p>
-            Progress: {answeredCount} / {totalQuestions} answered
-          </p>
-          <div
+      <div style={{ padding: '20px' }}>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '10px',
+            marginBottom: '20px',
+          }}
+        >
+          <h2 style={{ margin: 0 }}>Trivia Quiz</h2>
+          <span
             style={{
-              height: '10px',
-              width: '100%',
-              background: '#ddd',
-              borderRadius: '8px',
-              overflow: 'hidden',
+              backgroundColor:
+                difficulty === 'easy'
+                  ? '#4caf50'
+                  : difficulty === 'medium'
+                  ? '#ff9800'
+                  : '#f44336',
+              color: 'white',
+              padding: '4px 8px',
+              borderRadius: '4px',
+              fontSize: '0.9em',
             }}
           >
+            {difficulty.charAt(0).toUpperCase() + difficulty.slice(1)}
+          </span>
+        </div>
+
+        {/* Category + Difficulty Selector */}
+        <div style={{ display: 'flex', gap: '20px', marginBottom: '20px' }}>
+          <label>
+            Category:{' '}
+            <select
+              value={category}
+              onChange={(e) => setCategory(e.target.value)}
+              disabled={showReview}
+            >
+              <option value="18">Science: Computers</option>
+              <option value="21">Sports</option>
+              <option value="23">History</option>
+            </select>
+          </label>
+          <label>
+            Difficulty:{' '}
+            <select
+              value={difficulty}
+              onChange={(e) => setDifficulty(e.target.value)}
+              disabled={showReview}
+            >
+              <option value="easy">Easy</option>
+              <option value="medium">Medium</option>
+              <option value="hard">Hard</option>
+            </select>
+          </label>
+        </div>
+
+        {/* Loading / Error */}
+        {loading && <Loading />}
+        <ErrorMessage error={error} />
+
+        {/* Progress Bar */}
+        {totalQuestions > 0 && (
+          <div style={{ margin: '15px 0' }}>
+            <p>
+              Progress: {answeredCount} / {totalQuestions} answered
+            </p>
             <div
               style={{
-                width: `${progressPercent}%`,
-                height: '100%',
-                background: '#4caf50',
-                transition: 'width 0.3s ease',
+                height: '10px',
+                width: '100%',
+                background: '#ddd',
+                borderRadius: '8px',
+                overflow: 'hidden',
               }}
-            ></div>
+            >
+              <div
+                style={{
+                  width: `${progressPercent}%`,
+                  height: '100%',
+                  background: '#4caf50',
+                  transition: 'width 0.3s ease',
+                }}
+              ></div>
+            </div>
           </div>
-        </div>
-      )}
+        )}
 
-      {/* Score + Review Button */}
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: '10px',
-          marginBottom: '15px',
-        }}
-      >
-        <p style={{ margin: 0, fontWeight: 'bold' }}>Score: {score}</p>
-        <button
-          onClick={() => setShowReview(true)}
-          disabled={!allAnswered || showReview}
+        {/* Score + Buttons */}
+        <div
           style={{
-            background: allAnswered ? '#007bff' : '#ccc',
-            color: '#fff',
-            padding: '6px 12px',
-            border: 'none',
-            borderRadius: '6px',
-            cursor: allAnswered && !showReview ? 'pointer' : 'not-allowed',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '10px',
+            marginBottom: '15px',
           }}
         >
-          Review Answers
-        </button>
-      </div>
-
-      {/* Quiz Cards */}
-      {questions.map((q, idx) => (
-        <Card key={idx} title={`Q${idx + 1}: ${decodeHtml(q.question)}`}>
-          <ul>
-            {q.answers.map((a) => {
-              const isPicked = q.picked === a;
-              const isCorrect = a === q.correct_answer;
-              let btnClass = '';
-
-              if (showReview) {
-                btnClass = isCorrect
-                  ? 'correct'
-                  : isPicked
-                  ? 'wrong'
-                  : 'neutral';
-              } else if (isPicked) {
-                btnClass = isCorrect ? 'correct' : 'wrong';
-              }
-
-              return (
-                <li key={a}>
-                  <button
-                    disabled={!!q.picked || showReview}
-                    onClick={() => pick(idx, a)}
-                    style={{
-                      margin: '5px',
-                      padding: '8px 12px',
-                      borderRadius: '6px',
-                      cursor: q.picked || showReview ? 'default' : 'pointer',
-                      border:
-                        btnClass === 'correct'
-                          ? '2px solid green'
-                          : btnClass === 'wrong'
-                          ? '2px solid red'
-                          : '1px solid #ccc',
-                      background:
-                        btnClass === 'correct'
-                          ? '#c8e6c9'
-                          : btnClass === 'wrong'
-                          ? '#ffcdd2'
-                          : '#fff',
-                      color: 'black', // Always black text
-                      fontWeight: '500',
-                    }}
-                  >
-                    {decodeHtml(a)}
-                  </button>
-                </li>
-              );
-            })}
-          </ul>
-        </Card>
-      ))}
-
-      {/* Review Section */}
-      {showReview && (
-        <div style={{ marginTop: '20px', textAlign: 'center' }}>
-          <h3>🎯 Quiz Complete!</h3>
-          <p>
-            Final Score: {score} / {totalQuestions}
+          <p style={{ margin: 0, fontWeight: 'bold' }}>
+            Score: {score} | Best: {highScore}
           </p>
           <button
-            onClick={fetchQuestions}
+            onClick={resetHighScore}
             style={{
-              background: '#007bff',
+              background: '#6c757d',
               color: '#fff',
-              padding: '10px 16px',
+              padding: '6px 10px',
               border: 'none',
-              borderRadius: '8px',
+              borderRadius: '6px',
               cursor: 'pointer',
             }}
           >
-            Play Again
+            Reset High Score
+          </button>
+          <button
+            onClick={() => setShowReview(true)}
+            disabled={!allAnswered || showReview}
+            style={{
+              background: allAnswered ? '#007bff' : '#ccc',
+              color: '#fff',
+              padding: '6px 12px',
+              border: 'none',
+              borderRadius: '6px',
+              cursor: allAnswered && !showReview ? 'pointer' : 'not-allowed',
+            }}
+          >
+            Review Answers
           </button>
         </div>
-      )}
-    </div>
+
+        {/* Quiz Cards */}
+        {questions.map((q, idx) => (
+          <Card key={idx} title={`Q${idx + 1}: ${decodeHtml(q.question)}`}>
+            <ul>
+              {q.answers.map((a) => {
+                const isPicked = q.picked === a;
+                const isCorrect = a === q.correct_answer;
+                let btnClass = '';
+
+                if (showReview) {
+                  btnClass = isCorrect
+                    ? 'correct'
+                    : isPicked
+                    ? 'wrong'
+                    : 'neutral';
+                } else if (isPicked) {
+                  btnClass = isCorrect ? 'correct' : 'wrong';
+                }
+
+                return (
+                  <li key={a}>
+                    <button
+                      disabled={!!q.picked || showReview}
+                      onClick={() => pick(idx, a)}
+                      style={{
+                        margin: '5px',
+                        padding: '8px 12px',
+                        borderRadius: '6px',
+                        cursor: q.picked || showReview ? 'default' : 'pointer',
+                        border:
+                          btnClass === 'correct'
+                            ? '2px solid green'
+                            : btnClass === 'wrong'
+                            ? '2px solid red'
+                            : '1px solid #ccc',
+                        background:
+                          btnClass === 'correct'
+                            ? '#c8e6c9'
+                            : btnClass === 'wrong'
+                            ? '#ffcdd2'
+                            : '#fff',
+                        color: 'black',
+                        fontWeight: '500',
+                      }}
+                    >
+                      {decodeHtml(a)}
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          </Card>
+        ))}
+
+        {/* Review Section */}
+        {showReview && (
+          <div style={{ marginTop: '20px', textAlign: 'center' }}>
+            <h3>🎯 Quiz Complete!</h3>
+            <p>
+              Final Score: {score} / {totalQuestions}
+            </p>
+            <p>Best Score: {highScore}</p>
+            <button
+              onClick={fetchQuestions}
+              style={{
+                background: '#007bff',
+                color: '#fff',
+                padding: '10px 16px',
+                border: 'none',
+                borderRadius: '8px',
+                cursor: 'pointer',
+              }}
+            >
+              Play Again
+            </button>
+          </div>
+        )}
+      </div>
     </>
   );
 }
-
diff --git a/vite.config.js.timestamp-1761116311330-9bd7f4dd0b574.mjs b/vite.config.js.timestamp-1761116311330-9bd7f4dd0b574.mjs
new file mode 100644
index 0000000..a9084ad
--- /dev/null
+++ b/vite.config.js.timestamp-1761116311330-9bd7f4dd0b574.mjs
@@ -0,0 +1,10 @@
+// vite.config.js
+import { defineConfig } from "file:///Users/venishakalola/Desktop/hacktoberfest/react-verse/node_modules/vite/dist/node/index.js";
+import react from "file:///Users/venishakalola/Desktop/hacktoberfest/react-verse/node_modules/@vitejs/plugin-react/dist/index.js";
+var vite_config_default = defineConfig({
+  plugins: [react()]
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvdmVuaXNoYWthbG9sYS9EZXNrdG9wL2hhY2t0b2JlcmZlc3QvcmVhY3QtdmVyc2VcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIi9Vc2Vycy92ZW5pc2hha2Fsb2xhL0Rlc2t0b3AvaGFja3RvYmVyZmVzdC9yZWFjdC12ZXJzZS92aXRlLmNvbmZpZy5qc1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvdmVuaXNoYWthbG9sYS9EZXNrdG9wL2hhY2t0b2JlcmZlc3QvcmVhY3QtdmVyc2Uvdml0ZS5jb25maWcuanNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlJztcbmltcG9ydCByZWFjdCBmcm9tICdAdml0ZWpzL3BsdWdpbi1yZWFjdCc7XG5cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtyZWFjdCgpXSxcbn0pO1xuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUFvVixTQUFTLG9CQUFvQjtBQUNqWCxPQUFPLFdBQVc7QUFFbEIsSUFBTyxzQkFBUSxhQUFhO0FBQUEsRUFDMUIsU0FBUyxDQUFDLE1BQU0sQ0FBQztBQUNuQixDQUFDOyIsCiAgIm5hbWVzIjogW10KfQo=