diff --git a/app/frontend/src/components/Mindmap/Mindmap.module.css b/app/frontend/src/components/Mindmap/Mindmap.module.css
index a9824ff7..f8203f2b 100644
--- a/app/frontend/src/components/Mindmap/Mindmap.module.css
+++ b/app/frontend/src/components/Mindmap/Mindmap.module.css
@@ -23,6 +23,13 @@
     margin-right: 5 px;
 }
 
+.darkmindmap {
+    --markmap-code-bg: #000 !important;
+    --markmap-code-color: #fff !important;
+    --markmap-circle-open-bg: #222 !important;
+    --markmap-text-color: #ccc !important;
+}
+
 .answerText {
     white-space: pre-wrap;
     font-size: var(--fontSizeBase400);
diff --git a/app/frontend/src/components/Mindmap/Mindmap.tsx b/app/frontend/src/components/Mindmap/Mindmap.tsx
index 283c6926..1e8d7f94 100644
--- a/app/frontend/src/components/Mindmap/Mindmap.tsx
+++ b/app/frontend/src/components/Mindmap/Mindmap.tsx
@@ -1,6 +1,6 @@
 import { Transformer } from "markmap-lib";
 import { Markmap } from "markmap-view";
-import { useLayoutEffect, useRef, useState } from "react";
+import { useContext, useLayoutEffect, useRef, useState } from "react";
 import styles from "./Mindmap.module.css";
 import { Stack } from "@fluentui/react";
 import { useTranslation } from "react-i18next";
@@ -8,6 +8,7 @@ import { Button, Tooltip } from "@fluentui/react-components";
 import { ArrowDownload24Regular, ContentView24Regular, ScaleFill24Regular } from "@fluentui/react-icons";
 import { AnswerIcon } from "../Answer/AnswerIcon";
 import { IPureNode } from "markmap-common";
+import { LightContext } from "../../pages/layout/LightContext";
 interface Props {
     markdown: string;
 }
@@ -18,6 +19,7 @@ export const Mindmap = ({ markdown }: Props) => {
     const svgEl = useRef<SVGSVGElement>(null);
     const [isSourceView, setIsSourceView] = useState(false);
     const [freeplaneXML, setFreeplaneXML] = useState("");
+    const isLight = useContext(LightContext);
 
     useLayoutEffect(() => {
         createMM();
@@ -153,7 +155,7 @@ export const Mindmap = ({ markdown }: Props) => {
             {!isSourceView ? (
                 <Stack.Item grow>
                     <div className={styles.mindmapContainer}>
-                        <svg id="markmap" className={styles.svgMark} ref={svgEl} aria-hidden="true" role="img"></svg>
+                        <svg id="markmap" className={`${styles.svgMark} ${isLight ? "" : styles.darkmindmap}`} ref={svgEl} aria-hidden="true" role="img"></svg>
                     </div>
                 </Stack.Item>
             ) : (
diff --git a/app/frontend/src/pages/layout/Layout.tsx b/app/frontend/src/pages/layout/Layout.tsx
index 721ff7c7..4e4599f8 100644
--- a/app/frontend/src/pages/layout/Layout.tsx
+++ b/app/frontend/src/pages/layout/Layout.tsx
@@ -14,6 +14,7 @@ import { FluentProvider, Theme } from "@fluentui/react-components";
 import { useStyles, STORAGE_KEYS, adjustTheme } from "./LayoutHelper";
 import { DEFAULTLLM, LLMContext } from "../../components/LLMSelector/LLMContextProvider";
 import { getBotName } from "../../service/storage";
+import { LightContext } from "./LightContext";
 
 const formatDate = (date: Date) => {
     let formatted_date = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
@@ -135,91 +136,99 @@ export const Layout = () => {
 
     return (
         <FluentProvider theme={theme}>
-            <div className={styles.layout}>
-                <header className={styles2.header} role={"banner"}>
-                    <div className={styles.header}>
-                        <Link to="/" className={styles.headerTitleContainer}>
-                            <img
-                                src={config.frontend.alternative_logo ? alternative_logo : isLight ? logo : logo_black}
-                                alt="MUCGPT logo"
-                                aria-label="MUCGPT Logo"
-                                className={styles.logo}
-                            ></img>
-                            <h3 className={styles.headerTitle} aria-description="Umgebung:">
-                                {config.frontend.labels.env_name}
-                            </h3>
-                        </Link>
-                        <div className={styles.headerNavList}>
-                            <div className={styles.headerNavLeftMargin}>
-                                <NavLink to="/" className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}>
-                                    MUCGPT
-                                </NavLink>
-                            </div>
-                            <div className={styles.headerNavLeftMargin}>
-                                <NavLink to="/chat" className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}>
-                                    {t("header.chat")}
-                                </NavLink>
-                            </div>
-                            <div className={styles.headerNavLeftMargin}>
-                                <NavLink
-                                    to="/sum"
-                                    state={{ from: "This is my props" }}
-                                    className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}
-                                >
-                                    {t("header.sum")}
-                                </NavLink>
-                            </div>
-                            <div className={styles.headerNavLeftMargin}>
-                                <NavLink to="/brainstorm" className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}>
-                                    {t("header.brainstorm")}
-                                </NavLink>
-                            </div>
-                            {simply && (
+            <LightContext.Provider value={isLight}>
+                <div className={styles.layout}>
+                    <header className={styles2.header} role={"banner"}>
+                        <div className={styles.header}>
+                            <Link to="/" className={styles.headerTitleContainer}>
+                                <img
+                                    src={config.frontend.alternative_logo ? alternative_logo : isLight ? logo : logo_black}
+                                    alt="MUCGPT logo"
+                                    aria-label="MUCGPT Logo"
+                                    className={styles.logo}
+                                ></img>
+                                <h3 className={styles.headerTitle} aria-description="Umgebung:">
+                                    {config.frontend.labels.env_name}
+                                </h3>
+                            </Link>
+                            <div className={styles.headerNavList}>
+                                <div className={styles.headerNavLeftMargin}>
+                                    <NavLink to="/" className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}>
+                                        MUCGPT
+                                    </NavLink>
+                                </div>
+                                <div className={styles.headerNavLeftMargin}>
+                                    <NavLink to="/chat" className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}>
+                                        {t("header.chat")}
+                                    </NavLink>
+                                </div>
                                 <div className={styles.headerNavLeftMargin}>
-                                    <NavLink to="/simply" className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}>
-                                        {t("header.simply")}
+                                    <NavLink
+                                        to="/sum"
+                                        state={{ from: "This is my props" }}
+                                        className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}
+                                    >
+                                        {t("header.sum")}
+                                    </NavLink>
+                                </div>
+                                <div className={styles.headerNavLeftMargin}>
+                                    <NavLink
+                                        to="/brainstorm"
+                                        className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}
+                                    >
+                                        {t("header.brainstorm")}
+                                    </NavLink>
+                                </div>
+                                {simply && (
+                                    <div className={styles.headerNavLeftMargin}>
+                                        <NavLink
+                                            to="/simply"
+                                            className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}
+                                        >
+                                            {t("header.simply")}
+                                        </NavLink>
+                                    </div>
+                                )}
+                                <div className={styles.headerNavLeftMargin}>
+                                    <NavLink
+                                        to={"/bot/" + title[0]}
+                                        className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}
+                                    >
+                                        {title[1]}
                                     </NavLink>
                                 </div>
-                            )}
-                            <div className={styles.headerNavLeftMargin}>
-                                <NavLink
-                                    to={"/bot/" + title[0]}
-                                    className={({ isActive }) => (isActive ? styles.headerNavPageLinkActive : styles.headerNavPageLink)}
-                                >
-                                    {title[1]}
-                                </NavLink>
+                            </div>
+                            <div className={styles.SettingsDrawer}>
+                                <SettingsDrawer
+                                    defaultlang={language_pref}
+                                    onLanguageSelectionChanged={onLanguageSelectionChanged}
+                                    version={config.version}
+                                    commit={config.commit}
+                                    fontscale={fontscaling}
+                                    setFontscale={onFontscaleChange}
+                                    isLight={isLight}
+                                    setTheme={onThemeChange}
+                                    defaultLLM={llm_pref}
+                                    onLLMSelectionChanged={onLLMSelectionChanged}
+                                    llmOptions={models}
+                                    currentLLM={LLM}
+                                ></SettingsDrawer>
                             </div>
                         </div>
-                        <div className={styles.SettingsDrawer}>
-                            <SettingsDrawer
-                                defaultlang={language_pref}
-                                onLanguageSelectionChanged={onLanguageSelectionChanged}
-                                version={config.version}
-                                commit={config.commit}
-                                fontscale={fontscaling}
-                                setFontscale={onFontscaleChange}
-                                isLight={isLight}
-                                setTheme={onThemeChange}
-                                defaultLLM={llm_pref}
-                                onLLMSelectionChanged={onLLMSelectionChanged}
-                                llmOptions={models}
-                                currentLLM={LLM}
-                            ></SettingsDrawer>
-                        </div>
-                    </div>
-                </header>
-                <Outlet />
+                    </header>
+                    <Outlet />
 
-                <footer className={styles2.footer} role={"banner"}>
-                    <div>
-                        Landeshauptstadt München <br />
-                        RIT/it@M KICC <br />
-                    </div>
-                    <div className={styles.headerNavRightMargin}>
-                        <TermsOfUseDialog defaultOpen={!termsofuseread} onAccept={onAcceptTermsOfUse}></TermsOfUseDialog>
-                    </div>
-                </footer>
-            </div>
+                    <footer className={styles2.footer} role={"banner"}>
+                        <div>
+                            Landeshauptstadt München <br />
+                            RIT/it@M KICC <br />
+                        </div>
+                        <div className={styles.headerNavRightMargin}>
+                            <TermsOfUseDialog defaultOpen={!termsofuseread} onAccept={onAcceptTermsOfUse}></TermsOfUseDialog>
+                        </div>
+                    </footer>
+                </div>
+            </LightContext.Provider>
         </FluentProvider>
     );
 };
diff --git a/app/frontend/src/pages/layout/LightContext.tsx b/app/frontend/src/pages/layout/LightContext.tsx
new file mode 100644
index 00000000..6050e335
--- /dev/null
+++ b/app/frontend/src/pages/layout/LightContext.tsx
@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const LightContext = createContext(true);