diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 264b96b..082c2e2 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -9,6 +9,7 @@
     simklPrimary,
     malWatchList,
     simklWatchList,
+    serviceLoggingIn,
   } from "./helperModules/GlobalVariablesAndHelperFunctions.svelte";
   import { onMount } from "svelte";
   import Router from "svelte-spa-router";
@@ -35,6 +36,8 @@
     malLoggedIn.subscribe((value) => (isMALLoggedIn = value));
     simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value));
 
+    serviceLoggingIn.set(["anilist", "mal", "simkl"]);
+
     !isAniListLoggedIn && (await CheckIfAniListLoggedInAndLoadWatchList());
     !isMALLoggedIn && (await CheckIfMALLoggedInAndSetUser());
     !isSimklLoggedIn && (await CheckIfSimklLoggedInAndSetUser());
diff --git a/frontend/src/helperComponents/AvatarMenu.svelte b/frontend/src/helperComponents/AvatarMenu.svelte
index a79ef69..ff04de7 100644
--- a/frontend/src/helperComponents/AvatarMenu.svelte
+++ b/frontend/src/helperComponents/AvatarMenu.svelte
@@ -14,6 +14,7 @@
     logoutOfAniList,
     logoutOfMAL,
     logoutOfSimkl,
+    serviceLoggingIn,
   } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
   import * as runtime from "../../wailsjs/runtime";
   import type { MyAnimeListUser } from "../mal/types/MALTypes";
@@ -26,6 +27,7 @@
   let isAniListLoggedIn: boolean;
   let isSimklLoggedIn: boolean;
   let isMALLoggedIn: boolean;
+  let loggingIn: string[] = [];
 
   aniListUser.subscribe((value) => (currentAniListUser = value));
   malUser.subscribe((value) => (currentMALUser = value));
@@ -33,6 +35,7 @@
   aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value));
   simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value));
   malLoggedIn.subscribe((value) => (isMALLoggedIn = value));
+  serviceLoggingIn.subscribe((value) => (loggingIn = value));
 
   function dropdownUser(): void {
     let dropdown = document.querySelector("#userDropdown");
@@ -98,15 +101,24 @@
         </li>
       {:else}
         <li>
-          <button
-            on:click={() => {
-              dropdownUser();
-              loginToAniList();
-            }}
-            class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white"
-          >
-            <span class="maple-font text-lg mr-4">A</span>Login to AniList
-          </button>
+          {#if loggingIn.includes("anilist")}
+            <span class="flex items-center px-4 py-2 w-full truncate">
+              <span
+                class="inline-block w-4 h-4 mr-4 border-2 border-gray-300 border-t-transparent rounded-full animate-spin"
+              ></span>
+              <span class="maple-font text-lg mr-4">A</span>Checking AniList
+            </span>
+          {:else}
+            <button
+              on:click={() => {
+                dropdownUser();
+                loginToAniList();
+              }}
+              class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white"
+            >
+              <span class="maple-font text-lg mr-4">A</span>Login to AniList
+            </button>
+          {/if}
         </li>
       {/if}
       {#if isMALLoggedIn}
@@ -120,15 +132,24 @@
         </li>
       {:else}
         <li>
-          <button
-            on:click={() => {
-              dropdownUser();
-              loginToMAL();
-            }}
-            class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white"
-          >
-            <span class="maple-font text-lg mr-4">M</span>Login to MyAnimeList
-          </button>
+          {#if loggingIn.includes("mal")}
+            <span class="flex items-center px-4 py-2 w-full truncate">
+              <span
+                class="inline-block w-4 h-4 mr-4 border-2 border-gray-300 border-t-transparent rounded-full animate-spin"
+              ></span>
+              <span class="maple-font text-lg mr-4">M</span>Checking MyAnimeList
+            </span>
+          {:else}
+            <button
+              on:click={() => {
+                dropdownUser();
+                loginToMAL();
+              }}
+              class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white"
+            >
+              <span class="maple-font text-lg mr-4">M</span>Login to MyAnimeList
+            </button>
+          {/if}
         </li>
       {/if}
       {#if isSimklLoggedIn}
@@ -143,15 +164,24 @@
         </li>
       {:else}
         <li>
-          <button
-            on:click={() => {
-              dropdownUser();
-              loginToSimkl();
-            }}
-            class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white"
-          >
-            <span class="maple-font text-lg mr-4">S</span>Login to Simkl
-          </button>
+          {#if loggingIn.includes("simkl")}
+            <span class="flex items-center px-4 py-2 w-full truncate">
+              <span
+                class="inline-block w-4 h-4 mr-4 border-2 border-gray-300 border-t-transparent rounded-full animate-spin"
+              ></span>
+              <span class="maple-font text-lg mr-4">S</span>Checking Simkl
+            </span>
+          {:else}
+            <button
+              on:click={() => {
+                dropdownUser();
+                loginToSimkl();
+              }}
+              class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white"
+            >
+              <span class="maple-font text-lg mr-4">S</span>Login to Simkl
+            </button>
+          {/if}
         </li>
       {/if}
     </ul>
@@ -174,4 +204,3 @@
     </div>
   </div>
 </div>
-
diff --git a/frontend/src/helperComponents/Header.svelte b/frontend/src/helperComponents/Header.svelte
index b592905..21dac39 100644
--- a/frontend/src/helperComponents/Header.svelte
+++ b/frontend/src/helperComponents/Header.svelte
@@ -7,6 +7,7 @@
         loginToSimkl,
         malLoggedIn,
         simklLoggedIn,
+        serviceLoggingIn,
     } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
     import AvatarMenu from "./AvatarMenu.svelte";
     import logo from "../assets/images/AniTrackLogo.svg";
@@ -15,10 +16,12 @@
     let isAniListLoggedIn: boolean;
     let isSimklLoggedIn: boolean;
     let isMALLoggedIn: boolean;
+    let loggingIn: string[] = [];
 
     aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value));
     simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value));
     malLoggedIn.subscribe((value) => (isMALLoggedIn = value));
+    serviceLoggingIn.subscribe((value) => (loggingIn = value));
 </script>
 
 <nav class="border-gray-200 bg-gray-900">
@@ -74,23 +77,50 @@
             >
                 <li>
                     {#if !isAniListLoggedIn}
-                        <button on:click={loginToAniList}>
-                            <!--                                class="block py-2 px-3 w-full min-[950px]:w-auto rounded text-gray-300 min-[950px]:hover:text-blue-500 hover:bg-gray-700 hover:text-white min-[950px]:hover:bg-transparent border-gray-700">-->
-                            AniList Login
+                        <button
+                            disabled={loggingIn.includes("anilist")}
+                            on:click={loginToAniList}
+                        >
+                            {#if loggingIn.includes("anilist")}
+                                <span
+                                    class="inline-block w-4 h-4 mr-2 border-2 border-gray-300 border-t-transparent rounded-full animate-spin align-middle"
+                                ></span
+                                >Checking AniList
+                            {:else}
+                                AniList Login
+                            {/if}
                         </button>
                     {/if}
                     {#if !isMALLoggedIn}
-                        <button on:click={loginToMAL}>
-                            <!--                                class="block py-2 px-3 w-full min-[950px]:w-auto rounded min-[950px]:p-0 text-gray-300 min-[950px]:hover:text-blue-500 hover:bg-gray-700 hover:text-white min-[950px]:hover:bg-transparent border-gray-700">-->
-                            MyAnimeList Login
+                        <button
+                            disabled={loggingIn.includes("mal")}
+                            on:click={loginToMAL}
+                        >
+                            {#if loggingIn.includes("mal")}
+                                <span
+                                    class="inline-block w-4 h-4 mr-2 border-2 border-gray-300 border-t-transparent rounded-full animate-spin align-middle"
+                                ></span
+                                >Checking MAL
+                            {:else}
+                                MyAnimeList Login
+                            {/if}
                         </button>
                     {/if}
                 </li>
                 <li>
                     {#if !isSimklLoggedIn}
-                        <button on:click={loginToSimkl}>
-                            <!--                                class="block py-2 px-3 w-full min-[950px]:w-auto rounded min-[950px]:p-0 text-gray-300 min-[950px]:hover:text-blue-500 hover:bg-gray-700 hover:text-white min-[950px]:hover:bg-transparent border-gray-700">-->
-                            Simkl Login
+                        <button
+                            disabled={loggingIn.includes("simkl")}
+                            on:click={loginToSimkl}
+                        >
+                            {#if loggingIn.includes("simkl")}
+                                <span
+                                    class="inline-block w-4 h-4 mr-2 border-2 border-gray-300 border-t-transparent rounded-full animate-spin align-middle"
+                                ></span
+                                >Checking Simkl
+                            {:else}
+                                Simkl Login
+                            {/if}
                         </button>
                     {/if}
                 </li>
diff --git a/frontend/src/helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte b/frontend/src/helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte
index 8b4a043..ae95395 100644
--- a/frontend/src/helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte
+++ b/frontend/src/helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte
@@ -14,6 +14,7 @@
     aniListSort,
     clearApiError,
     setApiError,
+    serviceLoggingIn,
   } from "./GlobalVariablesAndHelperFunctions.svelte";
 
   let isAniListPrimary: boolean;
@@ -60,6 +61,7 @@
     }
   };
   export const CheckIfAniListLoggedInAndLoadWatchList = async () => {
+    serviceLoggingIn.update((s) => [...s, "anilist"]);
     try {
       const loggedIn = await CheckIfAniListLoggedIn();
       if (loggedIn) {
@@ -76,6 +78,8 @@
         true,
       );
       aniListLoggedIn.set(false);
+    } finally {
+      serviceLoggingIn.update((s) => s.filter((item) => item !== "anilist"));
     }
   };
 </script>
diff --git a/frontend/src/helperModules/CheckIfMyAnimeListLoggedIn.svelte b/frontend/src/helperModules/CheckIfMyAnimeListLoggedIn.svelte
index 8054578..3705ee1 100644
--- a/frontend/src/helperModules/CheckIfMyAnimeListLoggedIn.svelte
+++ b/frontend/src/helperModules/CheckIfMyAnimeListLoggedIn.svelte
@@ -1,14 +1,21 @@
 <script lang="ts" context="module">
     import {CheckIfMyAnimeListLoggedIn, GetMyAnimeList, GetMyAnimeListLoggedInUser} from "../../wailsjs/go/main/App";
-    import {malUser, malPrimary, malWatchList, malLoggedIn} from "./GlobalVariablesAndHelperFunctions.svelte"
+    import {malUser, malPrimary, malWatchList, malLoggedIn, serviceLoggingIn} from "./GlobalVariablesAndHelperFunctions.svelte"
+    import type { MyAnimeListUser } from "../mal/types/MALTypes";
 
     let isMalPrimary: boolean
     malPrimary.subscribe(value => isMalPrimary = value)
 
     export const CheckIfMALLoggedInAndSetUser = async () => {
+        serviceLoggingIn.update((s) => [...s, "mal"])
         await CheckIfMyAnimeListLoggedIn().then(loggedIn => {
             if (loggedIn) {
                 GetMyAnimeListLoggedInUser().then(user => {
+                    if (!user.name) {
+                        malUser.set({} as MyAnimeListUser)
+                        malLoggedIn.set(false)
+                        return
+                    }
                     malUser.set(user)
                     if (isMalPrimary) {
                         GetMyAnimeList(1000).then(watchList => {
@@ -20,6 +27,8 @@
                     }
                 })
             }
+        }).finally(() => {
+            serviceLoggingIn.update((s) => s.filter(item => item !== "mal"))
         })
     }
 </script>
\ No newline at end of file
diff --git a/frontend/src/helperModules/CheckIsSimklLoggedIn.svelte b/frontend/src/helperModules/CheckIsSimklLoggedIn.svelte
index 706db11..f98d2ca 100644
--- a/frontend/src/helperModules/CheckIsSimklLoggedIn.svelte
+++ b/frontend/src/helperModules/CheckIsSimklLoggedIn.svelte
@@ -1,11 +1,12 @@
 <script lang="ts" context="module">
     import {CheckIfSimklLoggedIn, GetSimklLoggedInUser, SimklGetUserWatchlist} from "../../wailsjs/go/main/App";
-    import { simklLoggedIn, simklUser, simklPrimary, simklWatchList } from "./GlobalVariablesAndHelperFunctions.svelte";
+    import { simklLoggedIn, simklUser, simklPrimary, simklWatchList, serviceLoggingIn } from "./GlobalVariablesAndHelperFunctions.svelte";
 
     let isSimklPrimary: boolean
     simklPrimary.subscribe(value => isSimklPrimary = value)
 
     export const CheckIfSimklLoggedInAndSetUser = async () => {
+        serviceLoggingIn.update((s) => [...s, "simkl"])
         await CheckIfSimklLoggedIn().then(loggedIn => {
             if (loggedIn) {
                 GetSimklLoggedInUser().then(user => {
@@ -24,6 +25,8 @@
                     }
                 })
             }
+        }).finally(() => {
+            serviceLoggingIn.update((s) => s.filter(item => item !== "simkl"))
         })
     }
 </script>
\ No newline at end of file
diff --git a/frontend/src/helperModules/GlobalVariablesAndHelperFunctions.svelte b/frontend/src/helperModules/GlobalVariablesAndHelperFunctions.svelte
index a2b5b8e..2b73f99 100644
--- a/frontend/src/helperModules/GlobalVariablesAndHelperFunctions.svelte
+++ b/frontend/src/helperModules/GlobalVariablesAndHelperFunctions.svelte
@@ -39,6 +39,7 @@
   export let aniListLoggedIn = writable(false);
   export let simklLoggedIn = writable(false);
   export let malLoggedIn = writable(false);
+  export const serviceLoggingIn = writable([] as string[]);
   export let simklWatchList = writable({} as SimklWatchList);
   export let aniListPrimary = writable(true);
   export let simklPrimary = writable(false);
@@ -148,39 +149,70 @@
     return "";
   }
 
-  export function loginToSimkl(): void {
-    GetSimklLoggedInUser().then((user) => {
-      if (Object.keys(user).length === 0) {
-        simklLoggedIn.set(false);
-      } else {
-        simklUser.set(user);
-        SimklGetUserWatchlist().then((result) => {
-          simklWatchList.set(result);
-          simklLoggedIn.set(true);
-        });
+  export function setServiceLoggingIn(service: string, isLoggingIn: boolean): void {
+    serviceLoggingIn.update((services) => {
+      if (isLoggingIn) {
+        return services.includes(service) ? services : [...services, service];
       }
+      return services.filter((s) => s !== service);
     });
   }
 
+  export function isServiceLoggingIn(service: string): boolean {
+    let loggingIn = false;
+    serviceLoggingIn.subscribe((services) => {
+      loggingIn = services.includes(service);
+    })();
+    return loggingIn;
+  }
+
+  export function loginToSimkl(): void {
+    setServiceLoggingIn("simkl", true);
+    GetSimklLoggedInUser()
+      .then((user) => {
+        if (Object.keys(user).length === 0) {
+          simklLoggedIn.set(false);
+        } else {
+          simklUser.set(user);
+          SimklGetUserWatchlist().then((result) => {
+            simklWatchList.set(result);
+            simklLoggedIn.set(true);
+          });
+        }
+      })
+      .finally(() => setServiceLoggingIn("simkl", false));
+  }
+
   export function loginToAniList(): void {
-    GetAniListLoggedInUser().then((result) => {
-      aniListUser.set(result);
-      if (isAniListPrimary) {
-        GetAniListUserWatchingList(page, perPage, sort).then((result) => {
-          aniListWatchlist.set(result);
+    setServiceLoggingIn("anilist", true);
+    GetAniListLoggedInUser()
+      .then((result) => {
+        aniListUser.set(result);
+        if (isAniListPrimary) {
+          GetAniListUserWatchingList(page, perPage, sort).then((result) => {
+            aniListWatchlist.set(result);
+            aniListLoggedIn.set(true);
+          });
+        } else {
           aniListLoggedIn.set(true);
-        });
-      } else {
-        aniListLoggedIn.set(true);
-      }
-    });
+        }
+      })
+      .finally(() => setServiceLoggingIn("anilist", false));
   }
 
   export function loginToMAL(): void {
-    GetMyAnimeListLoggedInUser().then((result) => {
-      malUser.set(result);
-      malLoggedIn.set(true);
-    });
+    setServiceLoggingIn("mal", true);
+    GetMyAnimeListLoggedInUser()
+      .then((result) => {
+        if (!result.name) {
+          malUser.set({} as MyAnimeListUser);
+          malLoggedIn.set(false);
+          return;
+        }
+        malUser.set(result);
+        malLoggedIn.set(true);
+      })
+      .finally(() => setServiceLoggingIn("mal", false));
   }
 
   export function logoutOfAniList(): void {