diff --git a/src/Moryx.CommandCenter.Web/package.json b/src/Moryx.CommandCenter.Web/package.json
index 23d3fc945..f3e0e52f5 100644
--- a/src/Moryx.CommandCenter.Web/package.json
+++ b/src/Moryx.CommandCenter.Web/package.json
@@ -20,15 +20,14 @@
         "@types/uuid": "^9.0.8",
         "bootstrap": "4.6.2",
         "bootstrap5-toggle": "^5.0.6",
-        "history": "^4.10.1",
         "moment": "^2.30.1",
         "query-string": "^8.2.0",
         "react": "18.2.0",
         "react-bootstrap-toggle": "^2.3.2",
         "react-dom": "18.2.0",
         "react-redux": "^9.1.0",
-        "react-router": "^5.3.4",
-        "react-router-dom": "^5.3.4",
+        "react-router": "^6.22.0",
+        "react-router-dom": "^6.22.0",
         "react-router-redux": "^4.0.8",
         "react-toastify": "^10.0.4",
         "reactstrap": "^8.10.1",
diff --git a/src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenu.tsx b/src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenu.tsx
index 4d6123d43..87bfa4be3 100644
--- a/src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenu.tsx
+++ b/src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenu.tsx
@@ -4,42 +4,35 @@
 */
 
 import * as React from "react";
-import { Link, RouteComponentProps, withRouter } from "react-router-dom";
-import { Collapse } from "reactstrap";
+import { useNavigate } from "react-router-dom";
 import MenuItemModel from "../../models/MenuItemModel";
-import MenuModel from "../../models/MenuModel";
 import RoutingMenuItem from "./RoutingMenuItem";
 import { MenuProps } from "./TreeMenu";
 
-class RoutingMenu extends React.Component<RouteComponentProps<{}> & MenuProps, {}> {
+function RoutingMenu(props: MenuProps) {
+    const navigate = useNavigate();
 
-    constructor(props: RouteComponentProps<{}> & MenuProps) {
-        super (props);
-        this.state = {};
-    }
-
-    protected handleMenuItemClick(menuItem: MenuItemModel): void {
-        if (this.props.onActiveMenuItemChanged != null) {
-            this.props.onActiveMenuItemChanged(menuItem);
+    const handleMenuItemClick = (menuItem: MenuItemModel): void => {
+        if (props.onActiveMenuItemChanged != null) {
+            props.onActiveMenuItemChanged(menuItem);
         }
-        this.props.history.push(menuItem.NavPath);
-    }
+        navigate(menuItem.NavPath);
+    };
 
-    protected renderMenu(menuItems: MenuItemModel[]): React.ReactNode {
-        return menuItems.map ((menuItem, idx) => {
+    const renderMenu = (menuItems: MenuItemModel[]): React.ReactNode => {
+        return menuItems.map((menuItem, idx) => {
             return (
-                <RoutingMenuItem key={idx} MenuItem={menuItem} Level={0} onMenuItemClicked={(menuItem) => this.handleMenuItemClick(menuItem)} />
+                <RoutingMenuItem
+                    key={idx}
+                    MenuItem={menuItem}
+                    Level={0}
+                    onMenuItemClicked={(menuItem) => handleMenuItemClick(menuItem)}
+                />
             );
         });
-    }
+    };
 
-    public render(): React.ReactNode {
-        return (
-            <div>
-                {this.renderMenu(this.props.Menu.MenuItems)}
-            </div>
-        );
-    }
+    return <div>{renderMenu(props.Menu.MenuItems)}</div>;
 }
 
-export default withRouter<RouteComponentProps<{}> & MenuProps, React.ComponentType<any>>(RoutingMenu);
+export default RoutingMenu;
diff --git a/src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenuItem.tsx b/src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenuItem.tsx
index 3b86e44d0..0cbc665ae 100644
--- a/src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenuItem.tsx
+++ b/src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenuItem.tsx
@@ -1,11 +1,10 @@
 /*
- * Copyright (c) 2020, Phoenix Contact GmbH & Co. KG
- * Licensed under the Apache License, Version 2.0
+* Copyright (c) 2020, Phoenix Contact GmbH & Co. KG
+* Licensed under the Apache License, Version 2.0
 */
 
-import { Location, UnregisterCallback } from "history";
 import * as React from "react";
-import { Link, RouteComponentProps, withRouter } from "react-router-dom";
+import { Link, Location, useLocation, useNavigate } from "react-router-dom";
 import { ListGroupItem } from "reactstrap";
 import MenuItemModel from "../../models/MenuItemModel";
 
@@ -19,54 +18,42 @@ interface MenuItemState {
     IsOpened: boolean;
 }
 
-class RoutingMenuItem extends React.Component<RouteComponentProps<{}> & MenuItemProps, MenuItemState> {
-    private unregisterListenerCallback: UnregisterCallback;
+function RoutingMenuItem(props: MenuItemProps) {
+    const location = useLocation();
+    const navigate = useNavigate();
 
-    constructor(props: RouteComponentProps<{}> & MenuItemProps) {
-        super(props);
-        this.state = { IsOpened: this.isOpened(this.props.location) };
+    const isOpened = (location: Location): boolean => {
+        return location.pathname.startsWith(props.MenuItem.NavPath);
+    };
 
-        this.unregisterListenerCallback = this.props.history.listen(this.onRouteChanged.bind(this));
-        this.onMenuItemClicked = this.onMenuItemClicked.bind(this);
-    }
+    const [IsOpened, setIsOpened] = React.useState<boolean>(isOpened(location));
 
-    public componentWillUnmount(): void {
-        this.unregisterListenerCallback();
-    }
+    React.useEffect(() => {
+        setIsOpened(isOpened(location));
+    }, [navigate]);
 
-    private isOpened(location: Location): boolean {
-        return location.pathname.startsWith(this.props.MenuItem.NavPath);
-    }
-
-    private onRouteChanged(location: Location, action: string): void {
-        this.setState({ IsOpened: this.isOpened(location) });
-    }
-
-    private handleMenuItemClick(e: React.MouseEvent<HTMLElement>): void {
+    const handleMenuItemClick = (e: React.MouseEvent<HTMLElement>): void => {
         e.preventDefault();
+        setIsOpened((prevState) => !prevState);
+        onMenuItemClicked(props.MenuItem);
+    };
 
-        this.setState((prevState) => ({ IsOpened: !prevState.IsOpened }));
-        this.onMenuItemClicked(this.props.MenuItem);
-    }
-
-    private onMenuItemClicked(menuItem: MenuItemModel): void {
-        if (this.props.onMenuItemClicked != null) {
-            this.props.onMenuItemClicked(menuItem);
+    const onMenuItemClicked = (menuItem: MenuItemModel): void => {
+        if (props.onMenuItemClicked != null) {
+            props.onMenuItemClicked(menuItem);
         }
-    }
-
-    public render(): React.ReactNode {
-        const isActive = this.props.location.pathname.includes(this.props.MenuItem.NavPath);
-
-        return (
-            <ListGroupItem active={isActive} className="menu-item" onClick={(e: React.MouseEvent<HTMLElement>) => this.handleMenuItemClick(e)}>
-                <Link to={this.props.MenuItem.NavPath}>
-                    {this.props.MenuItem.Name}
-                </Link>
-                {this.props.MenuItem.Content}
-            </ListGroupItem >
-        );
-    }
+    };
+
+    const isActive = isOpened(location);
+
+    return (
+        <ListGroupItem active={isActive} className="menu-item" onClick={(e: React.MouseEvent<HTMLElement>) => handleMenuItemClick(e)}>
+            <Link to={props.MenuItem.NavPath}>
+                {props.MenuItem.Name}
+            </Link>
+            {props.MenuItem.Content}
+        </ListGroupItem>
+    );
 }
 
-export default withRouter<RouteComponentProps<{}> & MenuItemProps, React.ComponentType<any>>(RoutingMenuItem);
+export default RoutingMenuItem;
diff --git a/src/Moryx.CommandCenter.Web/src/common/components/Menu/TreeMenuItem.tsx b/src/Moryx.CommandCenter.Web/src/common/components/Menu/TreeMenuItem.tsx
index f2b5efade..3165247e4 100644
--- a/src/Moryx.CommandCenter.Web/src/common/components/Menu/TreeMenuItem.tsx
+++ b/src/Moryx.CommandCenter.Web/src/common/components/Menu/TreeMenuItem.tsx
@@ -6,7 +6,6 @@
 import { mdiChevronDown, mdiChevronUp } from "@mdi/js";
 import Icon from "@mdi/react";
 import * as React from "react";
-import { Link, RouteComponentProps, withRouter } from "react-router-dom";
 import { Col, Collapse, Container, Row } from "reactstrap";
 import MenuItemModel, { IconType } from "../../models/MenuItemModel";
 
@@ -22,7 +21,7 @@ interface MenuItemState {
 
 export default class TreeMenuItem extends React.Component<MenuItemProps, MenuItemState> {
     constructor(props: MenuItemProps) {
-        super (props);
+        super(props);
         this.state = { IsOpened: false };
 
         this.onMenuItemClicked = this.onMenuItemClicked.bind(this);
@@ -42,12 +41,12 @@ export default class TreeMenuItem extends React.Component<MenuItemProps, MenuIte
     }
 
     private renderSubMenuItems(): React.ReactNode {
-        return this.props.MenuItem.SubMenuItems.map ((menuItem, idx) =>
+        return this.props.MenuItem.SubMenuItems.map((menuItem, idx) =>
             <TreeMenuItem key={idx}
-                          MenuItem={menuItem}
-                          Level={this.props.Level + 1}
-                          onMenuItemClicked={this.onMenuItemClicked}
-                          />);
+                MenuItem={menuItem}
+                Level={this.props.Level + 1}
+                onMenuItemClicked={this.onMenuItemClicked}
+            />);
     }
 
     public render(): React.ReactNode {
@@ -55,34 +54,34 @@ export default class TreeMenuItem extends React.Component<MenuItemProps, MenuIte
         const iconType = this.props.MenuItem.IconType == undefined ? IconType.Icon : IconType.Image;
         const defaultContent = (
             <div>
-                { this.props.MenuItem.Icon !== undefined && iconType === IconType.Icon &&
+                {this.props.MenuItem.Icon !== undefined && iconType === IconType.Icon &&
                     <Icon path={this.props.MenuItem.Icon} className="icon right-space" />
                 }
-                { this.props.MenuItem.Icon !== undefined && iconType === IconType.Image &&
-                    <img src={this.props.MenuItem.Icon} style={{marginRight: "4px"}} />
+                {this.props.MenuItem.Icon !== undefined && iconType === IconType.Image &&
+                    <img src={this.props.MenuItem.Icon} style={{ marginRight: "4px" }} />
                 }
                 <Icon path={this.props.MenuItem.Icon} className="icon right-sapce" />
-                <span style={{wordBreak: "break-all"}}>{this.props.MenuItem.Name}</span>
+                <span style={{ wordBreak: "break-all" }}>{this.props.MenuItem.Name}</span>
             </div>
         );
 
         return (
-            <div style={{paddingLeft: this.props.Level * 10 + "px", margin: "5px 0px 5px 0px"}}>
+            <div style={{ paddingLeft: this.props.Level * 10 + "px", margin: "5px 0px 5px 0px" }}>
                 <Container fluid={true} className="menu-item">
                     <Row>
                         <Col md={10}>
                             <div>
-                                { this.props.MenuItem.Content === undefined &&
+                                {this.props.MenuItem.Content === undefined &&
                                     defaultContent
                                 }
-                                { this.props.MenuItem.Content !== undefined &&
+                                {this.props.MenuItem.Content !== undefined &&
                                     this.props.MenuItem.Content
                                 }
                             </div>
                         </Col>
                         <Col md={2} onClick={(e: React.MouseEvent<HTMLElement>) => this.handleMenuItemClick(e)}>
-                            { hasSubItems &&
-                                <Icon path={this.state.IsOpened ? mdiChevronUp : mdiChevronDown} className="icon"/>
+                            {hasSubItems &&
+                                <Icon path={this.state.IsOpened ? mdiChevronUp : mdiChevronDown} className="icon" />
                             }
                         </Col>
                     </Row>
diff --git a/src/Moryx.CommandCenter.Web/src/common/components/ModuleHeader.tsx b/src/Moryx.CommandCenter.Web/src/common/components/ModuleHeader.tsx
index a69e0aaff..3f858560e 100644
--- a/src/Moryx.CommandCenter.Web/src/common/components/ModuleHeader.tsx
+++ b/src/Moryx.CommandCenter.Web/src/common/components/ModuleHeader.tsx
@@ -48,7 +48,7 @@ export class ModuleHeader extends React.Component<ModulePropModel & ModuleDispat
             <Navbar className="navbar-default" expand="md">
                 <Nav className="navbar-left" navbar={true}>
                     <NavItem>
-                        <NavLink exact={true} to={`/modules/${this.props.ModuleName}`} className="navbar-nav-link">
+                        <NavLink end={true} to={`/modules/${this.props.ModuleName}`} className="navbar-nav-link">
                             <Icon path={mdiMonitor} className="icon right-space" />
                             Overview
                         </NavLink>
@@ -61,7 +61,7 @@ export class ModuleHeader extends React.Component<ModulePropModel & ModuleDispat
                     </NavItem>
                     <NavItem >
                         <NavLink to={`/modules/${this.props.ModuleName}/console`} className="navbar-nav-link">
-                            <Icon path={mdiConsoleLine}className="icon right-space" />
+                            <Icon path={mdiConsoleLine} className="icon right-space" />
                             Console
                         </NavLink>
                     </NavItem>
diff --git a/src/Moryx.CommandCenter.Web/src/common/container/App.tsx b/src/Moryx.CommandCenter.Web/src/common/container/App.tsx
index 63d2542a7..bd24fae0c 100644
--- a/src/Moryx.CommandCenter.Web/src/common/container/App.tsx
+++ b/src/Moryx.CommandCenter.Web/src/common/container/App.tsx
@@ -5,8 +5,8 @@
 
 import * as React from "react";
 import { connect } from "react-redux";
-import { Redirect, Route, RouteComponentProps, Switch, withRouter } from "react-router-dom";
-import { toast, ToastContainer } from "react-toastify";
+import { Navigate, Route, Routes } from "react-router-dom";
+import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { Container } from "reactstrap";
 import DatabasesRestClient from "../../databases/api/DatabasesRestClient";
@@ -71,56 +71,46 @@ const mapDispatchToProps = (dispatch: React.Dispatch<ActionType<{}>>): AppDispat
   };
 };
 
-class App extends React.Component<AppPropModel & RouteComponentProps<{}> & AppDispatchPropModel> {
-  private updateClockTimer: NodeJS.Timeout;
-  private updateLoadAndModulesTimer: NodeJS.Timeout;
+function App(props: AppPropModel & AppDispatchPropModel) {
+  const updateClockTimerRef = React.useRef<NodeJS.Timeout>();
+  const updateLoadAndModulesTimerRef = React.useRef<NodeJS.Timeout>();
 
-  constructor(props: AppPropModel & RouteComponentProps<{}> & AppDispatchPropModel) {
-    super(props);
+  React.useEffect(() => {
+    updateLoadAndModulesTimerRef.current = setInterval(loadAndModulesUpdater, 5000);
+    props.ModulesRestClient.modules().then((data) => props?.onUpdateModules(data));
 
-    this.loadAndModulesUpdater = this.loadAndModulesUpdater.bind(this);
-  }
+    return () => {
+      clearInterval(updateClockTimerRef.current!);
+      clearInterval(updateLoadAndModulesTimerRef.current!);
+    };
+  }, []);
 
-  public componentDidMount(): void {
-    this.updateLoadAndModulesTimer = setInterval(this.loadAndModulesUpdater, 5000);
-    this.props.ModulesRestClient.modules().then((data) => this.props?.onUpdateModules(data));
-  }
-
-  public componentWillUnmount(): void {
-    clearInterval(this.updateClockTimer);
-    clearInterval(this.updateLoadAndModulesTimer);
-  }
-
-  public render(): React.ReactNode {
-    return (
-      <div className="commandcenter-app-container">
-        <div className="commandcenter-content-wrapper">
-          <ToastContainer />
-
-          <Container fluid={true} id="body" className="content">
-            <Switch>
-              <Route path="/modules" component={Modules} />
-              <Route path="/databases" component={Databases} />
-              <Route render={() => <Redirect to="/databases" />} />
-            </Switch>
-          </Container>
-        </div>
-      </div>
-    );
-  }
-
-  private loadAndModulesUpdater(): void {
-    this.props.Modules.forEach((module) => {
-      this.props.ModulesRestClient.healthState(module.name).then((data) =>
-        this.props.onUpdateModuleHealthState(module.name, data)
+  const loadAndModulesUpdater = (): void => {
+    props.Modules.forEach((module) => {
+      props.ModulesRestClient.healthState(module.name).then((data) =>
+        props.onUpdateModuleHealthState(module.name, data)
       );
-      this.props.ModulesRestClient.notifications(module.name).then((data) =>
-        this.props.onUpdateModuleNotifications(module.name, data)
+      props.ModulesRestClient.notifications(module.name).then((data) =>
+        props.onUpdateModuleNotifications(module.name, data)
       );
     });
-  }
+  };
+
+  return (
+    <div className="commandcenter-app-container">
+      <div className="commandcenter-content-wrapper">
+        <ToastContainer />
+
+        <Container fluid={true} id="body" className="content">
+          <Routes>
+            <Route path="/modules/*" element={<Modules />} />
+            <Route path="/databases/*" element={<Databases />} />
+            <Route path="*" element={<Navigate to="/databases/*" />} />
+          </Routes>
+        </Container>
+      </div>
+    </div>
+  );
 }
 
-export default withRouter<RouteComponentProps<{}>, React.ComponentType<any>>(
-  connect<AppPropModel, AppDispatchPropModel>(mapStateToProps, mapDispatchToProps)(App)
-);
+export default connect(mapStateToProps, mapDispatchToProps)(App);
diff --git a/src/Moryx.CommandCenter.Web/src/databases/container/DatabaseModel.tsx b/src/Moryx.CommandCenter.Web/src/databases/container/DatabaseModel.tsx
index 6794a56c5..a8388514a 100644
--- a/src/Moryx.CommandCenter.Web/src/databases/container/DatabaseModel.tsx
+++ b/src/Moryx.CommandCenter.Web/src/databases/container/DatabaseModel.tsx
@@ -6,11 +6,9 @@
 import { mdiBriefcase, mdiCheck, mdiDatabase, mdiExclamationThick, mdiLoading, mdiPowerPlug, mdiTable } from "@mdi/js";
 import Icon from "@mdi/react";
 import * as moment from "moment";
-import { any, element, string } from "prop-types";
 import * as React from "react";
-import { connect, Provider } from "react-redux";
-import { RouteComponentProps, withRouter } from "react-router-dom";
-import { toast, ToastContainer } from "react-toastify";
+import { connect } from "react-redux";
+import { toast } from "react-toastify";
 import { Button, ButtonGroup, Card, CardBody, CardHeader, Col, Container, Form, Input, Nav, NavItem, NavLink, Row, TabContent, TabPane, UncontrolledTooltip } from "reactstrap";
 import kbToString from "../../common/converter/ByteConverter";
 import { updateShowWaitDialog } from "../../common/redux/CommonActions";
diff --git a/src/Moryx.CommandCenter.Web/src/databases/container/Databases.tsx b/src/Moryx.CommandCenter.Web/src/databases/container/Databases.tsx
index a91dc673d..3dcc054f1 100644
--- a/src/Moryx.CommandCenter.Web/src/databases/container/Databases.tsx
+++ b/src/Moryx.CommandCenter.Web/src/databases/container/Databases.tsx
@@ -7,7 +7,7 @@ import { mdiBriefcase, mdiComment, mdiDatabase, mdiHexagonMultiple } from "@mdi/
 import Icon from "@mdi/react";
 import * as React from "react";
 import { connect } from "react-redux";
-import { Link, Route, RouteComponentProps, Switch } from "react-router-dom";
+import { Link, Route, Routes } from "react-router-dom";
 import { Card, CardBody, CardHeader, Col, ListGroup, Nav, Navbar, NavItem, Row } from "reactstrap";
 import RoutingMenu from "../../common/components/Menu/RoutingMenu";
 import MenuItemModel from "../../common/models/MenuItemModel";
@@ -84,9 +84,8 @@ class Database extends React.Component<DatabasesPropsModel & DatabasesDispatchPr
 
         this.props.DatabaseConfigs.forEach((model) => {
             routes.push(
-                <Route key={idx} path={`/databases/${model.targetModel}`} exact={true}>
-                    <DatabaseModel DataModel={model} RestClient={this.props.RestClient} />
-                </Route>);
+                <Route key={idx} path={`${model.targetModel}`} element={
+                    <DatabaseModel DataModel={model} RestClient={this.props.RestClient} />} />);
             ++idx;
         });
 
@@ -126,8 +125,8 @@ class Database extends React.Component<DatabasesPropsModel & DatabasesDispatchPr
                     </Card>
                 </Col>
                 <Col md={9}>
-                    <Switch>
-                        <Route exact={true} path="/databases">
+                    <Routes>
+                        <Route path="*" element={
                             <Card>
                                 <CardHeader tag="h4">
                                     <Icon path={mdiComment} className="icon right-space" />
@@ -136,10 +135,9 @@ class Database extends React.Component<DatabasesPropsModel & DatabasesDispatchPr
                                 <CardBody>
                                     <span className="font-italic font-small">Configure all available database models. Please select a database model to proceed...</span>
                                 </CardBody>
-                            </Card>
-                        </Route>
+                            </Card>} />
                         {this.preRenderRoutesList()}
-                    </Switch>
+                    </Routes>
                 </Col>
             </Row>
         );
diff --git a/src/Moryx.CommandCenter.Web/src/index.tsx b/src/Moryx.CommandCenter.Web/src/index.tsx
index 7620a31a5..3140a2e4c 100644
--- a/src/Moryx.CommandCenter.Web/src/index.tsx
+++ b/src/Moryx.CommandCenter.Web/src/index.tsx
@@ -3,7 +3,6 @@
  * Licensed under the Apache License, Version 2.0
 */
 
-import { createHashHistory } from "history";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { Provider } from "react-redux";
@@ -13,7 +12,6 @@ import App from "./common/container/App";
 import { AppState, getAppReducer } from "./common/redux/AppState";
 import { ActionType } from "./common/redux/Types";
 
-export const history = createHashHistory();
 const store = createStore<AppState, ActionType<{}>, any, any>(getAppReducer);
 
 ReactDOM.render(
diff --git a/src/Moryx.CommandCenter.Web/src/modules/components/ConfigEditor/NavigableConfigEditor.tsx b/src/Moryx.CommandCenter.Web/src/modules/components/ConfigEditor/NavigableConfigEditor.tsx
index 651d56cc8..f2c6882ff 100644
--- a/src/Moryx.CommandCenter.Web/src/modules/components/ConfigEditor/NavigableConfigEditor.tsx
+++ b/src/Moryx.CommandCenter.Web/src/modules/components/ConfigEditor/NavigableConfigEditor.tsx
@@ -3,9 +3,9 @@
  * Licensed under the Apache License, Version 2.0
 */
 
-import { Action, History, Location, UnregisterCallback } from "history";
 import queryString from "query-string";
 import * as React from "react";
+import { Location, useLocation, useNavigate } from "react-router-dom";
 import { Button, ButtonGroup, Col, Container, Row } from "reactstrap";
 import Entry from "../../models/Entry";
 import ConfigEditor from "./ConfigEditor";
@@ -15,8 +15,6 @@ interface NavigableConfigEditorPropModel {
     Entries: Entry[];
     IsReadOnly: boolean;
     Root: Entry;
-    History?: History;
-    Location?: Location;
 }
 
 interface NavigableConfigEditorStateModel {
@@ -25,44 +23,23 @@ interface NavigableConfigEditorStateModel {
     Entries: Entry[];
 }
 
-export default class NavigableConfigEditor extends React.Component<NavigableConfigEditorPropModel, NavigableConfigEditorStateModel> {
-    public unregisterListener: UnregisterCallback;
-
-    constructor(props: NavigableConfigEditorPropModel) {
-        super(props);
-        this.state = {
-            EntryChain: [],
-            ParentEntry: this.props.ParentEntry,
-            Entries: this.props.Entries
-        };
-    }
-
-    public componentWillReceiveProps(nextProps: NavigableConfigEditorPropModel): void {
-        if (this.props.ParentEntry !== nextProps.ParentEntry ||
-            this.props.Entries !== nextProps.Entries) {
-            this.setState({ ParentEntry: nextProps.ParentEntry, Entries: nextProps.Entries });
-            this.resolveEntryChainByPath(this.props.Location, nextProps.Entries);
-        }
-    }
-
-    public componentDidMount(): void {
-        if (this.props.History !== undefined) {
-            this.unregisterListener = this.props.History.listen(this.onHistoryChanged.bind(this));
-        }
-    }
+function NavigableConfigEditor(props: NavigableConfigEditorPropModel) {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const [entryChain, setEntryChain] = React.useState<Entry[]>([]);
+    const [parentEntry, setParentEntry] = React.useState<Entry | null>(props.ParentEntry);
+    const [entries, setEntries] = React.useState<Entry[]>(props.Entries);
 
-    public componentWillUnmount(): void {
-        if (this.unregisterListener !== undefined) {
-            this.unregisterListener();
-        }
-    }
+    React.useEffect(() => {
+        resolveEntryChainByPath(location, props.Entries);
+    }, [location, props.Entries]);
 
-    private resolveEntryChainByPath(location: Location, entries: Entry[]): void {
+    const resolveEntryChainByPath = (location: Location, entries: Entry[]): void => {
         if (location !== undefined) {
             const query = queryString.parse(location.search);
             if (query != null && "path" in query) {
                 const entryChain: Entry[] = [];
-                let currentEntry: Entry = null;
+                let currentEntry: Entry | null = null;
 
                 (query.path as string).split("/").forEach((element: string) => {
                     const searchableEntries: Entry[] = currentEntry != null ? currentEntry.subEntries : entries;
@@ -74,71 +51,67 @@ export default class NavigableConfigEditor extends React.Component<NavigableConf
                     }
                 });
 
-                this.setState({
-                    ParentEntry: currentEntry,
-                    Entries: currentEntry != null ? currentEntry.subEntries : entries,
-                    EntryChain: entryChain
-                });
+                setParentEntry(currentEntry);
+                setEntries(currentEntry != null ? currentEntry.subEntries : entries);
+                setEntryChain(entryChain);
             } else {
-                this.setState({ ParentEntry: null, Entries: entries, EntryChain: [] });
+                setParentEntry(null);
+                setEntries(entries);
+                setEntryChain([]);
             }
         }
-    }
-
-    private onHistoryChanged(location: Location, action: Action): void {
-        this.resolveEntryChainByPath(location, this.props.Entries);
-    }
+    };
 
-    public navigateToEntry(entry: Entry): void {
-        this.updatePath(Entry.entryChain(entry));
-    }
+    const navigateToEntry = (entry: Entry): void => {
+        updatePath(Entry.entryChain(entry));
+    };
 
-    private updatePath(entryChain: Entry[]): void {
-        this.props.History.push("?path=" + entryChain.map((entry) => entry.identifier).join("/"));
-    }
+    const updatePath = (entryChain: Entry[]): void => {
+        navigate("?path=" + entryChain.map((entry) => entry.identifier).join("/"));
+    };
 
-    private onClickBreadcrumb(entry: Entry): void {
-        if (entry == null) {
-            this.updatePath([]);
+    const onClickBreadcrumb = (entry: Entry | null): void => {
+        if (entry === null) {
+            updatePath([]);
         } else {
-            const idx = this.state.EntryChain.indexOf(entry);
-            const updatedEntryChain = this.state.EntryChain.slice(0, idx + 1);
-            this.setState({ EntryChain: updatedEntryChain, });
-
-            this.updatePath(updatedEntryChain);
+            const idx = entryChain.indexOf(entry);
+            const updatedEntryChain = entryChain.slice(0, idx + 1);
+            setEntryChain(updatedEntryChain);
+            updatePath(updatedEntryChain);
         }
-    }
+    };
 
-    private preRenderBreadcrumb(): React.ReactNode {
-        const entryChainButtons = this.state.EntryChain.map((entry, idx) =>
-        (
-            <Button key={idx} color="light" onClick={() => this.onClickBreadcrumb(entry)} disabled={idx === this.state.EntryChain.length - 1}>{entry.displayName}</Button>
+    const preRenderBreadcrumb = (): React.ReactNode => {
+        const entryChainButtons = entryChain.map((entry, idx) => (
+            <Button key={idx} color="light" onClick={() => onClickBreadcrumb(entry)} disabled={idx === entryChain.length - 1} >{entry.displayName}</Button>
         ));
 
         return (
             <ButtonGroup>
-                <Button color="dark" disabled={this.state.EntryChain.length === 0} onClick={() => this.onClickBreadcrumb(null)}>Home</Button>
+                <Button color="dark" disabled={entryChain.length === 0} onClick={() => onClickBreadcrumb(null)}>Home</Button>
                 {entryChainButtons}
             </ButtonGroup>
         );
-    }
-
-    public render(): React.ReactNode {
-        return (
-            <div>
-                {this.preRenderBreadcrumb()}
-                <Container fluid={true} className="up-space-lg no-padding">
-                    <Row className="config-editor-header">
-                        <Col md={5} className="no-padding"><span className="font-bold">Property</span></Col>
-                        <Col md={7} className="no-padding"><span className="font-bold">Value</span></Col>
-                    </Row>
-                    <ConfigEditor ParentEntry={this.state.ParentEntry}
-                        Entries={this.state.Entries}
-                        Root={this.props.Root}
-                        navigateToEntry={this.navigateToEntry.bind(this)}
-                        IsReadOnly={this.props.IsReadOnly} />
-                </Container>
-            </div>
-        );
-    }
+    };
+
+    return (
+        <div>
+            {preRenderBreadcrumb()}
+            <Container fluid={true} className="up-space-lg no-padding">
+                <Row className="config-editor-header">
+                    <Col md={5} className="no-padding"><span className="font-bold">Property</span></Col>
+                    <Col md={7} className="no-padding"><span className="font-bold">Value</span></Col>
+                </Row>
+                <ConfigEditor
+                    ParentEntry={parentEntry}
+                    Entries={entries}
+                    Root={props.Root}
+                    navigateToEntry={navigateToEntry}
+                    IsReadOnly={props.IsReadOnly}
+                />
+            </Container>
+        </div>
+    );
 }
+
+export default NavigableConfigEditor;
diff --git a/src/Moryx.CommandCenter.Web/src/modules/components/ConsoleMethodConfigurator.tsx b/src/Moryx.CommandCenter.Web/src/modules/components/ConsoleMethodConfigurator.tsx
index 8d41457a1..a2393cc27 100644
--- a/src/Moryx.CommandCenter.Web/src/modules/components/ConsoleMethodConfigurator.tsx
+++ b/src/Moryx.CommandCenter.Web/src/modules/components/ConsoleMethodConfigurator.tsx
@@ -4,7 +4,7 @@
 */
 
 import * as React from "react";
-import { RouteComponentProps, withRouter } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { Button, Col, Container, Row } from "reactstrap";
 import MethodEntry from "../models/MethodEntry";
 import NavigableConfigEditor from "./ConfigEditor/NavigableConfigEditor";
@@ -15,60 +15,53 @@ export interface ConsoleMethodConfiguratorPropModel {
     onInvokeMethod(methodEntry: MethodEntry): void;
 }
 
-class ConsoleMethodConfigurator extends React.Component<ConsoleMethodConfiguratorPropModel & RouteComponentProps<{}>> {
-    constructor(props: ConsoleMethodConfiguratorPropModel & RouteComponentProps<{}>) {
-        super(props);
-        this.state = { };
-    }
+function ConsoleMethodConfigurator(props: ConsoleMethodConfiguratorPropModel) {
+    const navigate = useNavigate();
+    const location = useLocation();
 
-    private invokeSelectedMethod(): void {
-        this.props.onInvokeMethod(this.props.Method);
-    }
+    const invokeSelectedMethod = (): void => {
+        props.onInvokeMethod(props.Method);
+    };
 
-    public render(): React.ReactNode {
-        return (
-            <div>
-                { this.props.Method == null ? (
-                    <span className="font-italic">Please select a method.</span>
-                ) : (
-                    <Container fluid={true}
-                               className="no-padding">
-                        <Row>
-                            <Col md={3}><span className="font-bold">Name:</span></Col>
-                            <Col md={9}><span className="font-italic">{this.props.Method.displayName}</span></Col>
-                        </Row>
-                        <Row>
-                            <Col md={3}><span className="font-bold">Description:</span></Col>
-                            <Col md={9}><span className="font-italic">{this.props.Method.description}</span></Col>
-                        </Row>
-                        <Row>
-                            <Col md={12} className="up-space-lg">
-                                { this.props.Method.parameters.subEntries.length === 0 ? (
-                                    <span className="font-italic">This method is parameterless.</span>
-                                ) : (
-                                    <NavigableConfigEditor Entries={this.props.Method.parameters.subEntries}
-                                                           ParentEntry={null}
-                                                           Root={this.props.Method.parameters}
-                                                           IsReadOnly={false}
-                                                           History={this.props.history}
-                                                           Location={this.props.location} />
-                                )}
-                            </Col>
-                        </Row>
-                        <Row className="up-space-lg">
-                            <Col md={12}>
-                                <Button color="primary"
-                                        className="float-right"
-                                        onClick={() => this.invokeSelectedMethod()}>
-                                    Invoke
-                                </Button>
-                            </Col>
-                        </Row>
-                    </Container>
-                )}
-            </div>
-        );
-    }
+    return (
+        <div>
+            {props.Method == null ? (
+                <span className="font-italic">Please select a method.</span>
+            ) : (
+                <Container fluid={true} className="no-padding">
+                    <Row>
+                        <Col md={3}><span className="font-bold">Name:</span></Col>
+                        <Col md={9}><span className="font-italic">{props.Method.displayName}</span></Col>
+                    </Row>
+                    <Row>
+                        <Col md={3}><span className="font-bold">Description:</span></Col>
+                        <Col md={9}><span className="font-italic">{props.Method.description}</span></Col>
+                    </Row>
+                    <Row>
+                        <Col md={12} className="up-space-lg">
+                            {props.Method.parameters.subEntries.length === 0 ? (
+                                <span className="font-italic">This method is parameterless.</span>
+                            ) : (
+                                <NavigableConfigEditor
+                                    Entries={props.Method.parameters.subEntries}
+                                    ParentEntry={null}
+                                    Root={props.Method.parameters}
+                                    IsReadOnly={false}
+                                />
+                            )}
+                        </Col>
+                    </Row>
+                    <Row className="up-space-lg">
+                        <Col md={12}>
+                            <Button color="primary" className="float-right" onClick={invokeSelectedMethod}>
+                                Invoke
+                            </Button>
+                        </Col>
+                    </Row>
+                </Container>
+            )}
+        </div>
+    );
 }
 
-export default withRouter<ConsoleMethodConfiguratorPropModel & RouteComponentProps<{}>, React.ComponentType<any>>(ConsoleMethodConfigurator);
+export default ConsoleMethodConfigurator;
diff --git a/src/Moryx.CommandCenter.Web/src/modules/components/ConsoleMethodResult.tsx b/src/Moryx.CommandCenter.Web/src/modules/components/ConsoleMethodResult.tsx
index a4c9cc9c3..adad6bc77 100644
--- a/src/Moryx.CommandCenter.Web/src/modules/components/ConsoleMethodResult.tsx
+++ b/src/Moryx.CommandCenter.Web/src/modules/components/ConsoleMethodResult.tsx
@@ -4,7 +4,7 @@
 */
 
 import * as React from "react";
-import { RouteComponentProps, withRouter } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { Button, Col, Container, Row } from "reactstrap";
 import Entry from "../models/Entry";
 import MethodEntry from "../models/MethodEntry";
@@ -16,56 +16,48 @@ export interface ConsoleMethodResultPropModel {
     onResetInvokeResult(methodName: string): void;
 }
 
-class ConsoleMethodResult extends React.Component<ConsoleMethodResultPropModel & RouteComponentProps<{}>> {
-    constructor(props: ConsoleMethodResultPropModel & RouteComponentProps<{}>) {
-        super(props);
-        this.state = { };
-    }
+function ConsoleMethodResult(props: ConsoleMethodResultPropModel) {
+    const navigate = useNavigate();
+    const location = useLocation();
 
-    private resetInvokeResult(): void {
-        this.props.onResetInvokeResult(this.props.Method.name);
-    }
+    const resetInvokeResult = (): void => {
+        props.onResetInvokeResult(props.Method.name);
+    };
 
-    public render(): React.ReactNode {
-        return (
-            <div>
-                { this.props.InvokeResult == null ? (
-                    <span className="font-italic">There is no result.</span>
-                ) : (
-                    <Container fluid={true}
-                               className="no-padding">
-                        <Row>
-                            <Col md={3}><span className="font-bold">Name:</span></Col>
-                            <Col md={9}><span className="font-italic">{this.props.Method.displayName}</span></Col>
-                        </Row>
-                        <Row>
-                            <Col md={3}><span className="font-bold">Description:</span></Col>
-                            <Col md={9}><span className="font-italic">{this.props.Method.description}</span></Col>
-                        </Row>
-                        <Row>
-                            <Col md={12} className="up-space-lg">
-                                <NavigableConfigEditor Entries={this.props.InvokeResult.subEntries}
-                                                       ParentEntry={null}
-                                                       Root={this.props.InvokeResult}
-                                                       IsReadOnly={true}
-                                                       History={this.props.history}
-                                                       Location={this.props.location} />
-                            </Col>
-                        </Row>
-                        <Row className="up-space-lg">
-                            <Col md={12}>
-                                <Button color="primary"
-                                        className="float-right"
-                                        onClick={() => this.resetInvokeResult()}>
-                                    Reset result
-                                </Button>
-                            </Col>
-                        </Row>
-                    </Container>
-                )}
-            </div>
-        );
-    }
+    return (
+        <div>
+            {props.InvokeResult == null ? (
+                <span className="font-italic">There is no result.</span>
+            ) : (
+                <Container fluid={true} className="no-padding">
+                    <Row>
+                        <Col md={3}><span className="font-bold">Name:</span></Col>
+                        <Col md={9}><span className="font-italic">{props.Method.displayName}</span></Col>
+                    </Row>
+                    <Row>
+                        <Col md={3}><span className="font-bold">Description:</span></Col>
+                        <Col md={9}><span className="font-italic">{props.Method.description}</span></Col>
+                    </Row>
+                    <Row>
+                        <Col md={12} className="up-space-lg">
+                            <NavigableConfigEditor
+                                Entries={props.InvokeResult.subEntries}
+                                ParentEntry={null}
+                                Root={props.InvokeResult}
+                                IsReadOnly={true} />
+                        </Col>
+                    </Row>
+                    <Row className="up-space-lg">
+                        <Col md={12}>
+                            <Button color="primary" className="float-right" onClick={resetInvokeResult}>
+                                Reset result
+                            </Button>
+                        </Col>
+                    </Row>
+                </Container>
+            )}
+        </div>
+    );
 }
 
-export default withRouter<ConsoleMethodResultPropModel & RouteComponentProps<{}>, React.ComponentType<any>>(ConsoleMethodResult);
+export default ConsoleMethodResult;
diff --git a/src/Moryx.CommandCenter.Web/src/modules/container/ModuleConfiguration.tsx b/src/Moryx.CommandCenter.Web/src/modules/container/ModuleConfiguration.tsx
index 10582bc5f..3379dcad7 100644
--- a/src/Moryx.CommandCenter.Web/src/modules/container/ModuleConfiguration.tsx
+++ b/src/Moryx.CommandCenter.Web/src/modules/container/ModuleConfiguration.tsx
@@ -3,12 +3,12 @@
  * Licensed under the Apache License, Version 2.0
 */
 
-import { mdiCogs, mdiContentSave, mdiHexagon, mdiSync, mdiUndo } from "@mdi/js";
+import { mdiContentSave, mdiHexagon, mdiSync, mdiUndo } from "@mdi/js";
 import Icon from "@mdi/react";
 import * as React from "react";
-import { RouteComponentProps, withRouter } from "react-router-dom";
-import { toast, ToastContainer } from "react-toastify";
-import { Button, ButtonGroup, Card, CardBody, CardHeader, Col, Container, ListGroup, ListGroupItem, Row } from "reactstrap";
+import { useLocation, useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+import { Button, ButtonGroup, Card, CardBody, CardHeader, ListGroup, ListGroupItem } from "reactstrap";
 import ModuleHeader from "../../common/components/ModuleHeader";
 import ModulesRestClient from "../api/ModulesRestClient";
 import NavigableConfigEditor from "../components/ConfigEditor/NavigableConfigEditor";
@@ -28,98 +28,92 @@ interface ModuleConfigurationStateModel {
     CurrentSubEntries: Entry[];
 }
 
-class ModuleConfiguration extends React.Component<ModuleConfigurationPropModel & RouteComponentProps<{}>, ModuleConfigurationStateModel> {
-    constructor(props: ModuleConfigurationPropModel & RouteComponentProps<{}>) {
-        super(props);
+function ModuleConfiguration(props: ModuleConfigurationPropModel) {
+    const navigate = useNavigate();
+    const location = useLocation();
 
-        const config = new Config();
-        config.module = this.props.ModuleName;
-        config.root = new Entry();
+    const config = new Config();
+    config.module = props.ModuleName;
+    config.root = new Entry();
 
-        this.state = {
-            ModuleConfig: config,
-            ConfigIsLoading: true,
-            ParentEntry: null,
-            CurrentSubEntries: [],
-        };
-    }
+    const [moduleConfig, setModuleConfig] = React.useState<ModuleConfigurationStateModel>({
+        ModuleConfig: config,
+        ConfigIsLoading: true,
+        ParentEntry: null,
+        CurrentSubEntries: [],
+    });
 
-    public componentDidMount(): void {
-        this.loadConfig();
-    }
+    React.useEffect(() => {
+        loadConfig();
+    }, []);
 
-    public loadConfig(): Promise<void> {
-        return this.props.RestClient.moduleConfig(this.props.ModuleName)
+    const loadConfig = (): Promise<void> => {
+        return props.RestClient.moduleConfig(props.ModuleName)
             .then((data) => {
                 Config.patchConfig(data);
-                this.setState(
-                    {
-                        ModuleConfig: data,
-                        ParentEntry: data.root,
-                        CurrentSubEntries: data.root.subEntries,
-                        ConfigIsLoading: false,
-                    });
+                setModuleConfig({
+                    ModuleConfig: data,
+                    ParentEntry: data.root,
+                    CurrentSubEntries: data.root.subEntries,
+                    ConfigIsLoading: false,
+                });
             });
-    }
+    };
 
-    public onApply(): void {
-        this.props.RestClient.saveModuleConfig(this.props.ModuleName, { Config: this.state.ModuleConfig, UpdateMode: ConfigUpdateMode.SaveAndReincarnate })
-            .then((result) => toast.success("Configuration was saved successfully. Module is restarting...", { autoClose: 5000 }));
-    }
+    const onApply = (): void => {
+        props.RestClient.saveModuleConfig(props.ModuleName, { Config: moduleConfig.ModuleConfig, UpdateMode: ConfigUpdateMode.SaveAndReincarnate })
+            .then(() => toast.success("Configuration was saved successfully. Module is restarting...", { autoClose: 5000 }));
+    };
 
-    public onSave(): void {
-        this.props.RestClient.saveModuleConfig(this.props.ModuleName, { Config: this.state.ModuleConfig, UpdateMode: ConfigUpdateMode.OnlySave })
-            .then((result) => toast.success("Configuration was saved successfully", { autoClose: 5000 }));
-    }
+    const onSave = (): void => {
+        props.RestClient.saveModuleConfig(props.ModuleName, { Config: moduleConfig.ModuleConfig, UpdateMode: ConfigUpdateMode.OnlySave })
+            .then(() => toast.success("Configuration was saved successfully", { autoClose: 5000 }));
+    };
 
-    public onRevert(): void {
-        this.props.history.push("?");
-        this.setState({ ConfigIsLoading: true });
-        this.loadConfig()
-            .then((result) => toast.success("Configuration was reverted", { autoClose: 3000 }));
-    }
+    const onRevert = (): void => {
+        navigate("?");
+        setModuleConfig({ ...moduleConfig, ConfigIsLoading: true });
+        loadConfig()
+            .then(() => toast.success("Configuration was reverted", { autoClose: 3000 }));
+    };
 
-    public render(): React.ReactNode {
-        return (
-            <Card>
-                <CardHeader tag="h2">
-                    <Icon path={mdiHexagon} className="icon right-space" />
-                    {this.props.ModuleName}
-                </CardHeader>
-                <ListGroup>
-                    <ListGroupItem className="nav-listgroup-item">
-                        <ModuleHeader ModuleName={this.props.ModuleName} />
-                    </ListGroupItem>
-                </ListGroup>
-                <CardBody>
-                    {this.state.ConfigIsLoading &&
-                        <span className="font-bold font-small">Loading config ...</span>
-                    }
-                    <NavigableConfigEditor ParentEntry={this.state.ParentEntry}
-                        Entries={this.state.CurrentSubEntries}
-                        Root={this.state.ModuleConfig.root}
-                        IsReadOnly={false}
-                        History={this.props.history}
-                        Location={this.props.location} />
+    return (
+        <Card>
+            <CardHeader tag="h2">
+                <Icon path={mdiHexagon} className="icon right-space" />
+                {props.ModuleName}
+            </CardHeader>
+            <ListGroup>
+                <ListGroupItem className="nav-listgroup-item">
+                    <ModuleHeader ModuleName={props.ModuleName} />
+                </ListGroupItem>
+            </ListGroup>
+            <CardBody>
+                {moduleConfig.ConfigIsLoading &&
+                    <span className="font-bold font-small">Loading config ...</span>
+                }
+                <NavigableConfigEditor ParentEntry={moduleConfig.ParentEntry}
+                    Entries={moduleConfig.CurrentSubEntries}
+                    Root={moduleConfig.ModuleConfig.root}
+                    IsReadOnly={false} />
 
-                    <ButtonGroup className="up-space-lg">
-                        <Button color="primary" onClick={() => this.onApply()}>
-                            <Icon path={mdiSync} className="icon-white right-space" />
-                            Save &amp; Restart
-                        </Button>
-                        <Button color="primary" onClick={() => this.onSave()}>
-                            <Icon path={mdiContentSave} className="icon-white right-space" />
-                            Save only
-                        </Button>
-                        <Button color="dark" onClick={() => this.onRevert()}>
-                            <Icon path={mdiUndo} className="icon-white right-space" />
-                            Revert
-                        </Button>
-                    </ButtonGroup>
-                </CardBody>
-            </Card>
-        );
-    }
+                <ButtonGroup className="up-space-lg">
+                    <Button color="primary" onClick={() => onApply()}>
+                        <Icon path={mdiSync} className="icon-white right-space" />
+                        Save &amp; Restart
+                    </Button>
+                    <Button color="primary" onClick={() => onSave()}>
+                        <Icon path={mdiContentSave} className="icon-white right-space" />
+                        Save only
+                    </Button>
+                    <Button color="dark" onClick={() => onRevert()}>
+                        <Icon path={mdiUndo} className="icon-white right-space" />
+                        Revert
+                    </Button>
+                </ButtonGroup>
+            </CardBody>
+        </Card>
+    );
 }
 
-export default withRouter<ModuleConfigurationPropModel & RouteComponentProps<{}>, React.ComponentType<any>>(ModuleConfiguration);
+export default ModuleConfiguration;
diff --git a/src/Moryx.CommandCenter.Web/src/modules/container/Modules.tsx b/src/Moryx.CommandCenter.Web/src/modules/container/Modules.tsx
index f67d04240..e2410ca07 100644
--- a/src/Moryx.CommandCenter.Web/src/modules/container/Modules.tsx
+++ b/src/Moryx.CommandCenter.Web/src/modules/container/Modules.tsx
@@ -7,7 +7,7 @@ import { mdiCogs, mdiComment, mdiConsoleLine, mdiDatabase, mdiHexagon, mdiHexago
 import Icon from "@mdi/react";
 import * as React from "react";
 import { connect } from "react-redux";
-import { Link, Route, Switch } from "react-router-dom";
+import { Link, Route, Routes } from "react-router-dom";
 import { Card, CardBody, CardHeader, Col, ListGroup, Nav, Navbar, NavItem, NavLink, Row } from "reactstrap";
 import RoutingMenu from "../../common/components/Menu/RoutingMenu";
 import MenuItemModel from "../../common/models/MenuItemModel";
@@ -104,21 +104,18 @@ class Modules extends React.Component<ModulesPropModel & ModulesDispatchPropMode
         this.state.MenuModel.MenuItems.forEach((menuItem) => {
             const module = this.props.Modules.filter(function (element: ServerModuleModel, index: number, array: ServerModuleModel[]): boolean { return element.name === menuItem.Name; })[0];
             routes.push(
-                <Route key={idx} path={menuItem.NavPath} exact={true}>
-                    <Module Module={module} RestClient={this.props.RestClient} />
-                </Route>);
+                <Route key={idx} path={menuItem.NavPath.replace("/modules/", "")} element={
+                    <Module Module={module} RestClient={this.props.RestClient} />} />);
 
             menuItem.SubMenuItems.forEach((subMenuItem) => {
                 if (subMenuItem.NavPath.endsWith("configuration")) {
                     routes.push(
-                        <Route key={idx} path={subMenuItem.NavPath} exact={true}>
-                            <ModuleConfiguration ModuleName={module.name} RestClient={this.props.RestClient} />
-                        </Route>);
+                        <Route key={idx} path={subMenuItem.NavPath.replace("/modules/", "")} element={
+                            <ModuleConfiguration ModuleName={module.name} RestClient={this.props.RestClient} />} />);
                 } else if (subMenuItem.NavPath.endsWith("console")) {
                     routes.push(
-                        <Route key={idx} path={subMenuItem.NavPath} exact={true}>
-                            <ModuleConsole ModuleName={module.name} RestClient={this.props.RestClient} />
-                        </Route>);
+                        <Route key={idx} path={subMenuItem.NavPath.replace("/modules/", "")} element={
+                            <ModuleConsole ModuleName={module.name} RestClient={this.props.RestClient} />} />);
                 }
 
                 ++idx;
@@ -159,8 +156,8 @@ class Modules extends React.Component<ModulesPropModel & ModulesDispatchPropMode
                     </Card>
                 </Col>
                 <Col md={9}>
-                    <Switch>
-                        <Route exact={true} path="/modules" >
+                    <Routes>
+                        <Route path="*" element={
                             <Card>
                                 <CardHeader tag="h4">
                                     <Icon path={mdiComment} className="icon right-space" />
@@ -169,10 +166,9 @@ class Modules extends React.Component<ModulesPropModel & ModulesDispatchPropMode
                                 <CardBody>
                                     <span className="font-italic font-small">Watch, configure and maintain all available modules. Please select a module to proceed...</span>
                                 </CardBody>
-                            </Card>
-                        </Route>
+                            </Card>} />
                         {this.preRenderRoutesList()}
-                    </Switch>
+                    </Routes>
                 </Col>
             </Row>
         );
diff --git a/src/Moryx.CommandCenter.Web/tslint.json b/src/Moryx.CommandCenter.Web/tslint.json
index be7285868..e24e7803a 100644
--- a/src/Moryx.CommandCenter.Web/tslint.json
+++ b/src/Moryx.CommandCenter.Web/tslint.json
@@ -60,7 +60,7 @@
         "no-sparse-arrays": true,
         "no-string-literal": true,
         "no-string-throw": true,
-        "no-submodule-imports": [true, "history/createHashHistory", "bootstrap-toggle/css/bootstrap2-toggle.css", "uuid/v1" ], // ToDo: define allowed sub modules
+        "no-submodule-imports": [true, "bootstrap-toggle/css/bootstrap2-toggle.css", "uuid/v1" ], // ToDo: define allowed sub modules
         "no-switch-case-fall-through": true,
         "no-this-assignment": true,
         "no-unbound-method": false,
diff --git a/src/Tests/Moryx.Tests/Collections/DelayQueueTests.cs b/src/Tests/Moryx.Tests/Collections/DelayQueueTests.cs
index b607d33cb..b5ab40216 100644
--- a/src/Tests/Moryx.Tests/Collections/DelayQueueTests.cs
+++ b/src/Tests/Moryx.Tests/Collections/DelayQueueTests.cs
@@ -12,7 +12,7 @@
 
 namespace Moryx.Tests.Collections
 {
-    [TestFixture]
+    [TestFixture, Explicit]
     public class DelayQueueTests
     {
         private class DummyMessage