diff --git a/shared/helper/backendFetch.ts b/shared/helper/backendFetch.ts
index 06d48c6..9b0de2b 100644
--- a/shared/helper/backendFetch.ts
+++ b/shared/helper/backendFetch.ts
@@ -1,3 +1,4 @@
+"use server";
 export interface BackendResponse<T = unknown> {
   success: boolean;
   message: string;
diff --git a/shared/libs/shadcn/ui/spinner.tsx b/shared/libs/shadcn/ui/spinner.tsx
new file mode 100644
index 0000000..d05e6d7
--- /dev/null
+++ b/shared/libs/shadcn/ui/spinner.tsx
@@ -0,0 +1,10 @@
+import { cn } from "@/shared/libs/shadcn/lib/utils"
+import { Loader2Icon } from "lucide-react"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />
+  )
+}
+
+export { Spinner }
diff --git a/shared/widgets/signin/actions/getOauthEndpoint.ts b/shared/widgets/signin/actions/getOauthEndpoint.ts
new file mode 100644
index 0000000..128648e
--- /dev/null
+++ b/shared/widgets/signin/actions/getOauthEndpoint.ts
@@ -0,0 +1,6 @@
+"use client";
+import { backendFetch, BackendResponse } from "@/shared/helper/backendFetch";
+
+export const getOauthEndpoint = async (url: string) => {
+  return (await backendFetch(url)) as BackendResponse<{ endpointUrl: string }>;
+};
diff --git a/shared/widgets/signin/components/SignInCard.tsx b/shared/widgets/signin/components/SignInCard.tsx
index aed6644..558ae22 100644
--- a/shared/widgets/signin/components/SignInCard.tsx
+++ b/shared/widgets/signin/components/SignInCard.tsx
@@ -16,19 +16,28 @@ import {
   GetALlThirdPartyAuthCallback,
 } from "../actions/getAllThirdPartyAuth";
 import { Icon } from "@iconify/react";
+import { Spinner } from "@/shared/libs/shadcn/ui/spinner";
+import { getOauthEndpoint } from "../actions/getOauthEndpoint";
+import { useRouter } from "next/navigation";
 
 const SignInCard = () => {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
   const [oAuthProviders, setOAuthProviders] =
     useState<GetALlThirdPartyAuthCallback | null>(null);
 
   useEffect(() => {
     (async () => {
       const res = await getAllThirdPartyAuth();
-      console.log(res);
       setOAuthProviders(res);
     })();
   }, []);
 
+  const getOauthEndpointUrl = async (providerReqEndpoint: string) => {
+    const res = await getOauthEndpoint(providerReqEndpoint);
+    router.push(res.data?.endpointUrl || "/");
+  };
+
   return (
     <DialogContent showCloseButton={false}>
       <DialogHeader>
@@ -56,14 +65,17 @@ const SignInCard = () => {
                   key={index}
                   variant="outline"
                   className="w-full text-neutral-300 text-xs font-normal"
+                  disabled={isLoading}
+                  onClick={() => getOauthEndpointUrl(provider.req_endpoint)}
                 >
+                  {isLoading && <Spinner />}
                   <Icon icon={provider.icon} />
                   Continue with {provider.name}
                 </Button>
               ))}
             </div>
           ) : (
-            <Button size="sm" className="w-full" isDisabled>
+            <Button size="sm" className="w-full" variant="outline" disabled>
               There are no third-party auth providers available.
             </Button>
           )}
@@ -71,9 +83,14 @@ const SignInCard = () => {
       </div>
       <DialogFooter>
         <DialogClose asChild>
-          <Button variant="outline">Cancel</Button>
+          <Button variant="outline" disabled={isLoading}>
+            Cancel
+          </Button>
         </DialogClose>
-        <Button type="submit">Continue</Button>
+        <Button type="submit" disabled={isLoading}>
+          {isLoading && <Spinner />}
+          Continue
+        </Button>
       </DialogFooter>
     </DialogContent>
   );