diff --git a/app/auth/register/page.tsx b/app/auth/register/page.tsx
index f362eedb..ba17d23a 100644
--- a/app/auth/register/page.tsx
+++ b/app/auth/register/page.tsx
@@ -24,6 +24,8 @@ import {
   MousePointer2,
   Fingerprint,
 } from "lucide-react";
+import { getActivityDescription, useAuthRouteProtection } from "@/lib/auth-utils";
+import AuthLoader from "@/components/auth/AuthLoader";
 
 export default function Register() {
   const [name, setName] = useState("");
@@ -38,6 +40,7 @@ export default function Register() {
   const [focusedField, setFocusedField] = useState<string | null>(null);
   const router = useRouter();
   const { toast } = useToast();
+  const { shouldRedirect, loading } = useAuthRouteProtection();
 
   // Animation mount effect
   useEffect(() => {
@@ -156,7 +159,9 @@ export default function Register() {
     confirmPassword.trim() &&
     password === confirmPassword &&
     password.length >= 6;
-
+  if (loading || shouldRedirect) {
+    return <AuthLoader shouldRedirect={shouldRedirect} />;
+  }
   return (
     <div className="min-h-screen flex items-center justify-center bg-background relative overflow-hidden py-8">
       {/* Enhanced background elements with parallax effect */}
@@ -176,9 +181,8 @@ export default function Register() {
       />
 
       <div
-        className={`w-full max-w-md mx-4 relative z-10 transition-all duration-1000 ease-out ${
-          mounted ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
-        }`}
+        className={`w-full max-w-md mx-4 relative z-10 transition-all duration-1000 ease-out ${mounted ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
+          }`}
       >
         {/* Enhanced card with advanced glass effect and magnetic cursor */}
         <div className="glass-effect p-6 sm:p-8 rounded-2xl shadow-2xl border border-yellow-400/20 relative overflow-hidden group hover:border-yellow-400/40 transition-all duration-500 hover:shadow-3xl backdrop-blur-xl">
@@ -205,11 +209,10 @@ export default function Register() {
           <div className="relative z-10">
             {/* Enhanced header with advanced animations */}
             <div
-              className={`text-center mb-6 sm:mb-8 transition-all duration-700 delay-200 ${
-                mounted
+              className={`text-center mb-6 sm:mb-8 transition-all duration-700 delay-200 ${mounted
                   ? "opacity-100 translate-y-0"
                   : "opacity-0 translate-y-4"
-              }`}
+                }`}
             >
               {/* Professional badge with hover effects */}
               <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-effect mb-4 badge-bg group hover:scale-105 transition-all duration-300 cursor-pointer">
@@ -236,24 +239,21 @@ export default function Register() {
             <form onSubmit={handleSubmit} className="space-y-4 sm:space-y-5">
               {/* Enhanced Name field with advanced interactions */}
               <div
-                className={`space-y-2 transition-all duration-500 delay-300 ${
-                  mounted
+                className={`space-y-2 transition-all duration-500 delay-300 ${mounted
                     ? "opacity-100 translate-y-0"
                     : "opacity-0 translate-y-4"
-                }`}
+                  }`}
               >
                 <Label
                   htmlFor="name"
-                  className={`text-sm font-medium flex items-center gap-2 professional-text transition-all duration-300 ${
-                    focusedField === "name" ? "text-yellow-600 scale-105" : ""
-                  }`}
+                  className={`text-sm font-medium flex items-center gap-2 professional-text transition-all duration-300 ${focusedField === "name" ? "text-yellow-600 scale-105" : ""
+                    }`}
                 >
                   <User
-                    className={`h-4 w-4 text-muted-foreground transition-all duration-300 ${
-                      focusedField === "name"
+                    className={`h-4 w-4 text-muted-foreground transition-all duration-300 ${focusedField === "name"
                         ? "text-yellow-500 animate-pulse"
                         : ""
-                    }`}
+                      }`}
                   />
                   Full Name
                   {name && (
@@ -274,41 +274,36 @@ export default function Register() {
                     disabled={isLoading}
                   />
                   <div
-                    className={`absolute inset-0 rounded-md border pointer-events-none transition-all duration-300 ${
-                      focusedField === "name"
+                    className={`absolute inset-0 rounded-md border pointer-events-none transition-all duration-300 ${focusedField === "name"
                         ? "border-yellow-400/40 shadow-lg shadow-yellow-400/20"
                         : "border-yellow-400/20"
-                    }`}
+                      }`}
                   ></div>
                   {/* Progress indicator */}
                   <div
-                    className={`absolute bottom-0 left-0 h-0.5 bg-gradient-to-r from-yellow-400 to-blue-500 transition-all duration-300 ${
-                      name ? "w-full" : "w-0"
-                    }`}
+                    className={`absolute bottom-0 left-0 h-0.5 bg-gradient-to-r from-yellow-400 to-blue-500 transition-all duration-300 ${name ? "w-full" : "w-0"
+                      }`}
                   ></div>
                 </div>
               </div>
 
               {/* Enhanced Email field with validation animations */}
               <div
-                className={`space-y-2 transition-all duration-500 delay-400 ${
-                  mounted
+                className={`space-y-2 transition-all duration-500 delay-400 ${mounted
                     ? "opacity-100 translate-y-0"
                     : "opacity-0 translate-y-4"
-                }`}
+                  }`}
               >
                 <Label
                   htmlFor="email"
-                  className={`text-sm font-medium flex items-center gap-2 professional-text transition-all duration-300 ${
-                    focusedField === "email" ? "text-yellow-600 scale-105" : ""
-                  }`}
+                  className={`text-sm font-medium flex items-center gap-2 professional-text transition-all duration-300 ${focusedField === "email" ? "text-yellow-600 scale-105" : ""
+                    }`}
                 >
                   <Mail
-                    className={`h-4 w-4 text-muted-foreground transition-all duration-300 ${
-                      focusedField === "email"
+                    className={`h-4 w-4 text-muted-foreground transition-all duration-300 ${focusedField === "email"
                         ? "text-yellow-500 animate-pulse"
                         : ""
-                    }`}
+                      }`}
                   />
                   Email Address
                   {email && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) && (
@@ -341,7 +336,7 @@ export default function Register() {
                         : email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) && email.length > 0
                         ? "border-red-400/20"
                         : "border-yellow-400/20"
-                    }`}
+                      }`}
                   ></div>
                   {/* Progress indicator */}
                   <div
@@ -351,7 +346,7 @@ export default function Register() {
                         : email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) && email.length > 0
                         ? "w-full bg-gradient-to-r from-red-400 to-orange-500"
                         : email
-                        ? "w-1/2 bg-gradient-to-r from-yellow-400 to-blue-500"
+                        ? "w-1/2"
                         : "w-0"
                     }`}
                   ></div>
@@ -370,26 +365,23 @@ export default function Register() {
 
               {/* Enhanced Password field with strength indicator */}
               <div
-                className={`space-y-2 transition-all duration-500 delay-500 ${
-                  mounted
+                className={`space-y-2 transition-all duration-500 delay-500 ${mounted
                     ? "opacity-100 translate-y-0"
                     : "opacity-0 translate-y-4"
-                }`}
+                  }`}
               >
                 <Label
                   htmlFor="password"
-                  className={`text-sm font-medium flex items-center gap-2 professional-text transition-all duration-300 ${
-                    focusedField === "password"
+                  className={`text-sm font-medium flex items-center gap-2 professional-text transition-all duration-300 ${focusedField === "password"
                       ? "text-yellow-600 scale-105"
                       : ""
-                  }`}
+                    }`}
                 >
                   <Lock
-                    className={`h-4 w-4 text-muted-foreground transition-all duration-300 ${
-                      focusedField === "password"
+                    className={`h-4 w-4 text-muted-foreground transition-all duration-300 ${focusedField === "password"
                         ? "text-yellow-500 animate-pulse"
                         : ""
-                    }`}
+                      }`}
                   />
                   Password
                   {passwordStrength >= 3 && (
@@ -425,11 +417,10 @@ export default function Register() {
                     )}
                   </button>
                   <div
-                    className={`absolute inset-0 rounded-md border pointer-events-none transition-all duration-300 ${
-                      focusedField === "password"
+                    className={`absolute inset-0 rounded-md border pointer-events-none transition-all duration-300 ${focusedField === "password"
                         ? "border-yellow-400/40 shadow-lg shadow-yellow-400/20"
                         : "border-yellow-400/20"
-                    }`}
+                      }`}
                   ></div>
                 </div>
 
@@ -440,26 +431,24 @@ export default function Register() {
                       {[...Array(5)].map((_, i) => (
                         <div
                           key={i}
-                          className={`h-1 flex-1 rounded-full transition-all duration-300 ${
-                            i < passwordStrength
+                          className={`h-1 flex-1 rounded-full transition-all duration-300 ${i < passwordStrength
                               ? i < 2
                                 ? "bg-red-400"
                                 : i < 4
-                                ? "bg-yellow-400"
-                                : "bg-green-400"
+                                  ? "bg-yellow-400"
+                                  : "bg-green-400"
                               : "bg-gray-200 dark:bg-gray-700"
-                          }`}
+                            }`}
                         />
                       ))}
                     </div>
                     <p
-                      className={`text-xs transition-all duration-300 ${
-                        passwordStrength < 2
+                      className={`text-xs transition-all duration-300 ${passwordStrength < 2
                           ? "text-red-500"
                           : passwordStrength < 4
-                          ? "text-yellow-500"
-                          : "text-green-500"
-                      }`}
+                            ? "text-yellow-500"
+                            : "text-green-500"
+                        }`}
                     >
                       {passwordStrength < 2 && "Weak password"}
                       {passwordStrength >= 2 &&
@@ -473,26 +462,23 @@ export default function Register() {
 
               {/* Enhanced Confirm Password field with advanced validation */}
               <div
-                className={`space-y-2 transition-all duration-500 delay-600 ${
-                  mounted
+                className={`space-y-2 transition-all duration-500 delay-600 ${mounted
                     ? "opacity-100 translate-y-0"
                     : "opacity-0 translate-y-4"
-                }`}
+                  }`}
               >
                 <Label
                   htmlFor="confirmPassword"
-                  className={`text-sm font-medium flex items-center gap-2 professional-text transition-all duration-300 ${
-                    focusedField === "confirmPassword"
+                  className={`text-sm font-medium flex items-center gap-2 professional-text transition-all duration-300 ${focusedField === "confirmPassword"
                       ? "text-yellow-600 scale-105"
                       : ""
-                  }`}
+                    }`}
                 >
                   <Shield
-                    className={`h-4 w-4 text-muted-foreground transition-all duration-300 ${
-                      focusedField === "confirmPassword"
+                    className={`h-4 w-4 text-muted-foreground transition-all duration-300 ${focusedField === "confirmPassword"
                         ? "text-yellow-500 animate-pulse"
                         : ""
-                    }`}
+                      }`}
                   />
                   Confirm Password
                   {confirmPassword && password === confirmPassword && (
@@ -509,11 +495,10 @@ export default function Register() {
                     onBlur={() => setFocusedField(null)}
                     placeholder="Confirm your password"
                     required
-                    className={`glass-effect focus:ring-yellow-400/20 pl-4 pr-12 py-3 text-sm sm:text-base transition-all duration-300 group-hover:shadow-lg ${
-                      confirmPassword && password !== confirmPassword
+                    className={`glass-effect focus:ring-yellow-400/20 pl-4 pr-12 py-3 text-sm sm:text-base transition-all duration-300 group-hover:shadow-lg ${confirmPassword && password !== confirmPassword
                         ? "border-red-400/60 focus:border-red-400/80 hover:border-red-400/70"
                         : "border-yellow-400/30 focus:border-yellow-400/60 hover:border-yellow-400/50"
-                    }`}
+                      }`}
                     disabled={isLoading}
                   />
                   <button
@@ -534,25 +519,23 @@ export default function Register() {
                     )}
                   </button>
                   <div
-                    className={`absolute inset-0 rounded-md border pointer-events-none transition-all duration-300 ${
-                      focusedField === "confirmPassword"
+                    className={`absolute inset-0 rounded-md border pointer-events-none transition-all duration-300 ${focusedField === "confirmPassword"
                         ? confirmPassword && password !== confirmPassword
                           ? "border-red-400/40 shadow-lg shadow-red-400/20"
                           : "border-yellow-400/40 shadow-lg shadow-yellow-400/20"
                         : confirmPassword && password !== confirmPassword
-                        ? "border-red-400/20"
-                        : "border-yellow-400/20"
-                    }`}
+                          ? "border-red-400/20"
+                          : "border-yellow-400/20"
+                      }`}
                   ></div>
                   {/* Progress indicator */}
                   <div
-                    className={`absolute bottom-0 left-0 h-0.5 transition-all duration-300 ${
-                      confirmPassword && password === confirmPassword
+                    className={`absolute bottom-0 left-0 h-0.5 transition-all duration-300 ${confirmPassword && password === confirmPassword
                         ? "w-full bg-gradient-to-r from-green-400 to-blue-500"
                         : confirmPassword && password !== confirmPassword
-                        ? "w-full bg-gradient-to-r from-red-400 to-orange-500"
-                        : "w-0"
-                    }`}
+                          ? "w-full bg-gradient-to-r from-red-400 to-orange-500"
+                          : "w-0"
+                      }`}
                   ></div>
                 </div>
 
@@ -576,11 +559,10 @@ export default function Register() {
 
               {/* Enhanced submit button with advanced animations */}
               <div
-                className={`transition-all duration-500 delay-700 ${
-                  mounted
+                className={`transition-all duration-500 delay-700 ${mounted
                     ? "opacity-100 translate-y-0"
                     : "opacity-0 translate-y-4"
-                }`}
+                  }`}
               >
                 <Button
                   type="submit"
@@ -635,11 +617,10 @@ export default function Register() {
 
             {/* Enhanced footer with advanced styling */}
             <div
-              className={`mt-6 sm:mt-8 text-center transition-all duration-500 delay-800 ${
-                mounted
+              className={`mt-6 sm:mt-8 text-center transition-all duration-500 delay-800 ${mounted
                   ? "opacity-100 translate-y-0"
                   : "opacity-0 translate-y-4"
-              }`}
+                }`}
             >
               <div className="glass-effect p-4 rounded-xl border border-yellow-400/10 hover:border-yellow-400/20 transition-all duration-300 group hover:scale-105">
                 <p className="professional-text text-sm text-muted-foreground mb-3">
@@ -662,11 +643,10 @@ export default function Register() {
 
             {/* Enhanced navigation link */}
             <div
-              className={`mt-4 text-center transition-all duration-500 delay-900 ${
-                mounted
+              className={`mt-4 text-center transition-all duration-500 delay-900 ${mounted
                   ? "opacity-100 translate-y-0"
                   : "opacity-0 translate-y-4"
-              }`}
+                }`}
             >
               <Link
                 href="/"
diff --git a/app/auth/signin/page.tsx b/app/auth/signin/page.tsx
index 9caad166..abdeebc9 100644
--- a/app/auth/signin/page.tsx
+++ b/app/auth/signin/page.tsx
@@ -8,7 +8,7 @@ import { Label } from "@/components/ui/label";
 import { useToast } from "@/hooks/use-toast";
 import Link from "next/link";
 import { createClient } from "@/lib/supabase/client";
-import { getActivityDescription } from "@/lib/auth-utils";
+import { getActivityDescription, useAuthRouteProtection } from "@/lib/auth-utils";
 import {
   Sparkles,
   Zap,
@@ -25,6 +25,7 @@ import {
   Fingerprint,
   Shield,
 } from "lucide-react";
+import AuthLoader from "@/components/auth/AuthLoader";
 
 export default function SignIn() {
   const [email, setEmail] = useState("");
@@ -38,6 +39,7 @@ export default function SignIn() {
   const router = useRouter();
   const { toast } = useToast();
   const supabase = createClient();
+  const { shouldRedirect, loading } = useAuthRouteProtection();
 
   // Animation mount effect and URL parameter handling
   useEffect(() => {
@@ -93,6 +95,11 @@ export default function SignIn() {
     }
   };
 
+  if (loading || shouldRedirect) {
+    return <AuthLoader shouldRedirect={shouldRedirect} />;
+  }
+
+
   return (
     <div className="min-h-screen flex items-center justify-center bg-background relative overflow-hidden py-8">
       {/* Enhanced background elements with parallax effect */}
@@ -112,9 +119,8 @@ export default function SignIn() {
       />
 
       <div
-        className={`w-full max-w-md mx-4 relative z-10 transition-all duration-1000 ease-out ${
-          mounted ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
-        }`}
+        className={`w-full max-w-md mx-4 relative z-10 transition-all duration-1000 ease-out ${mounted ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
+          }`}
       >
         {/* Enhanced card with advanced glass effect */}
         <div className="glass-effect p-6 sm:p-8 rounded-2xl shadow-2xl border border-yellow-400/20 relative overflow-hidden group hover:border-yellow-400/40 transition-all duration-500 hover:shadow-3xl backdrop-blur-xl">
@@ -141,11 +147,10 @@ export default function SignIn() {
           <div className="relative z-10">
             {/* Enhanced header with advanced animations */}
             <div
-              className={`text-center mb-6 sm:mb-8 transition-all duration-700 delay-200 ${
-                mounted
+              className={`text-center mb-6 sm:mb-8 transition-all duration-700 delay-200 ${mounted
                   ? "opacity-100 translate-y-0"
                   : "opacity-0 translate-y-4"
-              }`}
+                }`}
             >
               {/* Professional badge with hover effects */}
               <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-effect mb-4 badge-bg group hover:scale-105 transition-all duration-300 cursor-pointer">
@@ -174,24 +179,21 @@ export default function SignIn() {
             <form onSubmit={handleSubmit} className="space-y-5 sm:space-y-6">
               {/* Enhanced email field with advanced interactions */}
               <div
-                className={`space-y-2 transition-all duration-500 delay-300 ${
-                  mounted
+                className={`space-y-2 transition-all duration-500 delay-300 ${mounted
                     ? "opacity-100 translate-y-0"
                     : "opacity-0 translate-y-4"
-                }`}
+                  }`}
               >
                 <Label
                   htmlFor="email"
-                  className={`text-sm font-medium flex items-center gap-2 professional-text transition-all duration-300 ${
-                    focusedField === "email" ? "text-yellow-600 scale-105" : ""
-                  }`}
+                  className={`text-sm font-medium flex items-center gap-2 professional-text transition-all duration-300 ${focusedField === "email" ? "text-yellow-600 scale-105" : ""
+                    }`}
                 >
                   <Mail
-                    className={`h-4 w-4 text-muted-foreground transition-all duration-300 ${
-                      focusedField === "email"
+                    className={`h-4 w-4 text-muted-foreground transition-all duration-300 ${focusedField === "email"
                         ? "text-yellow-500 animate-pulse"
                         : ""
-                    }`}
+                      }`}
                   />
                   Email Address
                   {email && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) && (
@@ -224,7 +226,7 @@ export default function SignIn() {
                         : email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) && email.length > 0
                         ? "border-red-400/20"
                         : "border-yellow-400/20"
-                    }`}
+                      }`}
                   ></div>
                   {/* Progress indicator */}
                   <div
@@ -234,7 +236,7 @@ export default function SignIn() {
                         : email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) && email.length > 0
                         ? "w-full bg-gradient-to-r from-red-400 to-orange-500"
                         : email
-                        ? "w-1/2 bg-gradient-to-r from-yellow-400 to-blue-500"
+                        ? "w-1/2"
                         : "w-0"
                     }`}
                   ></div>
@@ -253,26 +255,23 @@ export default function SignIn() {
 
               {/* Enhanced password field with better UX */}
               <div
-                className={`space-y-2 transition-all duration-500 delay-400 ${
-                  mounted
+                className={`space-y-2 transition-all duration-500 delay-400 ${mounted
                     ? "opacity-100 translate-y-0"
                     : "opacity-0 translate-y-4"
-                }`}
+                  }`}
               >
                 <Label
                   htmlFor="password"
-                  className={`text-sm font-medium flex items-center gap-2 professional-text transition-all duration-300 ${
-                    focusedField === "password"
+                  className={`text-sm font-medium flex items-center gap-2 professional-text transition-all duration-300 ${focusedField === "password"
                       ? "text-yellow-600 scale-105"
                       : ""
-                  }`}
+                    }`}
                 >
                   <Lock
-                    className={`h-4 w-4 text-muted-foreground transition-all duration-300 ${
-                      focusedField === "password"
+                    className={`h-4 w-4 text-muted-foreground transition-all duration-300 ${focusedField === "password"
                         ? "text-yellow-500 animate-pulse"
                         : ""
-                    }`}
+                      }`}
                   />
                   Password
                   {password && password.length >= 6 && (
@@ -309,32 +308,29 @@ export default function SignIn() {
                     )}
                   </button>
                   <div
-                    className={`absolute inset-0 rounded-md border pointer-events-none transition-all duration-300 ${
-                      focusedField === "password"
+                    className={`absolute inset-0 rounded-md border pointer-events-none transition-all duration-300 ${focusedField === "password"
                         ? "border-yellow-400/40 shadow-lg shadow-yellow-400/20"
                         : "border-yellow-400/20"
-                    }`}
+                      }`}
                   ></div>
                   {/* Progress indicator */}
                   <div
-                    className={`absolute bottom-0 left-0 h-0.5 bg-gradient-to-r from-yellow-400 to-blue-500 transition-all duration-300 ${
-                      password && password.length >= 6
+                    className={`absolute bottom-0 left-0 h-0.5 bg-gradient-to-r from-yellow-400 to-blue-500 transition-all duration-300 ${password && password.length >= 6
                         ? "w-full"
                         : password
-                        ? "w-1/2"
-                        : "w-0"
-                    }`}
+                          ? "w-1/2"
+                          : "w-0"
+                      }`}
                   ></div>
                 </div>
               </div>
 
               {/* Enhanced submit button with advanced animations */}
               <div
-                className={`transition-all duration-500 delay-500 ${
-                  mounted
+                className={`transition-all duration-500 delay-500 ${mounted
                     ? "opacity-100 translate-y-0"
                     : "opacity-0 translate-y-4"
-                }`}
+                  }`}
               >
                 <Button
                   type="submit"
@@ -389,11 +385,10 @@ export default function SignIn() {
 
             {/* Enhanced footer with advanced styling */}
             <div
-              className={`mt-6 sm:mt-8 text-center transition-all duration-500 delay-600 ${
-                mounted
+              className={`mt-6 sm:mt-8 text-center transition-all duration-500 delay-600 ${mounted
                   ? "opacity-100 translate-y-0"
                   : "opacity-0 translate-y-4"
-              }`}
+                }`}
             >
               <div className="glass-effect p-4 rounded-xl border border-yellow-400/10 hover:border-yellow-400/20 transition-all duration-300 group hover:scale-105">
                 <p className="professional-text text-sm text-muted-foreground mb-3">
@@ -416,11 +411,10 @@ export default function SignIn() {
 
             {/* Enhanced navigation link */}
             <div
-              className={`mt-4 text-center transition-all duration-500 delay-700 ${
-                mounted
+              className={`mt-4 text-center transition-all duration-500 delay-700 ${mounted
                   ? "opacity-100 translate-y-0"
                   : "opacity-0 translate-y-4"
-              }`}
+                }`}
             >
               <Link
                 href="/"
diff --git a/components/auth/AuthLoader.tsx b/components/auth/AuthLoader.tsx
new file mode 100644
index 00000000..f5292e18
--- /dev/null
+++ b/components/auth/AuthLoader.tsx
@@ -0,0 +1,103 @@
+import React from "react";
+import {
+  Sparkles,
+  Star,
+  Zap,
+  Wand2,
+  Mail,
+  Lock,
+  Loader2,
+} from "lucide-react";
+
+interface AuthLoaderProps {
+  shouldRedirect?: boolean;
+}
+
+const AuthLoader: React.FC<AuthLoaderProps> = ({ shouldRedirect = false }) => {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background relative overflow-hidden py-8">
+      <div className="absolute inset-0 mesh-gradient opacity-10 animate-pulse"></div>
+
+      <div className="floating-orb w-32 h-32 sm:w-48 sm:h-48 bolt-gradient opacity-10 top-20 -left-24 animate-float delay-100"></div>
+      <div className="floating-orb w-24 h-24 sm:w-36 sm:h-36 bolt-gradient opacity-15 bottom-20 -right-18 animate-float delay-300"></div>
+      <div className="floating-orb w-40 h-40 sm:w-56 sm:h-56 bolt-gradient opacity-5 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 animate-float delay-500"></div>
+
+      <div
+        className="absolute inset-0 opacity-[0.01] animate-subtle-shimmer"
+        style={{
+          backgroundImage: `url("data:image/svg+xml,%3csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cg fill='%23000000' fill-opacity='1'%3e%3ccircle cx='30' cy='30' r='1'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e")`,
+        }}
+      />
+
+      <div className="w-full max-w-md mx-4 relative z-10">
+        <div className="glass-effect p-6 sm:p-8 rounded-2xl shadow-2xl border border-yellow-400/10 relative overflow-hidden">
+          <div className="absolute inset-0 shimmer opacity-20"></div>
+
+          <div className="absolute top-4 right-4">
+            <Sparkles className="h-5 w-5 text-yellow-500/30 animate-pulse" />
+          </div>
+          <div className="absolute bottom-4 left-4">
+            <Star className="h-4 w-4 text-blue-500/30 animate-pulse" />
+          </div>
+
+          <div className="relative z-10">
+            <div className="text-center mb-6 sm:mb-8">
+              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-effect mb-4 badge-bg">
+                <Zap className="h-4 w-4 text-yellow-500/50 animate-pulse" />
+                <div className="w-20 h-4 bg-gradient-to-r from-yellow-500/20 to-blue-500/20 rounded animate-pulse"></div>
+                <Wand2 className="h-4 w-4 text-blue-500/50 animate-pulse" />
+              </div>
+
+              <div className="space-y-2 mb-4">
+                <div className="h-8 sm:h-10 bg-gradient-to-r from-gray-300/20 to-gray-400/20 rounded-lg animate-pulse mx-auto w-3/4"></div>
+                <div className="h-4 sm:h-5 bg-gradient-to-r from-gray-300/10 to-gray-400/10 rounded animate-pulse mx-auto w-2/3"></div>
+              </div>
+            </div>
+
+            <div className="space-y-5 sm:space-y-6">
+              <div className="space-y-2">
+                <div className="flex items-center gap-2 mb-2">
+                  <Mail className="h-4 w-4 text-muted-foreground/50" />
+                  <div className="h-4 w-20 bg-gray-300/20 rounded animate-pulse"></div>
+                </div>
+                <div className="relative">
+                  <div className="h-12 glass-effect border-yellow-400/20 rounded-md animate-pulse"></div>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <div className="flex items-center gap-2 mb-2">
+                  <Lock className="h-4 w-4 text-muted-foreground/50" />
+                  <div className="h-4 w-16 bg-gray-300/20 rounded animate-pulse"></div>
+                </div>
+                <div className="relative">
+                  <div className="h-12 glass-effect border-yellow-400/20 rounded-md animate-pulse"></div>
+                </div>
+              </div>
+
+              <div className="h-14 sm:h-16 bolt-gradient/50 rounded-xl animate-pulse flex items-center justify-center">
+                <Loader2 className="h-6 w-6 animate-spin text-white/80" />
+                <span className="ml-3 text-white/80 font-semibold">
+                  {shouldRedirect ? "Redirecting..." : "Loading..."}
+                </span>
+              </div>
+            </div>
+
+            <div className="mt-6 sm:mt-8 text-center">
+              <div className="glass-effect p-4 rounded-xl border border-yellow-400/10">
+                <div className="h-4 w-32 bg-gray-300/10 rounded animate-pulse mx-auto mb-3"></div>
+                <div className="h-4 w-24 bg-gradient-to-r from-yellow-500/20 to-blue-500/20 rounded animate-pulse mx-auto"></div>
+              </div>
+            </div>
+
+            <div className="mt-4 text-center">
+              <div className="h-3 w-20 bg-gray-300/10 rounded animate-pulse mx-auto"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AuthLoader;
\ No newline at end of file
diff --git a/lib/auth-utils.ts b/lib/auth-utils.ts
index 51f2a29b..c04a589f 100644
--- a/lib/auth-utils.ts
+++ b/lib/auth-utils.ts
@@ -1,43 +1,10 @@
 "use client";
 
-import React from "react";
+import React, { useEffect } from "react";
 import { useAuth } from "@/components/auth-provider";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import { useToast } from "@/hooks/use-toast";
-
-// Pages that can be browsed without authentication
-export const BROWSABLE_PAGES = [
-  '/',
-  '/about',
-  '/contact',
-  '/pricing',
-  '/documentation',
-  '/templates', // Can view templates but not create/edit
-  '/auth/signin',
-  '/auth/register',
-];
-
-// Pages that require full authentication
-export const PROTECTED_PAGES = [
-  '/profile',
-  '/settings',
-  '/payment-demo',
-];
-
-// Activities that require authentication (used for component-level protection)
-export const PROTECTED_ACTIVITIES = {
-  CREATE_DOCUMENT: 'create_document',
-  EDIT_DOCUMENT: 'edit_document',
-  SAVE_DOCUMENT: 'save_document',
-  DOWNLOAD_DOCUMENT: 'download_document',
-  CREATE_TEMPLATE: 'create_template',
-  EDIT_TEMPLATE: 'edit_template',
-  SAVE_TEMPLATE: 'save_template',
-  ACCESS_PROFILE: 'access_profile',
-  CHANGE_SETTINGS: 'change_settings',
-  MAKE_PAYMENT: 'make_payment',
-  UPLOAD_FILE: 'upload_file',
-};
+import { AUTH_ROUTES, BROWSABLE_PAGES, PROTECTED_ACTIVITIES, PROTECTED_PAGES } from "@/utils/constants";
 
 // Hook for checking authentication and redirecting if needed
 export function useAuthGuard() {
@@ -111,5 +78,39 @@ export function getActivityDescription(activity: string): string {
   
   return descriptions[activity] || "perform this action";
 }
-
+export function isAuthRoute(pathname: string): boolean {
+  return AUTH_ROUTES.some(route => pathname.startsWith(route));
+}
 // Component wrapper for protected activities (removed for now due to build issues)
+export function useAuthRouteProtection() {
+  const { user, loading } = useAuth();
+  const router = useRouter();
+  const pathname = usePathname();
+  const { toast } = useToast();
+
+  useEffect(() => {
+    if (!loading && user && isAuthRoute(pathname)) {
+      const urlParams = new URLSearchParams(window.location.search);
+      const redirectTo = urlParams.get('redirectTo') || '/';
+      const safeRedirectTo = redirectTo.startsWith('/') && !redirectTo.includes('..') 
+        ? redirectTo 
+        : '/';
+      
+      toast({
+        title: "Already Authenticated",
+        description: "You are already signed in. Redirecting...",
+      });
+      
+      // Small delay to show the toast
+      setTimeout(() => {
+        router.replace(safeRedirectTo);
+      }, 1000);
+    }
+  }, [user, loading, pathname, router, toast]);
+
+  return {
+    user,
+    loading,
+    shouldRedirect: !loading && !!user && isAuthRoute(pathname)
+  };
+}
\ No newline at end of file
diff --git a/utils/constants.ts b/utils/constants.ts
new file mode 100644
index 00000000..25339ba7
--- /dev/null
+++ b/utils/constants.ts
@@ -0,0 +1,38 @@
+// Pages that can be browsed without authentication
+export const BROWSABLE_PAGES = [
+  '/',
+  '/about',
+  '/contact',
+  '/pricing',
+  '/documentation',
+  '/templates', // Can view templates but not create/edit
+  '/auth/signin',
+  '/auth/register',
+];
+
+// Pages that require full authentication
+export const PROTECTED_PAGES = [
+  '/profile',
+  '/settings',
+  '/payment-demo',
+];
+
+export const AUTH_ROUTES = [
+  '/auth/signin',
+  '/auth/register',
+];
+
+// Activities that require authentication (used for component-level protection)
+export const PROTECTED_ACTIVITIES = {
+  CREATE_DOCUMENT: 'create_document',
+  EDIT_DOCUMENT: 'edit_document',
+  SAVE_DOCUMENT: 'save_document',
+  DOWNLOAD_DOCUMENT: 'download_document',
+  CREATE_TEMPLATE: 'create_template',
+  EDIT_TEMPLATE: 'edit_template',
+  SAVE_TEMPLATE: 'save_template',
+  ACCESS_PROFILE: 'access_profile',
+  CHANGE_SETTINGS: 'change_settings',
+  MAKE_PAYMENT: 'make_payment',
+  UPLOAD_FILE: 'upload_file',
+};