diff --git a/apps/web/src/components/auth/AuthContainer.tsx b/apps/web/src/components/auth/AuthContainer.tsx
index ffe17b08..cc720462 100644
--- a/apps/web/src/components/auth/AuthContainer.tsx
+++ b/apps/web/src/components/auth/AuthContainer.tsx
@@ -11,9 +11,12 @@ import { signIn } from "next-auth/react";
 import Link from "next/link";
 import AuthLoginButton from "./AuthLoginButton";
 import Logo from "../common/Logo";
+import Loading from "../loading/Loading";
 
 const AuthContainer = () => {
   const [acceptTos, setAcceptTos] = useState<boolean>(false);
+  const [isloading, setIsLoading] = useState<boolean>(false);
+
   const theme = useTheme();
   const handleAcceptTos = (e: ChangeEvent<HTMLInputElement>) => {
     setAcceptTos(e.target.checked);
@@ -21,16 +24,20 @@ const AuthContainer = () => {
 
   return (
     <>
+      <Loading isLoading={isloading} isAuthLoading={""} />
       <Stack
         direction="column"
         spacing={2}
         sx={{ p: 2, backgroundColor: "appLoginForm.background" }}>
-        <Link href={"/"}><Logo /></Link>
+        <Link href={"/"}>
+          <Logo />
+        </Link>
         <Typography fontSize="x-large">Sign in/up</Typography>
         <AuthLoginButton
           disabled={!acceptTos}
           fullWidth={true}
           onClick={() => {
+            setIsLoading(true);
             if (!acceptTos) return;
             signIn("twitch", {
               callbackUrl: `${window.location.origin}/app`,
@@ -48,6 +55,7 @@ const AuthContainer = () => {
           disabled={!acceptTos}
           fullWidth={true}
           onClick={() => {
+            setIsLoading(true);
             if (!acceptTos) return;
 
             signIn("discord", {
diff --git a/apps/web/src/components/landing/LandingTexts.tsx b/apps/web/src/components/landing/LandingTexts.tsx
index 7d587aa0..04510935 100644
--- a/apps/web/src/components/landing/LandingTexts.tsx
+++ b/apps/web/src/components/landing/LandingTexts.tsx
@@ -11,7 +11,8 @@ import {
 } from "@mui/material";
 import { env } from "../../env/client.mjs";
 import { FaDiscord, FaTwitch } from "react-icons/fa";
-import { useCallback, useEffect, useState } from "react";
+import Loading from "../loading/Loading";
+import { useEffect, useState } from "react";
 import {
   addTwitchAccount,
   checkTwitchAccount,
@@ -36,6 +37,7 @@ const LandingTexts = () => {
   const [defaultCmdList, setDefaultCmdList] = useState<string[]>([]);
   const [userCmdList, setUserCmdList] = useState<string[]>([]);
   const [featureList, setFeatureList] = useState<string[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   const [alertIsOpen, setAlertIsOpen] = useState<boolean>(false);
   const [alertText, setAlertText] = useState<string>("");
 
@@ -83,6 +85,7 @@ const LandingTexts = () => {
 
   const addTwitchBotOrAccount = () => {
     addTwitchAccount().then(res => {
+      setIsLoading(false);
       if (!res || !res.success) {
         setAlertText("Something went wrong. Please try again later.");
         setAlertIsOpen(true);
@@ -97,6 +100,7 @@ const LandingTexts = () => {
 
   return (
     <>
+      <Loading isLoading={isLoading} isAuthLoading={""} />
       <CustomAlert
         isOpen={alertIsOpen}
         closeHandler={() => setAlertIsOpen(!alertIsOpen)}
@@ -195,6 +199,7 @@ const LandingTexts = () => {
               href={`${env.NEXT_PUBLIC_APP_DISCORD_BOT_INVITE_URL}`}
               component={Link}
               variant="contained"
+              onClick={() => setIsLoading(true)}
               startIcon={<FaDiscord />}
               sx={{
                 backgroundColor: "landingDiscordBtn.background",
@@ -206,6 +211,7 @@ const LandingTexts = () => {
             </Button>
             <Button
               onClick={() => {
+                setIsLoading(true);
                 if (!session || !isTwitchAccAvailable.data?.data) {
                   signIn("twitch", {
                     callbackUrl: `${window.location.origin}/api/twitch/get-bot`,