diff --git a/api/queries.ts b/api/queries.ts
index 3421e7d2..e4480689 100644
--- a/api/queries.ts
+++ b/api/queries.ts
@@ -26,6 +26,6 @@ export const usePublicApi = (serverUrl: string) => useQuery({
 export const useApi = () => useQuery({
     queryKey: [QueryKeys.Api],
     queryFn: async ({ queryKey }) => {
-        createApi();
+        return createApi();
     }
 })
\ No newline at end of file
diff --git a/components/Login/helpers/server-address.tsx b/components/Login/helpers/server-address.tsx
index 761f8011..9ff29cc2 100644
--- a/components/Login/helpers/server-address.tsx
+++ b/components/Login/helpers/server-address.tsx
@@ -5,7 +5,7 @@ import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useMutation } from "@tanstack/react-query";
 import { AsyncStorageKeys } from "../../../enums/async-storage-keys";
 import { JellifyServer } from "../../../types/JellifyServer";
-import { serverMutation } from "../../../api/mutators/functions/storage";
+import { mutateServer, serverMutation } from "../../../api/mutators/functions/storage";
 import { useServer } from "../../../api/queries/keychain";
 import { LoginContext } from "../../contexts";
 
@@ -35,7 +35,8 @@ export default function ServerAddress(): React.JSX.Element {
                 version: publicSystemInfoResponse.data.Version!,
                 startUpComplete: publicSystemInfoResponse.data.StartupWizardCompleted!
             }
-            loginContext.loginContextFns.setServerFn(jellifyServer);
+
+            return mutateServer(jellifyServer);
         },
         onError: async (error: Error) => {
             console.error("An error occurred connecting to the Jellyfin instance", error);
diff --git a/components/contexts.ts b/components/contexts.ts
index 65a2f085..3b340c7b 100644
--- a/components/contexts.ts
+++ b/components/contexts.ts
@@ -2,13 +2,11 @@ import { createContext, Dispatch, SetStateAction } from "react";
 import { SharedWebCredentials } from "react-native-keychain";
 import { JellifyServer } from "../types/JellifyServer";
 
-type LoginContextFns = {
-    setServerFn: (state: JellifyServer | undefined) => void,
+export type LoginContextFns = {
     setKeychainFn: (state: SharedWebCredentials | undefined) => void,
 }
 
 type LoginContext = {
-    server: JellifyServer | undefined,
     keychain: SharedWebCredentials | undefined;
     loginContextFns: LoginContextFns
 };
@@ -17,11 +15,9 @@ type LoginContext = {
  * https://stackoverflow.com/a/58199140
  */
 const loginContextDefaultValue : LoginContext = {
-    server: undefined,
     keychain: undefined,
     loginContextFns: {
         setKeychainFn: (state: SharedWebCredentials | undefined) => {}, // noop default callback
-        setServerFn: (state: JellifyServer | undefined) => {}, //noop default callback
     }
 }
 
diff --git a/components/jellify.tsx b/components/jellify.tsx
index 65645aed..7ce5df8b 100644
--- a/components/jellify.tsx
+++ b/components/jellify.tsx
@@ -7,12 +7,14 @@ import { setupPlayer } from "react-native-track-player/lib/src/trackPlayer";
 import { useCredentials, useServer } from "../api/queries/keychain";
 import _ from "lodash";
 import { jellifyStyles } from "./styles";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { LoginContext } from "./contexts";
 import { SharedWebCredentials } from "react-native-keychain";
 import { JellifyServer } from "../types/JellifyServer";
-import { serverMutation } from "../api/mutators/functions/storage";
-import { jellifyServerMutation } from "../api/mutators/storage";
+import LoginProvider from "./providers";
+import { mutateServerCredentials } from "../api/mutators/functions/storage";
+import { credentials } from "../api/mutators/storage";
+import { useApi } from "../api/queries";
 
 export default function Jellify(): React.JSX.Element {
 
@@ -25,31 +27,34 @@ export default function Jellify(): React.JSX.Element {
     backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
   };
 
-  let serverQuery = useServer;
-  let credentials = useCredentials;
-
-  const [server, setServer] : [JellifyServer | undefined, React.Dispatch<React.SetStateAction<JellifyServer | undefined>>] = useState();
-  const [keychain, setKeychain] : [SharedWebCredentials | undefined, React.Dispatch<React.SetStateAction<SharedWebCredentials | undefined>> ] = useState();
+  const [keychainState, setKeychain] : [SharedWebCredentials | undefined, React.Dispatch<React.SetStateAction<SharedWebCredentials | undefined>> ]= useState();
 
   const loginContextFns = {
-    setServerFn: (state: JellifyServer | undefined) => {
-      jellifyServerMutation.mutate(state)
-      setServer(state);
-    },
     setKeychainFn: (state: SharedWebCredentials | undefined) => {
       setKeychain(state);
     }
   }
 
+  const { data: api, isPending, refetch } = useApi();
+
+  const apiContext = useMemo(() => ({api, isPending, refetch}),
+  [api, isPending, refetch] 
+);
+
   return (
-    (
-      <LoginContext.Provider value={{keychain, server, loginContextFns}}>
+    (isPending) ? (
+      <SafeAreaView style={jellifyStyles.container}>
+        <Text>Logging in</Text>
+        <ActivityIndicator />
+      </SafeAreaView>
+    ) : (
+      <LoginProvider loginContextFns={loginContextFns}>
         <NavigationContainer>
           <SafeAreaView style={jellifyStyles.container}>
-          { (credentials.isSuccess && !_.isUndefined(credentials.data)) ? <Navigation /> : <Login /> }
+          { (!_.isUndefined(api)) ? <Navigation /> : <Login /> }
           </SafeAreaView>
         </NavigationContainer>
-      </LoginContext.Provider>
+      </LoginProvider>
     )
   );
 }
\ No newline at end of file
diff --git a/components/providers.tsx b/components/providers.tsx
new file mode 100644
index 00000000..331c7209
--- /dev/null
+++ b/components/providers.tsx
@@ -0,0 +1,26 @@
+import React, { useMemo } from "react"
+import { LoginContext, LoginContextFns } from "./contexts"
+import { useCredentials } from "../api/queries/keychain"
+import { QueryObserverResult } from "@tanstack/react-query"
+import { SharedWebCredentials } from "react-native-keychain"
+
+type LoginProviderProps = {
+    loginContextFns: LoginContextFns
+}
+
+export default function LoginProvider(props: React.PropsWithChildren<LoginProviderProps>): React.JSX.Element {
+
+    const { data: keychain, isPending } = useCredentials;
+
+    const loginContextFns = props.loginContextFns
+
+    const loginContext = useMemo(() => ({keychain, isPending, loginContextFns}),
+        [keychain, isPending, loginContextFns] 
+    );
+
+    return (
+        <LoginContext.Provider value={loginContext}>
+            {props.children}
+        </LoginContext.Provider>
+    )
+}
\ No newline at end of file