diff --git a/src/components/App.jsx b/src/components/App.jsx
index b19fb34..25bcc31 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -1,38 +1,34 @@
-import { useState } from 'react';
+import { EmbeddedContextProvider, useEmbeddedContext } from '../contexts/EmbeddedContext';
+import { ThemeContextProvider} from '../contexts/ThemeContext';
+import { SettingsContextProvider } from '../contexts/SettingsContext';
+import { SceneryContextProvider } from '../contexts/SceneryContext';
+import { GradientsContextProvider } from '../contexts/GradientsContext';
+import { DistanceMeterContextProvider } from '../contexts/DistanceMeterContext';
+import { SideMenuContextProvider } from '../contexts/SideMenuContext';
 import Map from './map/Map';
 import Toolbar from './toolbar/Toolbar';
 import SideMenu from './sidemenu/SideMenu';
-import SettingsManager from './SettingsManager';
 import LocList from './loclist/LocList';
 import DialogManager from './dialog/DialogManager';
-import DistanceMeterContext from '../contexts/DistanceMeterContext';
-import {GradientsManager} from "./GradientsManager";
-import SideMenuContext from '../contexts/SideMenuContext';
-import SceneryManager from './SceneryManager';
-import ThemeManager from './ThemeManager';
-import {EmbeddedContextProvider, useEmbeddedContext} from '../contexts/EmbeddedContext';
 import './Themes.css';
 import './App.css';
 
 function App() {
-    const [sideMenuOpen, setSideMenuOpen] = useState(false);
-    const [distancePoints, setDistancePoints] = useState(null);
-
     return (
         <EmbeddedContextProvider>
-            <ThemeManager>
-                <SettingsManager>
-                    <SceneryManager>
-                        <GradientsManager>
-                            <DistanceMeterContext.Provider value={{distancePoints, setDistancePoints}}>
-                                <SideMenuContext.Provider value={{sideMenuOpen, setSideMenuOpen}}>
+            <ThemeContextProvider>
+                <SettingsContextProvider>
+                    <SceneryContextProvider>
+                        <GradientsContextProvider>
+                            <DistanceMeterContextProvider>
+                                <SideMenuContextProvider>
                                     <AppContent />
-                                </SideMenuContext.Provider>
-                            </DistanceMeterContext.Provider>
-                        </GradientsManager>
-                    </SceneryManager>
-                </SettingsManager>
-            </ThemeManager>
+                                </SideMenuContextProvider>
+                            </DistanceMeterContextProvider>
+                        </GradientsContextProvider>
+                    </SceneryContextProvider>
+                </SettingsContextProvider>
+            </ThemeContextProvider>
         </EmbeddedContextProvider>
     );
 }
diff --git a/src/contexts/DistanceMeterContext.js b/src/contexts/DistanceMeterContext.js
deleted file mode 100644
index 454b591..0000000
--- a/src/contexts/DistanceMeterContext.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { createContext } from 'react';
-
-const DistanceMeterContext = createContext();
-export default DistanceMeterContext;
diff --git a/src/contexts/DistanceMeterContext.jsx b/src/contexts/DistanceMeterContext.jsx
new file mode 100644
index 0000000..d31ce4e
--- /dev/null
+++ b/src/contexts/DistanceMeterContext.jsx
@@ -0,0 +1,16 @@
+import { createContext, useState } from 'react';
+
+const DistanceMeterContext = createContext();
+export default DistanceMeterContext;
+
+export const DistanceMeterContextProvider = ({children}) => {
+    const [distancePoints, setDistancePoints] = useState([]);
+
+    return (
+        <DistanceMeterContext.Provider value={{
+            distancePoints, setDistancePoints
+        }}>
+            { children }
+        </DistanceMeterContext.Provider>
+    );
+}
diff --git a/src/contexts/GradientsContext.js b/src/contexts/GradientsContext.js
deleted file mode 100644
index a8c2001..0000000
--- a/src/contexts/GradientsContext.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { createContext } from 'react';
-
-const GradientsContext = createContext();
-export default GradientsContext;
diff --git a/src/components/GradientsManager.jsx b/src/contexts/GradientsContext.jsx
similarity index 89%
rename from src/components/GradientsManager.jsx
rename to src/contexts/GradientsContext.jsx
index f6f58e5..0f7682e 100644
--- a/src/components/GradientsManager.jsx
+++ b/src/contexts/GradientsContext.jsx
@@ -1,7 +1,9 @@
+import {createContext, useContext, useMemo} from "react";
 import Constants from "../helpers/constants";
-import {useContext, useMemo} from "react";
-import GradientsContext from "../contexts/GradientsContext";
-import SceneryContext from "../contexts/SceneryContext";
+import SceneryContext from "./SceneryContext";
+
+const GradientsContext = createContext();
+export default GradientsContext;
 
 function getMinMax(trackColorMode, scenery) {
     if (trackColorMode === 'elevation') {
@@ -54,10 +56,8 @@ function createGradientDefs(scenery) {
     );
 }
 
-export function GradientsManager(props) {
-    const { children } = props;
+export function GradientsContextProvider({children}) {
     const { scenery } = useContext(SceneryContext);
-
     const gradientDefs = useMemo(() => createGradientDefs(scenery), [scenery]);
 
     return (
diff --git a/src/contexts/SceneryContext.js b/src/contexts/SceneryContext.js
deleted file mode 100644
index 061f927..0000000
--- a/src/contexts/SceneryContext.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { createContext } from 'react';
-
-const SceneryContext = createContext();
-export default SceneryContext;
diff --git a/src/components/SceneryManager.jsx b/src/contexts/SceneryContext.jsx
similarity index 94%
rename from src/components/SceneryManager.jsx
rename to src/contexts/SceneryContext.jsx
index f6106c4..65f966a 100644
--- a/src/components/SceneryManager.jsx
+++ b/src/contexts/SceneryContext.jsx
@@ -1,17 +1,19 @@
-import { useState, useCallback, useEffect, useRef } from 'react';
-import SceneryContext from '../contexts/SceneryContext';
+import { createContext, useState, useCallback, useEffect, useRef } from 'react';
 import { useZoomPanEmitter } from '../hooks/useZoomPubSub';
 import SceneryParser from '../model/parsing/scenery-parser';
 import SceneryParserLog from '../model/parsing/scenery-parser-log';
 import { showCustomDialog, showDialog } from '../services/dialogService';
 import { resetHoveredTracksStack } from '../services/trackHoverInfoService';
-import SceneryLoadedDialog from './scenery-loaded-dialog/SceneryLoadedDialog';
+import SceneryLoadedDialog from '../components/scenery-loaded-dialog/SceneryLoadedDialog';
 import Constants from '../helpers/constants';
 import MiscHelper from '../helpers/miscHelper';
 import ElectrificationResolver from '../model/parsing/electrification-resolver';
-import { useEmbeddedContext } from '../contexts/EmbeddedContext';
+import { useEmbeddedContext } from './EmbeddedContext';
 
-export default function SceneryManager(props) {
+const SceneryContext = createContext();
+export default SceneryContext;
+
+export const SceneryContextProvider = ({children}) => {
     const [isLoading, setIsLoading] = useState(false);
     const [scenery, setScenery] = useState(null);
     const [sceneryListData, setSceneryListData] = useState(null);
@@ -180,7 +182,7 @@ export default function SceneryManager(props) {
 
     return (
         <SceneryContext.Provider value={{ isLoading, scenery, sceneryListData, loadScenery, loadCustomScenery, electrificationStepModeStep }}>
-            {props.children}
+            {children}
         </SceneryContext.Provider>
     );
-}
\ No newline at end of file
+}
diff --git a/src/contexts/SettingsContext.js b/src/contexts/SettingsContext.js
deleted file mode 100644
index e8b1c4f..0000000
--- a/src/contexts/SettingsContext.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { createContext } from 'react';
-
-const SettingsContext = createContext();
-export default SettingsContext;
diff --git a/src/components/SettingsManager.jsx b/src/contexts/SettingsContext.jsx
similarity index 84%
rename from src/components/SettingsManager.jsx
rename to src/contexts/SettingsContext.jsx
index 3b0b7ae..d6ff8d8 100644
--- a/src/components/SettingsManager.jsx
+++ b/src/contexts/SettingsContext.jsx
@@ -1,8 +1,10 @@
-import { useCallback, useEffect, useState } from "react";
-import SettingsContext from "../contexts/SettingsContext";
+import { createContext, useState, useCallback, useEffect } from 'react';
 import Constants from "../helpers/constants";
 
-export default function SettingsManager(props) {
+const SettingsContext = createContext();
+export default SettingsContext;
+
+export const SettingsContextProvider = ({children}) => {
     const [ layers, setLayers ] = useState([]);
     const [ trackColorMode, setTrackColorMode ] = useState(Constants.trackColorModeDefault);
     const [ showTrackHoverInfo, setShowTrackHoverInfo ] = useState(true);
@@ -32,7 +34,7 @@ export default function SettingsManager(props) {
             extendedSignals, setExtendedSignals,
             originalSignalNames, setOriginalSignalNames
         }}>
-            { props.children }
+            { children }
         </SettingsContext.Provider>
     );
-}
\ No newline at end of file
+}
diff --git a/src/contexts/SideMenuContext.js b/src/contexts/SideMenuContext.js
deleted file mode 100644
index 56a30db..0000000
--- a/src/contexts/SideMenuContext.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { createContext } from 'react';
-
-const SideMenuContext = createContext();
-export default SideMenuContext;
diff --git a/src/contexts/SideMenuContext.jsx b/src/contexts/SideMenuContext.jsx
new file mode 100644
index 0000000..83eec0c
--- /dev/null
+++ b/src/contexts/SideMenuContext.jsx
@@ -0,0 +1,16 @@
+import { createContext, useState } from 'react';
+
+const SideMenuContext = createContext();
+export default SideMenuContext;
+
+export const SideMenuContextProvider = ({children}) => {
+    const [sideMenuOpen, setSideMenuOpen] = useState(false);
+
+    return (
+        <SideMenuContext.Provider value={{
+            sideMenuOpen, setSideMenuOpen
+        }}>
+            { children }
+        </SideMenuContext.Provider>
+    );
+}
diff --git a/src/contexts/ThemeContext.js b/src/contexts/ThemeContext.js
deleted file mode 100644
index 1c69777..0000000
--- a/src/contexts/ThemeContext.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { createContext } from 'react';
-
-const ThemeContext = createContext();
-export default ThemeContext;
diff --git a/src/components/ThemeManager.jsx b/src/contexts/ThemeContext.jsx
similarity index 64%
rename from src/components/ThemeManager.jsx
rename to src/contexts/ThemeContext.jsx
index 2d98164..ae787c3 100644
--- a/src/components/ThemeManager.jsx
+++ b/src/contexts/ThemeContext.jsx
@@ -1,7 +1,9 @@
-import { useState } from "react";
-import ThemeContext from "../contexts/ThemeContext";
+import { createContext, useState } from 'react';
 
-export default function ThemeManager(props) {
+const ThemeContext = createContext();
+export default ThemeContext;
+
+export const ThemeContextProvider = ({children}) => {
     const [ lightMode, setLightMode ] = useState(false);
 
     if(lightMode === true) {
@@ -14,7 +16,7 @@ export default function ThemeManager(props) {
         <ThemeContext.Provider value={{
             lightMode, setLightMode
         }}>
-            { props.children }
+            { children }
         </ThemeContext.Provider>
     );
 }