fix(nav): improve navigation for authorization routes

components/Header.tsx

@@ -46,9 +46,9 @@ const Header = ({
   const seconds = timeRemaining % 60;
 
   return (
-    <header className={styles.header}>
+    <header className="bg-[#113768] h-[100px] w-full pt-7 px-6 flex items-center justify-between sticky top-0 z-50">
       {displayUser && (
-        <div className={styles.profile}>
+        <div className="flex items-center gap-3">
           <Avatar className="bg-gray-200 w-10 h-10">
             <AvatarFallback className="flex items-center justify-center h-10 text-lg">
               {user?.username ? (
@@ -58,24 +58,26 @@ const Header = ({
               )}
             </AvatarFallback>
           </Avatar>
-          <span className={styles.text}>
+          <span className="text-md font-bold text-white">
             Hello, {user?.username ? user.username.split(" ")[0] : "User"}
           </span>
         </div>
       )}
 
       {displayTabTitle && (
-        <div className={styles.profile}>
-          <button onClick={handleBackClick} className={styles.iconButton}>
+        <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={styles.text}>{displayTabTitle}</span>
+          <span className="text-md font-bold text-white">
+            {displayTabTitle}
+          </span>
         </div>
       )}
 
       {displaySubject && (
-        <div className={styles.profile}>
-          <span className={styles.text}>{displaySubject}</span>
+        <div className="flex items-center gap-3">
+          <span className="text-md font-bold text-white">{displaySubject}</span>
         </div>
       )}