diff --git a/frontend/src/components/shared/Loader.jsx b/frontend/src/components/shared/Loader.jsx
deleted file mode 100644
index c6cb74e..0000000
--- a/frontend/src/components/shared/Loader.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-const Loader = () => {
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-white">
-      <div className="relative">
-        {/* Brutalist pulsing square */}
-        <div 
-          className="w-16 h-16 border-4 border-black animate-pulse"
-          style={{ animationDuration: '1s' }}
-        />
-        {/* Secondary rotating square */}
-        <div 
-          className="absolute top-0 left-0 w-16 h-16 border-4 border-black rotate-45 animate-spin"
-          style={{ animationDuration: '2s' }}
-        />
-        {/* Loading text */}
-        <p className="mt-8 text-sm font-bold uppercase tracking-widest text-black text-center">
-          Loading
-        </p>
-      </div>
-    </div>
-  );
-};
-
-export default Loader;
diff --git a/frontend/src/components/shared/ProtectedRoute.jsx b/frontend/src/components/shared/ProtectedRoute.jsx
index 6db5626..6a542c0 100644
--- a/frontend/src/components/shared/ProtectedRoute.jsx
+++ b/frontend/src/components/shared/ProtectedRoute.jsx
@@ -1,6 +1,6 @@
 import { Navigate } from "react-router-dom";
 import { useAuth } from "../../context/AuthContext";
-import Loader from "./Loader";
+import Loader from "./loaders/LoaderSwitcher";
 
 const ProtectedRoute = ({ children }) => {
   const { isAuthenticated, loading } = useAuth();
diff --git a/frontend/src/components/shared/PublicRoute.jsx b/frontend/src/components/shared/PublicRoute.jsx
index d1e5884..1c590f8 100644
--- a/frontend/src/components/shared/PublicRoute.jsx
+++ b/frontend/src/components/shared/PublicRoute.jsx
@@ -1,6 +1,6 @@
 import { Navigate } from "react-router-dom";
 import { useAuth } from "../../context/AuthContext";
-import Loader from "./Loader";
+import Loader from "./loaders/LoaderSwitcher";
 
 const PublicRoute = ({ children }) => {
   const { isAuthenticated, loading } = useAuth();
diff --git a/frontend/src/components/shared/loaders/LoaderAlt.jsx b/frontend/src/components/shared/loaders/LoaderAlt.jsx
new file mode 100644
index 0000000..23f12ad
--- /dev/null
+++ b/frontend/src/components/shared/loaders/LoaderAlt.jsx
@@ -0,0 +1,44 @@
+const Spinner = () => {
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className="min-h-screen flex items-center justify-center bg-white"
+    >
+      <span className="sr-only">Loading, please wait...</span>
+      <div className="grid grid-cols-2 gap-3">
+        {[...Array(4)].map((_, i) => (
+          <div
+            key={i}
+            className={`w-10 h-10 ${
+              i % 2 === 0 ? "bg-black" : "border-4 border-black"
+            } animate-grid`}
+            style={{ animationDelay: `${i * 0.15}s` }}
+          />
+        ))}
+      </div>
+
+      <style>
+        {`
+          @keyframes grid {
+            0%,100% {
+              transform: scale(1);
+              opacity: 1;
+            }
+
+            50% {
+              transform: scale(0.45);
+              opacity: 0.3;
+            }
+          }
+
+          .animate-grid {
+            animation: grid 1s ease-in-out infinite;
+          }
+        `}
+      </style>
+    </div>
+  );
+};
+
+export default Spinner;
\ No newline at end of file
diff --git a/frontend/src/components/shared/loaders/LoaderPrimary.jsx b/frontend/src/components/shared/loaders/LoaderPrimary.jsx
new file mode 100644
index 0000000..ddca9ed
--- /dev/null
+++ b/frontend/src/components/shared/loaders/LoaderPrimary.jsx
@@ -0,0 +1,106 @@
+const Spinner = () => {
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className="min-h-screen flex items-center justify-center bg-white overflow-hidden"
+    >
+      <span className="sr-only">Loading, please wait...</span>
+      <div className="relative w-32 h-32 animate-rotate">
+        {/* Outer Square */}
+        <div className="absolute inset-0 border-[5px] border-black animate-scale-1" />
+
+        {/* Middle Square */}
+        <div className="absolute inset-4 border-[5px] border-black animate-scale-2" />
+
+        {/* Inner Square */}
+        <div className="absolute inset-8 border-[5px] border-black animate-scale-3" />
+
+        {/* Center Block */}
+        <div className="absolute inset-0 m-auto w-5 h-5 bg-black animate-core" />
+      </div>
+
+      <style>
+        {`
+          @keyframes rotate {
+            from {
+              transform: rotate(0deg);
+            }
+
+            to {
+              transform: rotate(360deg);
+            }
+          }
+
+          @keyframes scaleOne {
+            0%,100% {
+              transform: scale(1);
+              opacity: 1;
+            }
+
+            50% {
+              transform: scale(0.75);
+              opacity: 0.4;
+            }
+          }
+
+          @keyframes scaleTwo {
+            0%,100% {
+              transform: scale(0.9);
+              opacity: 0.8;
+            }
+
+            50% {
+              transform: scale(1.15);
+              opacity: 0.3;
+            }
+          }
+
+          @keyframes scaleThree {
+            0%,100% {
+              transform: scale(1);
+              opacity: 1;
+            }
+
+            50% {
+              transform: scale(0.6);
+              opacity: 0.2;
+            }
+          }
+
+          @keyframes core {
+            0%,100% {
+              transform: scale(1);
+            }
+
+            50% {
+              transform: scale(2);
+            }
+          }
+
+          .animate-rotate {
+            animation: rotate 6s linear infinite;
+          }
+
+          .animate-scale-1 {
+            animation: scaleOne 2s ease-in-out infinite;
+          }
+
+          .animate-scale-2 {
+            animation: scaleTwo 2s ease-in-out infinite;
+          }
+
+          .animate-scale-3 {
+            animation: scaleThree 2s ease-in-out infinite;
+          }
+
+          .animate-core {
+            animation: core 1s ease-in-out infinite;
+          }
+        `}
+      </style>
+    </div>
+  );
+};
+
+export default Spinner;
\ No newline at end of file
diff --git a/frontend/src/components/shared/loaders/LoaderSwitcher.jsx b/frontend/src/components/shared/loaders/LoaderSwitcher.jsx
new file mode 100644
index 0000000..f8452f8
--- /dev/null
+++ b/frontend/src/components/shared/loaders/LoaderSwitcher.jsx
@@ -0,0 +1,12 @@
+import LoaderPrimary from "./LoaderPrimary";
+import LoaderAlt from "./LoaderAlt";
+
+// Centralized loader switching logic
+// Change this boolean to switch loaders globally
+const USE_ALT_LOADER = false; // Set to true to use the alternative loader
+
+const LoaderSwitcher = () => {
+  return USE_ALT_LOADER ? <LoaderAlt /> : <LoaderPrimary />;
+};
+
+export default LoaderSwitcher;
\ No newline at end of file
diff --git a/frontend/src/pages/DashboardPage.jsx b/frontend/src/pages/DashboardPage.jsx
index d04c569..330a771 100644
--- a/frontend/src/pages/DashboardPage.jsx
+++ b/frontend/src/pages/DashboardPage.jsx
@@ -1,11 +1,11 @@
 import { useState } from "react";
 import { useAuth } from "../context/AuthContext";
 import { useNavigate, Link } from "react-router-dom";
-import Loader from "../components/shared/Loader";
 import { useCodeforces } from "../hooks/useCodeforces";
 import ConnectBanner from "../components/codeforces/ConnectBanner";
 import VerifyModal from "../components/codeforces/VerifyModal";
 import AIInsightPanel from "../components/ai/AIInsightPanel";
+import LoaderSwitcher from "../components/shared/loaders/LoaderSwitcher";
 
 export default function DashboardPage() {
   const { user, loading, logout } = useAuth();
@@ -29,7 +29,7 @@ export default function DashboardPage() {
   };
 
   if (loading) {
-    return <Loader />;
+    return <LoaderSwitcher />;
   }
 
   return (