fix(ui): fix ui icons and readability

components/ExamGuard.tsx

@@ -1,25 +0,0 @@
-"use client";
-
-import { useNavStore } from "@/stores/navStore";
-import { useRouter, usePathname } from "next/navigation";
-import { useEffect } from "react";
-
-export function ExamGuard({ children }: { children: React.ReactNode }) {
-  const { examSubmitted, resultsDone } = useNavStore();
-  const router = useRouter();
-  const pathname = usePathname();
-
-  useEffect(() => {
-    // Prevent access to /exam after submission
-    if (pathname === "/exam/exam-screen" && examSubmitted) {
-      router.replace("/results");
-    }
-
-    // Prevent access to /results after done
-    if (pathname === "/exam/results" && resultsDone) {
-      router.replace("/categories"); // or wherever you want them to go
-    }
-  }, [pathname, examSubmitted, resultsDone, router]);
-
-  return <>{children}</>;
-}

components/Header.tsx

@@ -2,7 +2,7 @@
 
 import React from "react";
 import { useRouter } from "next/navigation";
-import { BadgeCheck, ChevronLeft, Layers } from "lucide-react";
+import { ChevronLeft, Layers, RefreshCcw } from "lucide-react";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { useModal } from "@/context/ModalContext";
 import { useAuthStore } from "@/stores/authStore";
@@ -66,13 +66,18 @@ const Header = ({
       )}
 
       {displayTabTitle && (
-        <div className="flex items-center gap-3">
-          <button onClick={handleBackClick} className="bg-none border-none p-1">
-            <ChevronLeft size={24} color="white" />
-          </button>
-          <span className="text-md font-bold text-white">
-            {displayTabTitle}
-          </span>
+        <div className="flex justify-between items-center w-full">
+          <div className="flex items-center gap-3">
+            <button
+              onClick={handleBackClick}
+              className="bg-none border-none p-1"
+            >
+              <ChevronLeft size={24} color="white" />
+            </button>
+            <span className="text-md font-bold text-white">
+              {displayTabTitle}
+            </span>
+          </div>
         </div>
       )}