diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/App.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/App.js
index f5aeda75e01a1e2c7b47b5ae4d3e7b4bb25f039e..9ab0dca7a238a464cb1bae5fdcf3842f4e69caa9 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/App.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/App.js
@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import LandingPage from './pages/LandingPage.js'
-import StationTestPage from './pages/StationTestPage.js'
-import RTSMPage from './pages/RTSMPage.js'
+import StationOverviewPage from './pages/StationOverviewPage.js'
+import TilesPage from './pages/TilesPage.js'
+import DetailsPage from './pages/DetailsPage.js'
 
 import Header from './components/header.js'
 
@@ -14,15 +15,24 @@ import {
 
 
 
-const App = () => (
-<Router>
-  <div>
-    <Header />
-    <Route exact path="/" component={LandingPage}/>
-    <Route exact path="/stationtest/:page?" component={StationTestPage}/>
-    <Route exact path="/rtsm" component={RTSMPage}/>
-  </div>
-</Router>
-)
+class App extends Component {
+  constructor(props){
+    super(props);
+  }
+
+  render(){
+    console.log(this.props.location);
+    return (
+        <Router>
+            <div>
+              <Route exact path="/" component={LandingPage}/>
+              <Route exact path="/station_overview" component={StationOverviewPage}/>
+              <Route exact path="/tiles" component={TilesPage}/>
+              <Route exact path="/details" component={DetailsPage}/>
+            </div>
+        </Router>
+    );
+    }
+}
 
 export default App;
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.css b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.css
index bf158f950d789469e022649c0ef8a6746434c62a..e22f2097ebf393d75422b4a0e801cf237cc11f3b 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.css
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.css
@@ -1,14 +1,10 @@
 .header {
-    background-color: #2590ff;
+    background-color: rgba(111,84,153,1);
     padding: 20px;
     color: white;
 }
 
 .lofar {
-    height:1.4em;
-    font-size: 1.8em;
     font-weight: bold;
-    color: #d16af5;
     font-style: normal;
-    text-shadow: -.05em -.03em white;
 }
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.js
index 4679f33fce0ef024542563cb12b1bd2a9b7c205c..1fc15124b9f84403de48eaee3fdce54742c768f9 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.js
@@ -24,16 +24,32 @@ class Header extends Component {
         });
   }
 
+  check_status(item){
+    console.log(this.props.active_page.pathname)
+    if (this.props.active_page.pathname === item){
+      return "active"
+    }
+  }
+
   render() {
     return (
-      <Navbar className="header" dark expand="md">
-        <NavbarBrand><em className='lofar'>LOFAR</em> Tests Overview</NavbarBrand>
+      <Navbar className="header" dark expand="lg">
+        <NavbarBrand><h1><em className='lofar'>LOFAR</em> Station monitor</h1></NavbarBrand>
         <NavbarToggler onClick={() => this.toggle()} />
         <Collapse isOpen={this.state.isOpen} navbar>
           <Nav className="ml-auto" navbar>
-            <NavItem><NavLink tag={Link} to="/">Home</NavLink></NavItem>
-            <NavItem><NavLink tag={Link} to="/stationtest">Station Tests</NavLink></NavItem>
-            <NavItem><NavLink tag={Link} to="/rtsm">RTSM</NavLink></NavItem>
+            <NavItem className={this.check_status("/")}>
+              <NavLink tag={Link} to="/"><h3>Dashboard</h3></NavLink>
+            </NavItem>
+            <NavItem className={this.check_status("/station_overview")}>
+              <NavLink tag={Link} to="/station_overview"><h3>Station Overview</h3></NavLink>
+            </NavItem>
+            <NavItem className={this.check_status("/tiles")}>
+              <NavLink tag={Link} to="/tiles"><h3>Tiles</h3></NavLink>
+            </NavItem>
+            <NavItem className={this.check_status("/details")}>
+              <NavLink tag={Link} to="/details"><h3>Details</h3></NavLink></NavItem>
+
           </Nav>
         </Collapse>
       </Navbar>
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js
index aa107c51da004e8d539209111b3449c178bb1528..7e1cf0036fccaa904be260cfb97290cb57f015fc 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js
@@ -1,9 +1,13 @@
 import React, { Component } from 'react';
+import Header from '../components/header.js'
 
 class LandingPage extends Component {
   render() {
     return (
-      <div>Home sweet home</div>
+      <div>
+      <Header active_page={this.props.location} />
+        <div>Home sweet home</div>
+      </div>
     );
   }
 }