fix(nav): improve redirection logic

app/(tabs)/categories/subjects/page.tsx

@@ -8,6 +8,7 @@ import BackgroundWrapper from "@/components/BackgroundWrapper";
 import { API_URL, getToken } from "@/lib/auth";
 import { Loader, RefreshCw, Star, StarHalf } from "lucide-react";
 import { useAuthStore } from "@/stores/authStore";
+import { FaStar } from "react-icons/fa";
 
 type Subject = {
   subject_id: string;
@@ -110,11 +111,11 @@ export default function PaperScreen() {
                       className="w-full border-1 border-[#B0C2DA] py-4 rounded-[10px] px-6 space-y-2 text-left hover:bg-gray-50 transition-colors"
                     >
                       <h3 className="text-xl font-medium">{subject.name}</h3>
-                      <p className="text-md font-normal flex">
+                      <p className="text-xl font-medium text-[#113768] flex items-center gap-1">
-                        <Star size={17} />
+                        <FaStar size={15} />
-                        <Star size={17} />
+                        <FaStar size={15} />
-                        <Star size={17} />
+                        <FaStar size={15} />
-                        <Star size={17} />
+                        <FaStar size={15} />
                       </p>
                     </button>
                   </div>

app/exam/exam-screen/page.tsx

@@ -57,7 +57,8 @@ export default function ExamPage() {
 
   if (isSubmitting) {
     return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+      <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-900 mb-4"></div>
         <p className="text-lg font-medium text-gray-900">Submitting exam...</p>
       </div>
     );
@@ -118,14 +119,7 @@ export default function ExamPage() {
               disabled={isSubmitting}
               className="flex-1 bg-blue-900 text-white p-6 font-bold text-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-blue-800 transition-colors flex justify-center items-center gap-2"
             >
-              {isSubmitting ? (
+              Submit
-                <>
-                  <span className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></span>
-                  Submitting...
-                </>
-              ) : (
-                "Submit"
-              )}
             </button>
           </div>
         </div>

app/exam/results/page.tsx

@@ -11,10 +11,16 @@ import { getResultViews } from "@/lib/gallery-views";
 export default function ResultsPage() {
   const router = useRouter();
   const { result, clearResult, setStatus, status } = useExamStore();
+
+  function handleBackToHome() {
+    clearResult();
+    router.replace("/categories");
+  }
+
   useEffect(() => {
     const handlePopState = () => {
       if (status !== "finished") {
-        router.replace(`/categories`);
+        handleBackToHome();
       }
     };
 
@@ -32,11 +38,6 @@ export default function ResultsPage() {
     );
   }
 
-  const handleBackToHome = () => {
-    clearResult();
-    router.replace("/categories");
-  };
-
   const views = getResultViews(result);
 
   return (

components/Header.tsx

@@ -3,7 +3,6 @@
 import React from "react";
 import { useRouter } from "next/navigation";
 import { BadgeCheck, ChevronLeft, Layers } from "lucide-react";
-import styles from "@/css/Header.module.css";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { useModal } from "@/context/ModalContext";
 import { useAuthStore } from "@/stores/authStore";
@@ -84,33 +83,48 @@ const Header = ({
 
       {/* Exam timer header */}
       {timeRemaining > 0 && (
-        <div className={styles.examHeader}>
+        <div className="flex justify-between w-full items-center">
-          <button onClick={showExitDialog} className={styles.iconButton}>
+          <button
+            onClick={showExitDialog}
+            className="bg-none border-none cursor-pointer p-1 flex items-center justify-center"
+          >
             <ChevronLeft size={30} color="white" />
           </button>
 
-          <div className={styles.timer}>
+          <div className="w-40 h-14 bg-white flex justify-around items-center rounded-2xl ">
-            <div className={styles.timeUnit}>
+            <div className="flex flex-col items-center w-full">
-              <span className={styles.timeValue}>
+              <span className="font-medium text-md text-[#082E5E]">
                 {String(hours).padStart(2, "0")}
               </span>
-              <span className={styles.timeLabel}>Hrs</span>
+              <span className="font-medium text-[12px] text-[#082E5E]">
+                Hrs
+              </span>
             </div>
-            <div className={styles.timeUnit}>
+            <div className="flex flex-col items-center w-full">
-              <span className={styles.timeValue}>
+              <span className="font-medium text-md text-[#082E5E]">
                 {String(minutes).padStart(2, "0")}
               </span>
-              <span className={styles.timeLabel}>Mins</span>
+              <span className="font-medium text-[12px] text-[#082E5E]">
+                Mins
+              </span>
             </div>
-            <div className={styles.timeUnit} style={{ borderRight: "none" }}>
+            <div
-              <span className={styles.timeValue}>
+              className="flex flex-col items-center w-full"
+              style={{ borderRight: "none" }}
+            >
+              <span className="font-medium text-md text-[#082E5E]">
                 {String(seconds).padStart(2, "0")}
               </span>
-              <span className={styles.timeLabel}>Secs</span>
+              <span className="font-medium text-[12px] text-[#082E5E]">
+                Secs
+              </span>
             </div>
           </div>
 
-          <button onClick={open} className={`${styles.iconButton}`}>
+          <button
+            onClick={open}
+            className="bg-none border-none cursor-pointer p-1 flex items-center justify-center"
+          >
             <Layers size={30} color="white" />
           </button>
         </div>