diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index da631020b..74ed790a6 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -104,7 +104,12 @@ export const buttonVariants = cva("disabled:cursor-not-allowed block", {
     {
       variant: "main",
       isLoading: true,
-      className: "disabled:bg-textColor disabled:border-textColor",
+      className: "disabled:!bg-textColor disabled:!border-textColor",
+    },
+    {
+      variant: "secondary",
+      isLoading: true,
+      className: "disabled:!bg-textColor disabled:!border-textColor disabled:!text-bgColor",
     },
   ],
   defaultVariants: {
@@ -148,7 +153,9 @@ export function Button({
       );
     }
 
-    return <Loader type={loadingType} reverse={loadingReverse} />;
+    // For secondary and main variants with loading, use white loader on black background
+    const shouldReverseLoader = variant === "secondary" || variant === "main";
+    return <Loader type={loadingType} reverse={shouldReverseLoader} />;
   };
 
   return (
diff --git a/src/components/ui/loader.tsx b/src/components/ui/loader.tsx
index aa90429a7..20b478e4e 100644
--- a/src/components/ui/loader.tsx
+++ b/src/components/ui/loader.tsx
@@ -67,7 +67,12 @@ export function Loader({
   return (
     <div className="flex w-full justify-center p-2">
       <div className="relative h-[0.5px] w-full overflow-hidden bg-gray-200/20 lg:w-[175px]">
-        <div className="absolute left-0 top-0 h-full w-full animate-[loading_1s_ease-out_forwards] bg-bgColor" />
+        <div
+          className={cn(
+            "absolute left-0 top-0 h-full w-full animate-[loading_1s_ease-out_forwards]",
+            reverse ? "bg-bgColor" : "bg-textColor",
+          )}
+        />
       </div>
     </div>
   );