fix(ui): fix exam screen layout, bottom navigation tabs

app/exam/[id]/page.tsx

@@ -4,6 +4,7 @@ import { useParams, useRouter, useSearchParams } from "next/navigation";
 import React, { useEffect, useState, useCallback, useReducer } from "react";
 import { useTimer } from "@/context/TimerContext";
 import { API_URL, getToken } from "@/lib/auth";
+import Header from "@/components/Header";
 
 // Types
 interface Question {
@@ -31,22 +32,22 @@ interface AnswerAction {
 // Components
 const QuestionItem = React.memo<QuestionItemProps>(
   ({ question, selectedAnswer, handleSelect }) => (
-    <div className="question-container">
-      <h3 className="question-text">
+    <div className="border border-[#8abdff]/50 rounded-2xl p-4">
+      <h3 className="text-xl font-medium mb-[20px]">
         {question.id}. {question.question}
       </h3>
-      <div className="options-container">
+      <div className="flex flex-col gap-4 items-start">
         {Object.entries(question.options).map(([key, value]) => (
           <button
             key={key}
-            className={`option-button ${
-              selectedAnswer === key ? "selected-option" : ""
-            }`}
+            className="flex items-center gap-3"
             onClick={() => handleSelect(question.id, key)}
           >
             <span
-              className={`option-text ${
-                selectedAnswer === key ? "selected-option-text" : ""
+              className={`flex items-center rounded-full border px-1.5 ${
+                selectedAnswer === key
+                  ? "text-white bg-[#113768] border-[#113768]"
+                  : ""
               }`}
             >
               {key.toUpperCase()}
@@ -196,13 +197,20 @@ export default function ExamPage() {
 
   return (
     <div className="min-h-screen bg-gray-50">
+      <Header
+        examDuration={time}
+        displayTabTitle={null}
+        image={undefined}
+        displayUser={undefined}
+        displaySubject={undefined}
+      />
       <div className="container mx-auto px-4 py-8">
         {loading ? (
           <div className="flex items-center justify-center min-h-64">
             <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-900"></div>
           </div>
         ) : (
-          <div className="space-y-6">
+          <div className="space-y-6 mb-20">
             {questions?.map((question) => (
               <QuestionItem
                 key={question.id}