diff --git a/tranga-website/src/Components/Settings/Settings.tsx b/tranga-website/src/Components/Settings/Settings.tsx
index 4470bda..3abc2dd 100644
--- a/tranga-website/src/Components/Settings/Settings.tsx
+++ b/tranga-website/src/Components/Settings/Settings.tsx
@@ -6,12 +6,11 @@ import {
     AccordionSummary, Button, ColorPaletteProp,
     DialogContent,
     DialogTitle, Input,
-    Link, Modal, ModalDialog, Stack
+    Modal, ModalDialog
 } from "@mui/joy";
 import './Settings.css';
 import * as React from "react";
 import {createContext, Dispatch, ReactNode, useContext, useEffect, useState} from "react";
-import {Article} from '@mui/icons-material';
 import {TrangaSettings} from "../../apiClient/data-contracts.ts";
 import {ApiContext} from "../../apiClient/ApiContext.tsx";
 import NotificationConnectors from "./NotificationConnectors.tsx";
@@ -75,9 +74,6 @@ export default function Settings({setApiUri} : {setApiUri: Dispatch<React.SetSta
                             <ChapterNamingScheme />
                             <NotificationConnectors />
                         </AccordionGroup>
-                        <Stack spacing={2} direction="row">
-                            <Link target={"_blank"} href={Api.baseUrl + "/swagger"}><Article />Swagger Doc</Link>
-                        </Stack>
                     </DialogContent>
                 </ModalDialog>
             </Modal>
diff --git a/tranga-website/src/Header.tsx b/tranga-website/src/Header.tsx
index 09477fe..d28bea9 100644
--- a/tranga-website/src/Header.tsx
+++ b/tranga-website/src/Header.tsx
@@ -1,27 +1,34 @@
 import Sheet from "@mui/joy/Sheet";
-import {Box, Link, Stack, Typography} from "@mui/joy";
-import {ReactElement} from "react";
+import {Link, Stack, Typography} from "@mui/joy";
+import {ReactElement, useContext} from "react";
 import './Header.css';
-import { GitHub } from "@mui/icons-material";
+import {Article, GitHub} from "@mui/icons-material";
+import {ApiContext} from "./apiClient/ApiContext.tsx";
 
 export default function Header({children} : {children? : ReactElement<any, any> | ReactElement<any,any>[] | undefined}) : ReactElement {
+    const Api = useContext(ApiContext);
     
     return (
         <Sheet className={"header"}>
-            <Stack direction={"row"} spacing={2} sx={{width: "100%", alignItems: "center"}}>
-                {children}
-                <Box sx={{flexGrow: 1}} />
-                <img src={"/blahaj.png"} style={{cursor: "grab", maxHeight: "100%"}}/>
-                <Typography level={"h2"} sx={{
-                    background: "linear-gradient(110deg, var(--joy-palette-primary-solidBg), var(--joy-palette-success-400))", 
-                    WebkitBackgroundClip: "text",
-                    WebkitTextFillColor: "transparent",
-                    fontWeight: "bold",
-                    cursor: "default"
-                }}>Tranga</Typography>
-                <Box sx={{flexGrow: 1}} />
-                <Link target={"_blank"} href={"https://github.com/C9Glax/tranga"} color={"neutral"} height={"min-content"} ><GitHub /> Server</Link>
-                <Link target={"_blank"} href={"https://github.com/C9Glax/tranga-website"} color={"neutral"} height={"min-content"} ><GitHub /> Website</Link>
+            <Stack direction={"row"} spacing={2} sx={{width: "100%", alignItems: "center", justifyContent: "space-between"}} useFlexGap>
+                <Stack sx={{flexGrow: 1, flexBasis: 1}} direction={"row"} spacing={2}>
+                    {children}
+                </Stack>
+                <Stack sx={{flexGrow: 1, height: "100%", flexBasis: 1, justifyContent: "center"}} direction={"row"}>
+                    <img src={"/blahaj.png"} style={{cursor: "grab", maxHeight: "100%"}}/>
+                    <Typography level={"h2"} sx={{
+                        background: "linear-gradient(110deg, var(--joy-palette-primary-solidBg), var(--joy-palette-success-400))",
+                        WebkitBackgroundClip: "text",
+                        WebkitTextFillColor: "transparent",
+                        fontWeight: "bold",
+                        cursor: "default"
+                    }}>Tranga</Typography>
+                </Stack>
+                <Stack sx={{flexGrow: 1, flexBasis: 1, justifyContent: "flex-end"}} direction={"row"} spacing={2}>
+                    <Link target={"_blank"} href={"https://github.com/C9Glax/tranga"} color={"neutral"} height={"min-content"} ><GitHub /> Server</Link>
+                    <Link target={"_blank"} href={"https://github.com/C9Glax/tranga-website"} color={"neutral"} height={"min-content"} ><GitHub /> Website</Link>
+                    <Link target={"_blank"} href={Api.baseUrl + "/swagger"} color={"neutral"} height={"min-content"} ><Article />Swagger</Link>
+                </Stack>
             </Stack>
         </Sheet>
     );