diff --git a/tranga-website/src/App.tsx b/tranga-website/src/App.tsx
index 68c4a0f..090bd94 100644
--- a/tranga-website/src/App.tsx
+++ b/tranga-website/src/App.tsx
@@ -2,12 +2,13 @@ import Sheet from '@mui/joy/Sheet';
 import './App.css'
 import Settings from "./Components/Settings/Settings.tsx";
 import Header from "./Header.tsx";
-import {createContext, useEffect, useState} from "react";
+import {createContext, ReactNode, useEffect, useState} from "react";
 import {V2} from "./apiClient/V2.ts";
 import { ApiContext } from './apiClient/ApiContext.tsx';
 import MangaList from "./Components/Mangas/MangaList.tsx";
 import {FileLibrary, Manga, MangaConnector} from "./apiClient/data-contracts.ts";
 import Search from "./Components/Search.tsx";
+import {Typography} from "@mui/joy";
 
 export const MangaConnectorContext = createContext<MangaConnector[]>([]);
 export const MangaContext = createContext<Manga[]>([]);
@@ -16,7 +17,9 @@ export const FileLibraryContext = createContext<FileLibrary[]>([]);
 export default function App () {
     const apiUriStr = localStorage.getItem("apiUri") ?? window.location.href.substring(0, window.location.href.lastIndexOf("/")) + "/api";
     const [apiUri, setApiUri] = useState<string>(apiUriStr);
-    const [Api, setApi] = useState<V2>(new V2());
+    const [Api, setApi] = useState<V2>(new V2({
+        baseUrl: apiUri
+    }));
 
     const [mangaConnectors, setMangaConnectors] = useState<MangaConnector[]>([]);
     const [manga, setManga] = useState<Manga[]>([]);
@@ -44,14 +47,15 @@ export default function App () {
                     setManga(response.data);
             })
         })
-    }, [Api]);
+    }, []);
     
     
     useEffect(() => {
         localStorage.setItem("apiUri", apiUri);
-        setApi(new V2({
-            baseUrl: apiUri
-        }));
+        if (Api.baseUrl != apiUri)
+            setApi(new V2({
+                baseUrl: apiUri
+            }));
     }, [apiUri]);
 
     return (
@@ -59,19 +63,29 @@ export default function App () {
             <FileLibraryContext value={fileLibraries}>
                 <MangaConnectorContext.Provider value={mangaConnectors}>
                     <MangaContext.Provider value={manga}>
-                        <Sheet className={"app"}>
-                            <Header>
-                                <Settings setApiUri={setApiUri} />
-                            </Header>
-                            <Sheet className={"app-content"}>
-                                <MangaList mangas={manga}>
-                                    <Search />
-                                </MangaList>
-                            </Sheet>
-                        </Sheet>
+                        {
+                            Api ?
+                                <Sheet className={"app"}>
+                                    <Header>
+                                        <Settings setApiUri={setApiUri} />
+                                    </Header>
+                                    <Sheet className={"app-content"}>
+                                        <MangaList mangas={manga}>
+                                            <Search />
+                                        </MangaList>
+                                    </Sheet>
+                                </Sheet>
+                                : <Loading />
+                        }
                     </MangaContext.Provider>
                 </MangaConnectorContext.Provider>
             </FileLibraryContext>
         </ApiContext.Provider>
     );
 }
+
+function Loading () : ReactNode{
+    return (
+        <Typography>Loading</Typography>
+    );
+}
\ No newline at end of file