diff --git a/tranga-website/src/App.tsx b/tranga-website/src/App.tsx
index 7f2327b..6780d5c 100644
--- a/tranga-website/src/App.tsx
+++ b/tranga-website/src/App.tsx
@@ -2,7 +2,7 @@ import Sheet from '@mui/joy/Sheet';
 import './App.css'
 import Settings from "./Settings.tsx";
 import Header from "./Header.tsx";
-import {Button} from "@mui/joy";
+import {Badge, Button} from "@mui/joy";
 import {useState} from "react";
 import {ApiUriContext} from "./api/fetchApi.tsx";
 import Search from './Components/Search.tsx';
@@ -11,6 +11,7 @@ export default function App () {
 
     const [showSettings, setShowSettings] = useState<boolean>(false);
     const [showSearch, setShowSearch] = useState<boolean>(false);
+    const [apiConnected, setApiConnected] = useState<boolean>(false);
 
     const [apiUri, setApiUri] = useState<string>(window.location.href.substring(0, window.location.href.lastIndexOf("/")));
 
@@ -18,10 +19,12 @@ export default function App () {
         <ApiUriContext.Provider value={apiUri}>
             <Sheet className={"app"}>
                 <Header>
-                    <Button onClick={() => setShowSettings(true)}>Settings</Button>
+                    <Badge color={"danger"} invisible={apiConnected} badgeContent={"!"}>
+                        <Button onClick={() => setShowSettings(true)}>Settings</Button>
+                    </Badge>
                     <Button onClick={() => setShowSearch(true)}>Search</Button>
                 </Header>
-                <Settings open={showSettings} setOpen={setShowSettings} setApiUri={setApiUri}/>
+                <Settings open={showSettings} setOpen={setShowSettings} setApiUri={setApiUri} setConnected={setApiConnected} />
                 <Sheet className={"app-content"}>
                     <Search open={showSearch} setOpen={setShowSearch} />
                 </Sheet>
diff --git a/tranga-website/src/Settings.tsx b/tranga-website/src/Settings.tsx
index 852537f..0f41da5 100644
--- a/tranga-website/src/Settings.tsx
+++ b/tranga-website/src/Settings.tsx
@@ -28,7 +28,7 @@ const checkConnection  = async (apiUri: string): Promise<boolean> =>{
         });
 }
 
-export default function Settings({open, setOpen, setApiUri}:{open:boolean, setOpen:React.Dispatch<React.SetStateAction<boolean>>, setApiUri:React.Dispatch<React.SetStateAction<string>>}) {
+export default function Settings({open, setOpen, setApiUri, setConnected}:{open:boolean, setOpen:React.Dispatch<React.SetStateAction<boolean>>, setApiUri:React.Dispatch<React.SetStateAction<string>>, setConnected:React.Dispatch<React.SetStateAction<boolean>>}) {
 
     const apiUri = useContext(ApiUriContext);
 
@@ -53,6 +53,7 @@ export default function Settings({open, setOpen, setApiUri}:{open:boolean, setOp
         setChecking(true);
         checkConnection(uri)
             .then((result) => {
+                setConnected(result);
                 setApiUriAccordionOpen(!result);
                 setApiUriColor(result ? "success" : "danger");
                 if(result)