diff --git a/tranga-website/src/App.tsx b/tranga-website/src/App.tsx
index 398e582..1bf244b 100644
--- a/tranga-website/src/App.tsx
+++ b/tranga-website/src/App.tsx
@@ -8,6 +8,9 @@ import {ApiUriContext} from "./api/fetchApi.tsx";
 import Search from './Components/Search.tsx';
 import MangaList from "./Components/MangaList.tsx";
 import {CardHeight, CardWidth} from "./Components/Manga.tsx";
+import {MangaConnectorContext} from "./api/Contexts/MangaConnectorContext.tsx";
+import IMangaConnector from "./api/types/IMangaConnector.ts";
+import {GetAllConnectors} from "./api/MangaConnector.tsx";
 
 export default function App () {
 
@@ -23,38 +26,47 @@ export default function App () {
         localStorage.setItem("apiUri", apiUri);
     }, [apiUri]);
 
+    const [mangaConnectors, setMangaConnectors] = useState<IMangaConnector[]>([]);
+
+    useEffect(() => {
+        if(!apiConnected) return;
+        GetAllConnectors(apiUri).then(setMangaConnectors);
+    }, [apiConnected]);
+
     return (
         <ApiUriContext.Provider value={apiUri}>
-            <Sheet className={"app"}>
-                <Header>
-                    <Badge color={"danger"} invisible={apiConnected} badgeContent={"!"}>
-                        <Button onClick={() => setShowSettings(true)}>Settings</Button>
-                    </Badge>
-                </Header>
-                <Settings open={showSettings} setOpen={setShowSettings} setApiUri={setApiUri} setConnected={setApiConnected} />
-                <Search open={showSearch} setOpen={setShowSearch} />
-                <Sheet className={"app-content"}>
-                    <MangaList connected={apiConnected}>
-                        <Badge invisible sx={{margin: "8px !important"}}>
-                            <Card onClick={() => setShowSearch(true)} sx={{height:"fit-content",width:"fit-content"}}>
-                                <CardCover sx={{margin:"var(--Card-padding)"}}>
-                                    <img src={"/blahaj.png"} style={{height: CardHeight + "px", width: CardWidth + 10 + "px"}} />
-                                </CardCover>
-                                <CardCover sx={{
-                                    background: 'rgba(234, 119, 246, 0.14)',
-                                    backdropFilter: 'blur(6.9px)',
-                                    webkitBackdropFilter: 'blur(6.9px)',
-                                }}/>
-                                <CardContent>
-                                    <Box style={{height: CardHeight + "px", width: CardWidth + 10 + "px"}} >
-                                        <Typography level={"h1"}>Search</Typography>
-                                    </Box>
-                                </CardContent>
-                            </Card>
+            <MangaConnectorContext value={mangaConnectors}>
+                <Sheet className={"app"}>
+                    <Header>
+                        <Badge color={"danger"} invisible={apiConnected} badgeContent={"!"}>
+                            <Button onClick={() => setShowSettings(true)}>Settings</Button>
                         </Badge>
-                    </MangaList>
+                    </Header>
+                    <Settings open={showSettings} setOpen={setShowSettings} setApiUri={setApiUri} setConnected={setApiConnected} />
+                    <Search open={showSearch} setOpen={setShowSearch} />
+                    <Sheet className={"app-content"}>
+                        <MangaList connected={apiConnected}>
+                            <Badge invisible sx={{margin: "8px !important"}}>
+                                <Card onClick={() => setShowSearch(true)} sx={{height:"fit-content",width:"fit-content"}}>
+                                    <CardCover sx={{margin:"var(--Card-padding)"}}>
+                                        <img src={"/blahaj.png"} style={{height: CardHeight + "px", width: CardWidth + 10 + "px"}} />
+                                    </CardCover>
+                                    <CardCover sx={{
+                                        background: 'rgba(234, 119, 246, 0.14)',
+                                        backdropFilter: 'blur(6.9px)',
+                                        webkitBackdropFilter: 'blur(6.9px)',
+                                    }}/>
+                                    <CardContent>
+                                        <Box style={{height: CardHeight + "px", width: CardWidth + 10 + "px"}} >
+                                            <Typography level={"h1"}>Search</Typography>
+                                        </Box>
+                                    </CardContent>
+                                </Card>
+                            </Badge>
+                        </MangaList>
+                    </Sheet>
                 </Sheet>
-            </Sheet>
+            </MangaConnectorContext>
         </ApiUriContext.Provider>
     );
 }
diff --git a/tranga-website/src/Components/Manga.tsx b/tranga-website/src/Components/Manga.tsx
index f6bd09f..86f47a2 100644
--- a/tranga-website/src/Components/Manga.tsx
+++ b/tranga-website/src/Components/Manga.tsx
@@ -12,8 +12,7 @@ import {ApiUriContext, getData} from "../api/fetchApi.tsx";
 import {ReleaseStatusToPalette} from "../api/types/EnumMangaReleaseStatus.ts";
 import {SxProps} from "@mui/joy/styles/types";
 import MangaPopup from "./MangaPopup.tsx";
-import IMangaConnector from "../api/types/IMangaConnector.ts";
-import {GetConnector} from "../api/MangaConnector.tsx";
+import {MangaConnectorContext} from "../api/Contexts/MangaConnectorContext.tsx";
 
 export function MangaFromId({mangaId, children} : { mangaId: string, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined }){
     const [manga, setManga] = useState<IManga>();
@@ -44,13 +43,13 @@ export function Manga({manga: manga, children} : { manga: IManga, children?: Rea
     const CoverRef = useRef<HTMLImageElement>(null);
 
     const apiUri = useContext(ApiUriContext);
+    const mangaConnectors = useContext(MangaConnectorContext);
 
     const [expanded, setExpanded] = useState(false);
-    const [mangaConnector, setMangaConnector] = useState<IMangaConnector | undefined>(undefined);
+    const mangaConnector = mangaConnectors.find(all => all.name == manga.mangaConnectorName);
 
     useEffect(() => {
         LoadMangaCover();
-        LoadMangaConnector();
     }, [manga]);
 
     const LoadMangaCover = useCallback(() => {
@@ -66,10 +65,6 @@ export function Manga({manga: manga, children} : { manga: IManga, children?: Rea
         });
     }, [manga, apiUri])
 
-    const LoadMangaConnector = useCallback(() => {
-        GetConnector(apiUri, manga.mangaConnectorName).then(setMangaConnector);
-    }, [manga, apiUri]);
-
     const coverSx : SxProps = {
         height: CardHeight + "px",
         width: CardWidth + "px",