diff --git a/tranga-website/src/Components/Settings/Download.tsx b/tranga-website/src/Components/Settings/Download.tsx
new file mode 100644
index 0000000..4cbd799
--- /dev/null
+++ b/tranga-website/src/Components/Settings/Download.tsx
@@ -0,0 +1,14 @@
+import {SettingsItem} from "./Settings.tsx";
+import ImageCompression from "./ImageCompression.tsx";
+import DownloadLanguage from "./DownloadLanguage.tsx";
+import ChapterNamingScheme from "./ChapterNamingScheme.tsx";
+
+export default function (){
+    return (
+        <SettingsItem title={"Download"}>
+            <ImageCompression />
+            <DownloadLanguage />
+            <ChapterNamingScheme />
+        </SettingsItem>
+    )
+}
\ No newline at end of file
diff --git a/tranga-website/src/Components/Settings/LibraryConnectors/AddLibraryConnector.tsx b/tranga-website/src/Components/Settings/LibraryConnectors/AddLibraryConnector.tsx
new file mode 100644
index 0000000..5f58618
--- /dev/null
+++ b/tranga-website/src/Components/Settings/LibraryConnectors/AddLibraryConnector.tsx
@@ -0,0 +1,19 @@
+import {Modal, ModalDialog, Tab, TabList, Tabs} from "@mui/joy";
+import ModalClose from "@mui/joy/ModalClose";
+import * as React from "react";
+
+export default function ({open, setOpen} : {open: boolean, setOpen: Dispatch<boolean>}) {
+    return (
+        <Modal open={open} onClose={() => setOpen(false)}>
+            <ModalDialog>
+                <ModalClose />
+                <Tabs sx={{width:'95%'}} defaultValue={"komga"}>
+                    <TabList>
+                        <Tab value={"komga"}>Komga</Tab>
+                        <Tab value={"kavita"}>Kavita</Tab>
+                    </TabList>
+                </Tabs>
+            </ModalDialog>
+        </Modal>
+    );
+}
\ No newline at end of file
diff --git a/tranga-website/src/Components/Settings/LibraryConnectors/LibraryConnectors.tsx b/tranga-website/src/Components/Settings/LibraryConnectors/LibraryConnectors.tsx
new file mode 100644
index 0000000..c4f1051
--- /dev/null
+++ b/tranga-website/src/Components/Settings/LibraryConnectors/LibraryConnectors.tsx
@@ -0,0 +1,18 @@
+import {Button, Card, Typography} from "@mui/joy";
+import {useState} from "react";
+import ListLibraryConnectors from "./ListLibraryConnectors.tsx";
+import AddLibraryConnector from "./AddLibraryConnector.tsx";
+
+export default function (){
+
+    const [addDialogOpen, setAddDialogOpen] = useState<boolean>(false);
+
+    return (
+        <Card>
+            <Typography>Library Connectors</Typography>
+            <Button onClick={() => setAddDialogOpen(true)}>Add</Button>
+            <ListLibraryConnectors />
+            <AddLibraryConnector open={addDialogOpen} setOpen={() => setAddDialogOpen(false)} />
+        </Card>
+    );
+}
\ No newline at end of file
diff --git a/tranga-website/src/Components/Settings/LibraryConnectors/ListLibraryConnectors.tsx b/tranga-website/src/Components/Settings/LibraryConnectors/ListLibraryConnectors.tsx
new file mode 100644
index 0000000..c63053f
--- /dev/null
+++ b/tranga-website/src/Components/Settings/LibraryConnectors/ListLibraryConnectors.tsx
@@ -0,0 +1,35 @@
+import {useContext, useEffect, useState} from "react";
+import {ApiContext} from "../../../apiClient/ApiContext.tsx";
+import {LibraryConnector} from "../../../apiClient/data-contracts.ts";
+import {Card, Chip, Input, Stack} from "@mui/joy";
+
+export default function (){
+    const Api = useContext(ApiContext);
+    const [libraryConnectors, setLibraryConnectors] = useState<LibraryConnector[]>([]);
+
+    useEffect(() => {
+        getConnectors();
+    }, []);
+
+    const getConnectors = () => {
+        Api.libraryConnectorList().then(r => {
+            if(r.ok)
+                setLibraryConnectors(r.data);
+        })
+    };
+
+    return (
+        <Stack direction={"column"} spacing={1}>
+            {libraryConnectors.map(c => <LibraryConnectorItem key={c.key} connector={c} />)}
+        </Stack>
+    );
+}
+
+function LibraryConnectorItem({connector} : {connector: LibraryConnector}){
+    return (
+        <Card>
+            <Chip>{connector.libraryType}</Chip>
+            <Input disabled value={connector.baseUrl} />
+        </Card>
+    );
+}
\ No newline at end of file
diff --git a/tranga-website/src/Components/Settings/NotificationConnectors.tsx b/tranga-website/src/Components/Settings/NotificationConnectors.tsx
deleted file mode 100644
index c363fba..0000000
--- a/tranga-website/src/Components/Settings/NotificationConnectors.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ReactNode } from "react";
-import { SettingsItem } from "./Settings.tsx";
-import { Button } from "@mui/joy";
-import NotificationConnectors from "./AddNotificationConnector.tsx";
-import * as React from "react";
-
-export default function (): ReactNode {
-  const [notificationConnectorsOpen, setNotificationConnectorsOpen] =
-    React.useState(false);
-
-  return (
-    <SettingsItem title={"Notification Connectors"}>
-      <Button onClick={() => setNotificationConnectorsOpen(true)}>
-        Add Notification Connector
-      </Button>
-      <NotificationConnectors
-        open={notificationConnectorsOpen}
-        setOpen={setNotificationConnectorsOpen}
-      />
-    </SettingsItem>
-  );
-}
diff --git a/tranga-website/src/Components/Settings/AddNotificationConnector.tsx b/tranga-website/src/Components/Settings/NotificationConnectors/AddNotificationConnector.tsx
similarity index 100%
rename from tranga-website/src/Components/Settings/AddNotificationConnector.tsx
rename to tranga-website/src/Components/Settings/NotificationConnectors/AddNotificationConnector.tsx
diff --git a/tranga-website/src/Components/Settings/NotificationConnectors/ListNotificationConnector.tsx b/tranga-website/src/Components/Settings/NotificationConnectors/ListNotificationConnector.tsx
new file mode 100644
index 0000000..af50e68
--- /dev/null
+++ b/tranga-website/src/Components/Settings/NotificationConnectors/ListNotificationConnector.tsx
@@ -0,0 +1,52 @@
+import {ApiContext} from "../../../apiClient/ApiContext.tsx";
+import {useContext, useEffect, useState} from "react";
+import { NotificationConnector } from "../../../apiClient/data-contracts.ts";
+import {Card, Chip, Input, Stack, Table, Textarea, Typography} from "@mui/joy";
+
+export default function (){
+    const Api = useContext(ApiContext);
+    const [notificationConnectors, setNotificationConnectors] = useState<NotificationConnector[]>([]);
+
+    useEffect(() => {
+        getConnectors();
+    }, []);
+
+    const getConnectors = () => {
+        Api.notificationConnectorList().then(r => {
+            if(r.ok)
+                setNotificationConnectors(r.data);
+        })
+    };
+
+    return (
+        <Stack direction={"column"} spacing={1}>
+            {notificationConnectors.map(c => <NotificationConnectorItem key={c.name} connector={c} />)}
+        </Stack>
+    );
+}
+
+function NotificationConnectorItem({connector} : {connector: NotificationConnector}){
+    return (
+        <Card>
+            <Typography left={"h2"}>{connector.name}</Typography>
+            <Input disabled startDecorator={<Chip>{connector.httpMethod}</Chip>} value={connector.url} />
+            <Table>
+                <thead>
+                    <tr>
+                        <th>Header</th>
+                        <th>Value</th>
+                    </tr>
+                </thead>
+                <tbody>
+                {Object.entries(connector.headers).map(x =>
+                    <tr key={x[0]}>
+                        <td>{x[0]}</td>
+                        <td>{[x[1]]}</td>
+                    </tr>
+                )}
+                </tbody>
+            </Table>
+            <Textarea disabled value={connector.body}/>
+        </Card>
+    );
+}
\ No newline at end of file
diff --git a/tranga-website/src/Components/Settings/Services.tsx b/tranga-website/src/Components/Settings/Services.tsx
new file mode 100644
index 0000000..b5a2eaa
--- /dev/null
+++ b/tranga-website/src/Components/Settings/Services.tsx
@@ -0,0 +1,17 @@
+import {SettingsItem} from "./Settings.tsx";
+import NotificationConnectors from "./NotificationConnectors/AddNotificationConnector.tsx";
+import FlareSolverr from "./FlareSolverr.tsx";
+import LibraryConnectors from "./LibraryConnectors/LibraryConnectors.tsx";
+
+export default function(){
+
+
+
+    return (
+        <SettingsItem title={"Services"} direction={"row"}>
+            <FlareSolverr />
+            <NotificationConnectors />
+            <LibraryConnectors />
+        </SettingsItem>
+    );
+}
\ No newline at end of file