diff --git a/ui/src/components/app/App.js b/ui/src/components/app/App.js
index ec2770b1..cd8d5cf2 100644
--- a/ui/src/components/app/App.js
+++ b/ui/src/components/app/App.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react'
-import {Button, AppBar, Toolbar, Typography, ThemeProvider } from '@material-ui/core';
+import {Button, AppBar, Toolbar, Typography, MuiThemeProvider } from '@material-ui/core';
 import { Route, NavLink, HashRouter } from "react-router-dom";
 
-import theme from '../../helpers/theme';
+import o2rTheme from '../../helpers/theme';
 import './App.css';
 import logo from '../../assets/img/o2r-logo-only-white.svg';
 import orcidLogo from '../../assets/img/orcid.png';
@@ -18,7 +18,7 @@ import Discovery from '../discovery/Discovery';
 import ERC from '../erc/ERC';
 
 const Header = ( props ) => {
-  return (        
+  return (
     <AppBar id="header">
       <Toolbar>
       <a href="/"><img src={logo} alt="o2r" id="headerLogo"/></a>
@@ -35,22 +35,22 @@ const Header = ( props ) => {
             </Button>
           </NavLink>*/}
           <NavLink id="link" to={"/author/" + props.userOrcid}>
-            {props.loggedIn ? 
+            {props.loggedIn ?
               <Button color="inherit">
-                {props.userName} | 
+                {props.userName} |
                   <img src={orcidLogo} className="orcidImage" alt="orcid"></img>
                   {props.userOrcid}
               </Button> : ''}
           </NavLink>
         </HashRouter>
         <Button color="inherit"
-          href={props.loggedIn ? "api/v1/auth/logout" : "api/v1/auth/login"} 
+          href={props.loggedIn ? "api/v1/auth/logout" : "api/v1/auth/login"}
           onClick={() => props.login()}>{props.loggedIn ? 'Logout' : 'Login'}
         </Button>
         {/*<Button color="inherit">
           Help
             </Button>*/}
-      </Toolbar> 
+      </Toolbar>
     </AppBar>
   );
 };
@@ -106,20 +106,20 @@ class App extends Component {
       )
       .catch(response => {
         console.log(response);
-      });  
+      });
   }
 
   render() {
     return (
-      <ThemeProvider theme={theme}>
+      <MuiThemeProvider theme={o2rTheme}>
       <div id="pageContainer">
-      <Header 
-        loggedIn={this.state.loggedIn} 
+      <Header
+        loggedIn={this.state.loggedIn}
         login={() => this.user()}
         userName={this.state.userName}
-        userOrcid={this.state.userOrcid}>  
+        userOrcid={this.state.userOrcid}>
       </Header>
-      
+
       <HashRouter>
       <div>
         <div className="content" id="mainView">
@@ -135,10 +135,9 @@ class App extends Component {
       </HashRouter>
       <Footer></Footer>
       </div>
-      </ThemeProvider>
+      </MuiThemeProvider>
     )
   }
 }
 
 export default App
-
diff --git a/ui/src/components/app/footerLinks/Impressum.js b/ui/src/components/app/footerLinks/Impressum.js
index 6f4d18b5..6ae494d1 100644
--- a/ui/src/components/app/footerLinks/Impressum.js
+++ b/ui/src/components/app/footerLinks/Impressum.js
@@ -1,13 +1,20 @@
 import React, { Component } from "react";
+import config from '../../../helpers/config';
 
 class Impressum extends Component {
+
+    componentDidMount(){
+      document.title = "Impressum" + config.title;
+
+    }
+
     render() {
         return (
             <div>
                 <h1>Impressum</h1>
                 <h2>Contact</h2>
                 <div>
-                    Westfälische Wilhelms-Universität Münster<br/> 
+                    Westfälische Wilhelms-Universität Münster<br/>
                     Institut für Geoinformatik - o2r Project Team<br/>
                     Heisenbergstraße 2<br/>
                     D-48149 Münster<br/><br/>
@@ -16,7 +23,7 @@ class Impressum extends Component {
                 </div>
                 <h2>Notice of Liability</h2>
                 <div flex="50">
-                    Although we check the content carefully, we cannot accept responsibility for the content of external links. 
+                    Although we check the content carefully, we cannot accept responsibility for the content of external links.
                     The linked sites’ carriers are responsible for their sites’ content.
                 </div>
             </div>
@@ -24,4 +31,4 @@ class Impressum extends Component {
     }
 }
 
-export default Impressum;
\ No newline at end of file
+export default Impressum;
diff --git a/ui/src/components/app/footerLinks/Privacy.js b/ui/src/components/app/footerLinks/Privacy.js
index c146c857..be3530cd 100644
--- a/ui/src/components/app/footerLinks/Privacy.js
+++ b/ui/src/components/app/footerLinks/Privacy.js
@@ -1,8 +1,15 @@
 import React, { Component } from "react";
+import config from '../../../helpers/config';
 
 class Privacy extends Component {
+
+    componentDidMount(){
+      document.title = "Privacy" + config.title;
+
+    }
+
     render() {
-        return ( 
+        return (
         <div>
             <h3>Privacy Policy</h3>
             <h4 id="userdata">User Data</h4>
@@ -40,4 +47,4 @@ class Privacy extends Component {
     }
 }
 
-export default Privacy;
\ No newline at end of file
+export default Privacy;
diff --git a/ui/src/components/authorView/Author.js b/ui/src/components/authorView/Author.js
index cae73a4e..00c40da9 100644
--- a/ui/src/components/authorView/Author.js
+++ b/ui/src/components/authorView/Author.js
@@ -3,6 +3,7 @@ import React, { Component } from "react";
 import httpRequests from '../../helpers/httpRequests';
 import ResultList from './resultList'
 import { Grid, Paper } from "@material-ui/core";
+import config from '../../helpers/config';
 
 class Author extends Component {
 
@@ -16,6 +17,7 @@ class Author extends Component {
     }
     componentDidMount() {
         this.getCompendia();
+        document.title = "Author View" + config.title;
     }
 
     goToErc = (erc) => {
@@ -88,4 +90,4 @@ class Author extends Component {
     }
 }
 
-export default Author;
\ No newline at end of file
+export default Author;
diff --git a/ui/src/components/createERC/CreateERC.js b/ui/src/components/createERC/CreateERC.js
index 2b501139..0788cafe 100644
--- a/ui/src/components/createERC/CreateERC.js
+++ b/ui/src/components/createERC/CreateERC.js
@@ -7,7 +7,7 @@ import RequiredMetadata from './requiredMetadata/RequiredMetadata';
 import SpatioTemporalMetadata from './spatioTemporalMetadata/SpatioTemporalMetadata';
 import Bindings from './bindings/Bindings';
 import httpRequests from '../../helpers/httpRequests';
-
+import config from '../../helpers/config';
 
 
 function TabContainer(props) {
@@ -35,7 +35,7 @@ class CreateERC extends Component {
             spatioTemporalChanged: false,
             authorsValid: false,
             candidate: true,
-            showProgress: false,
+            showProgress: false
         }
     }
 
@@ -146,17 +146,21 @@ class CreateERC extends Component {
         this.setState({ authorsValid: valid });
     };
 
-
-    componentDidMount = () => this.getMetadata();
+    componentDidMount = () => {
+      this.getMetadata();
+      document.title = "Create ERC" + config.title;
+    }
 
     handleClose = () => {
         this.setState({ open: false })
+
+
     }
 
     render() {
         const { value } = this.state;
         return (
-            <div>
+              <div>
                 <AppBar position="fixed" color="default" id="appBar">
                     <Tabs scrollButtons="on" variant="standard" indicatorColor="primary" centered textColor="primary"
                         value={value}
@@ -243,4 +247,4 @@ class CreateERC extends Component {
     }
 }
 
-export default CreateERC;
\ No newline at end of file
+export default CreateERC;
diff --git a/ui/src/components/createERC/bindings/Bindings.js b/ui/src/components/createERC/bindings/Bindings.js
index 9cd3fcb3..404f9ee4 100644
--- a/ui/src/components/createERC/bindings/Bindings.js
+++ b/ui/src/components/createERC/bindings/Bindings.js
@@ -280,9 +280,14 @@ function VerticalLinearStepper(props) {
           <Button onClick={saveErc} disabled = {!valid2} className={classes.button} variant="contained" color="primary">
             Publish
           </Button>
-          <Button onClick={goToErc} disabled = {props.candidate} className={classes.button} variant="contained" color="primary">
-            Go to ERC
-          </Button>
+          {props.candidate
+            ? <Button onClick={goToErc} className={classes.button} variant="contained">
+                Preview
+              </Button>
+            : <Button onClick={goToErc} disabled = {props.candidate} className={classes.button} variant="contained" color="primary">
+                Go to ERC
+              </Button>
+          }
         </Paper>
       )}
     </div>
@@ -472,7 +477,7 @@ class Bindings extends Component {
   }
 
   analyzeIfConditions = (analyzedCode, codelines) => {
-  
+
     for (var codeItem of analyzedCode) {
       if (codeItem.type === "if"  || codeItem.type === "while" ) {
         if(codeItem.code[0].func && codeItem.code[0].func.id ==="install.packages"){
@@ -530,8 +535,8 @@ class Bindings extends Component {
   /*handleMouseUp ( e ) {
     if (this.state.creationStep === 1) {
       try {
-        this.setCode(window.getSelection().getRangeAt(0).toString()); 
-      } catch (error) {     
+        this.setCode(window.getSelection().getRangeAt(0).toString());
+      } catch (error) {
       }
     } else if (this.state.creationStep === 2) {
       this.setState({
@@ -627,13 +632,13 @@ class Bindings extends Component {
   saveErc = () =>  {
     this.props.setChangedFalse("all")
     this.props.updateMetadata(this.props.metadata, true)
-    
+
   }
 
   goToErc= () => {
     this.props.goToErc();
   }
-  
+
   clearBinding() {
     let state = this.state;
     //state.codeview=true;
@@ -808,4 +813,4 @@ export default Bindings;
             }
         }
     }
-*/
\ No newline at end of file
+*/
diff --git a/ui/src/components/createERC/requiredMetadata/Form.js b/ui/src/components/createERC/requiredMetadata/Form.js
index 0d7637e3..4364de63 100644
--- a/ui/src/components/createERC/requiredMetadata/Form.js
+++ b/ui/src/components/createERC/requiredMetadata/Form.js
@@ -333,12 +333,20 @@ export const Form = props => {
                         >
                             Publish
                          </Button>
-                        <Button
-                            type="button"
-                            onClick={goToErc}
-                            disabled={props.candidate}>
-                            Go To ERC
+                        {props.candidate
+                          ? <Button
+                              type="button"
+                              onClick={goToErc}>
+                              Preview
+                            </Button>
+                          : <Button
+                              type="button"
+                              color="primary"
+                              onClick={goToErc}
+                              disabled={props.candidate}>
+                              Go To ERC
                             </Button>
+                       }
                     </Paper>
                     <div id={"errorMessage"}>
                         {errors.title ? errors.title : ""}
@@ -366,4 +374,4 @@ export const Form = props => {
 
         </form>
     )
-}
\ No newline at end of file
+}
diff --git a/ui/src/components/createERC/requiredMetadata/RequiredMetadata.js b/ui/src/components/createERC/requiredMetadata/RequiredMetadata.js
index ee03211b..1d1842f3 100644
--- a/ui/src/components/createERC/requiredMetadata/RequiredMetadata.js
+++ b/ui/src/components/createERC/requiredMetadata/RequiredMetadata.js
@@ -102,7 +102,7 @@ class RequiredMetadata extends Component {
         codeLicense: this.props.originalMetadata.license.code,
 
     }
-    
+
     componentDidMount() {
         prepareLicense();
         refs2 = refs.splice(refs.length - this.props.authors.length, refs.length)
@@ -190,7 +190,7 @@ class RequiredMetadata extends Component {
                             dataLicenses={dataLicenses}
                             mostRestrictiveData={mostRestrictiveData}
                             leastRestrictiveData={leastRestrictiveData}
-                            candidate={this.props.candidate} 
+                            candidate={this.props.candidate}
                             showProgress={this.props.showProgress} />}
                         initialValues={this.formValues}
                         validationSchema={validationSchema}
diff --git a/ui/src/components/createERC/spatioTemporalMetadata/SpatioTemporalMetadata.js b/ui/src/components/createERC/spatioTemporalMetadata/SpatioTemporalMetadata.js
index 62744760..4f6502c9 100644
--- a/ui/src/components/createERC/spatioTemporalMetadata/SpatioTemporalMetadata.js
+++ b/ui/src/components/createERC/spatioTemporalMetadata/SpatioTemporalMetadata.js
@@ -49,6 +49,10 @@ class SpatioTemporalMetadata extends React.Component {
     this.props.goToErc()
   }
 
+  handlePreview = (e) => {
+    this.props.goToErc()
+  }
+
   handleSave = () => {
     this.props.setChangedFalse("all")
     this.props.setMetadata(this.props.metadata, true)
@@ -309,12 +313,19 @@ class SpatioTemporalMetadata extends React.Component {
               >
                 Publish
             </Button>
-              <Button
-                type="button"
-                onClick={this.handleClick.bind(null)}
-                disabled={this.props.candidate}>
-                Go To ERC
-             </Button>
+              {this.props.candidate
+                ?<Button
+                    type="button"
+                    onClick={this.handlePreview.bind(null)}>
+                    Preview
+                  </Button>
+                : <Button
+                    type="button"
+                    onClick={this.handleClick.bind(null)}
+                    disabled={this.props.candidate}
+                    color="primary">
+                    Go To ERC
+                  </Button>}
             </Card>
             <div id={"errorMessage"}>
               {!valid2 ? "Required Metadata is not valid" : ""} <br />
diff --git a/ui/src/components/discovery/Discovery.js b/ui/src/components/discovery/Discovery.js
index 88c88eac..4ce5d1a5 100644
--- a/ui/src/components/discovery/Discovery.js
+++ b/ui/src/components/discovery/Discovery.js
@@ -6,6 +6,7 @@ import L from 'leaflet'
 import prepareQuery from './/queryBuilder'
 import OwnMap, { ref, ref2 } from "./Map"
 import ResultList from './resultList'
+import config from '../../helpers/config';
 
 import './discovery.css'
 
@@ -27,7 +28,11 @@ class Discovery extends Component {
         }
     }
 
-    componentDidMount() { this.searchCompendia(); this.calculateDateRange() }
+    componentDidMount() {
+      this.searchCompendia();
+      this.calculateDateRange();
+      document.title = "Discover" + config.title;
+     }
 
     calculateDateRange = () => {
         const result = []
@@ -312,4 +317,4 @@ class Discovery extends Component {
     }
 }
 
-export default Discovery;
\ No newline at end of file
+export default Discovery;
diff --git a/ui/src/components/erc/Check/Check.js b/ui/src/components/erc/Check/Check.js
index 5ba6acf7..ad428ee1 100644
--- a/ui/src/components/erc/Check/Check.js
+++ b/ui/src/components/erc/Check/Check.js
@@ -186,6 +186,7 @@ class Check extends Component {
 
     componentDidMount() {
         this.getJobs();
+        document.title = "Check | ERC " + this.props.id + config.title;
     }
 
     render() {
diff --git a/ui/src/components/erc/Check/Comparison/Comparison.js b/ui/src/components/erc/Check/Comparison/Comparison.js
index 019f6eb1..8df1be96 100644
--- a/ui/src/components/erc/Check/Comparison/Comparison.js
+++ b/ui/src/components/erc/Check/Comparison/Comparison.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Button, Dialog, AppBar, Toolbar, Slide, Typography } from "@material-ui/core";
+import { Button, Dialog, AppBar, Toolbar, Slide, Typography, FormControlLabel, Checkbox} from "@material-ui/core";
 import logo from '../../../../assets/img/o2r-logo-only-white.svg';
 import Iframe from 'react-iframe';
 import { withRouter } from 'react-router-dom';
@@ -26,6 +26,7 @@ class Comparison extends Component {
         if (this.props.location.search === '?result') {
             self.setState({ open: true })
         }
+        document.title = "Comparison | ERC " + this.state.job.compendium_id + config.title;
     }
 
     handleClickOpen = () => {
@@ -36,29 +37,46 @@ class Comparison extends Component {
         window.history.back();
     }
 
-    dialogEntered = () => {
-        // TODO allow to disable synched scrolling
-        if (this.state.job.status === 'success') {
-            $("#frame1").contents().scroll(function () {
-                $("#frame2").contents().scrollTop($("#frame1").contents().scrollTop());
-            });
-            $("#frame2").contents().scroll(function () {
-                $("#frame1").contents().scrollTop($("#frame2").contents().scrollTop());
-            });
-        }
-        else {
-            $("#frame1").contents().scroll(function () {
-                $("#frame2").contents().scrollTop($("#frame1").contents().scrollTop());
-                $("#frame3").contents().scrollTop($("#frame1").contents().scrollTop());
-            });
-            $("#frame2").contents().scroll(function () {
-                $("#frame1").contents().scrollTop($("#frame2").contents().scrollTop());
-                $("#frame3").contents().scrollTop($("#frame2").contents().scrollTop());
-            });
-            $("#frame3").contents().scroll(function () {
-                $("#frame1").contents().scrollTop($("#frame3").contents().scrollTop());
-                $("#frame2").contents().scrollTop($("#frame3").contents().scrollTop());
-            });
+    activateScroll = () => {
+
+          if (this.state.job.status === 'success') {
+              $("#frame1").contents().scroll(function () {
+                  $("#frame2").contents().scrollTop($("#frame1").contents().scrollTop());
+              });
+              $("#frame2").contents().scroll(function () {
+                  $("#frame1").contents().scrollTop($("#frame2").contents().scrollTop());
+              });
+          }
+          else {
+              $("#frame1").contents().scroll(function () {
+                  $("#frame2").contents().scrollTop($("#frame1").contents().scrollTop());
+                  $("#frame3").contents().scrollTop($("#frame1").contents().scrollTop());
+              });
+              $("#frame2").contents().scroll(function () {
+                  $("#frame1").contents().scrollTop($("#frame2").contents().scrollTop());
+                  $("#frame3").contents().scrollTop($("#frame2").contents().scrollTop());
+              });
+              $("#frame3").contents().scroll(function () {
+                  $("#frame1").contents().scrollTop($("#frame3").contents().scrollTop());
+                  $("#frame2").contents().scrollTop($("#frame3").contents().scrollTop());
+              });
+          }
+    }
+
+    deactivateScroll = () => {
+        $("#frame1").contents().off( "scroll" );
+        $("#frame2").contents().off( "scroll" );
+        $("#frame3").contents().off( "scroll" );
+    }
+
+    handleCheck = (event) => {
+      let checked = event.target.checked;
+      console.log(checked);
+      if(checked){
+         this.activateScroll();
+       }
+       else{
+         this.deactivateScroll();
         }
     }
 
@@ -76,7 +94,7 @@ class Comparison extends Component {
                 <Dialog className="main_block" fullScreen TransitionComponent={Transition}
                     open={this.state.open}
                     onClose={this.handleClose}
-                    onEntered={this.dialogEntered}
+                    onEntered={this.activateScroll}
                 >
                     <AppBar>
                         <Toolbar>
@@ -101,6 +119,15 @@ class Comparison extends Component {
                             <Iframe className="check_" id={'frame2'} url={config.baseUrl + "job/" + this.state.job.id + "/data/" + this.props.displayfile}></Iframe>
                             <Iframe className="diff" id={'frame3'} url={config.baseUrl + "job/" + this.state.job.id + "/data/check.html"}></Iframe>
                             <h4 className="title_" > To use synchronised scrolling in Firefox, move the cursor to the leftmost document. </h4>
+                            <FormControlLabel
+                              className = "checkScroll"
+                              label = "Synchronised scrolling"
+                              labelPlacement = "start"
+                              control = {<Checkbox
+                                          color="primary"
+                                          onChange={this.handleCheck}
+                                          defaultChecked/>}
+                              />
                         </div>
                     }
                 </Dialog>
@@ -109,4 +136,4 @@ class Comparison extends Component {
     }
 }
 
-export default withRouter(Comparison);
\ No newline at end of file
+export default withRouter(Comparison);
diff --git a/ui/src/components/erc/Check/Comparison/comparison.css b/ui/src/components/erc/Check/Comparison/comparison.css
index 33381a54..05dabd5d 100644
--- a/ui/src/components/erc/Check/Comparison/comparison.css
+++ b/ui/src/components/erc/Check/Comparison/comparison.css
@@ -32,4 +32,8 @@
     color: #004286;
     width: 48%;
     float: left;
-}
\ No newline at end of file
+}
+
+.checkScroll{
+  margin-top: 0.75%;
+}
diff --git a/ui/src/components/erc/ERC.js b/ui/src/components/erc/ERC.js
index e6ba85bf..bf357bde 100644
--- a/ui/src/components/erc/ERC.js
+++ b/ui/src/components/erc/ERC.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import 'react-reflex/styles.css';
 import { ReflexContainer, ReflexElement, ReflexSplitter } from 'react-reflex';
-import { Paper, Tabs, Tab, Button, IconButton, Grid, Dialog, DialogActions, DialogTitle, Icon } from "@material-ui/core";
+import { Paper, Tabs, Tab, Button, IconButton, Grid, Dialog, DialogActions, DialogTitle, , Icon, Box} from "@material-ui/core";
 import GetAppIcon from '@material-ui/icons/GetApp';
 
 import config from '../../helpers/config';
@@ -34,13 +34,18 @@ class ERC extends React.Component {
             tabValue: 0,
             html: true,
             pdf: true,
+            isPreview: false
             doiurl: false,
             publicLink: false,
         };
         this.handleClose = this.handleClose.bind(this);
     }
 
-    componentDidMount = () => { this.getMetadata(); this.props.history.replace(this.props.location.pathname) };
+    componentDidMount = () => {
+      this.getMetadata();
+      this.props.history.replace(this.props.location.pathname);
+      document.title = "ERC " + this.state.id + config.title;
+     };
 
 
     setDataFile(datafile) {
@@ -169,6 +174,7 @@ class ERC extends React.Component {
                     codefiles: data.codefiles,
                     binding: data.interaction[0],
                     substituted: substituted,
+                    isPreview: response.data.candidate
                     candidate: candidate,
                     doiurl: data.identifier.doiurl
                 }, () => { 
@@ -240,9 +246,26 @@ class ERC extends React.Component {
         });
     }
 
+
+
+
     render() {
+        const classes = this.useStyles
         return (
             <div className="Erc" >
+              {this.state.isPreview ? <Box
+                                          color="white"
+                                          textAlign="center"
+                                          bgcolor="warning.main"
+                                          width={1/3}
+                                          border={1}
+                                          borderRadius={4}
+                                          mx="auto"
+                                          my={2}
+                                          >
+                                          <p><b>This is a preview! Changes from the create window will not be displayed.</b></p>
+                                      </Box> : ""}
+                <Box  borderTop={1} borderColor="silver">
                 <ReflexContainer style={{ height: "87vh" }} orientation="vertical">
                     <ReflexElement style={{ overflow: "hidden" }}>
                         <Grid container>
@@ -266,7 +289,7 @@ class ERC extends React.Component {
                                     <Button
                                         onClick={this.handleDisplayFile.bind(this)}
                                         variant='contained'
-                                        color='inherit'
+                                        color = "inherit"
                                         style={{ float: "center" }}
                                     >
                                         {this.state.html ? 'Show PDf' : 'Show HTML'}
@@ -371,6 +394,7 @@ class ERC extends React.Component {
                         }
                     </ReflexElement>
                 </ReflexContainer>
+                </Box>
                 <Dialog
                     open={this.state.failure}
                     onClose={this.handleAlertClose.bind(this)}>
diff --git a/ui/src/components/erc/Inspect/Inspect.js b/ui/src/components/erc/Inspect/Inspect.js
index edd3ae05..1ecb1132 100644
--- a/ui/src/components/erc/Inspect/Inspect.js
+++ b/ui/src/components/erc/Inspect/Inspect.js
@@ -4,26 +4,31 @@ import { ReflexContainer, ReflexElement, ReflexSplitter } from 'react-reflex';
 import CodeView from './CodeView/CodeView';
 import DataView from './DataView/DataView';
 import SelectFile from './SelectFile/SelectFile';
+import config from '../../../helpers/config';
 
 class Inspect extends Component {
 
+    componentDidMount(){
+      document.title = "Inspect | ERC " + this.props.state.id + config.title;
+    }
+
     render() {
         const props=this.props.state;
         return (
             <ReflexContainer orientation="horizontal" style={{height: "92%"}}>
                 <ReflexElement>
-                    {props.codefiles != null && props.codefile != null 
-                    ?<SelectFile 
-                        value={props.codefile.filename} 
-                        handleChange={this.props.handleCodeChange} 
-                        options={props.codefiles} 
+                    {props.codefiles != null && props.codefile != null
+                    ?<SelectFile
+                        value={props.codefile.filename}
+                        handleChange={this.props.handleCodeChange}
+                        options={props.codefiles}
                         name="codefile" />
                     :''}
-                    {props.codefile != null 
-                    ?<CodeView 
-                        code={props.codefile.file.data} 
-                        handleTabChange={this.props.handleTabChange} 
-                        metadata={this.props.state.metadata} /> 
+                    {props.codefile != null
+                    ?<CodeView
+                        code={props.codefile.file.data}
+                        handleTabChange={this.props.handleTabChange}
+                        metadata={this.props.state.metadata} />
                     :<div>There is no data to display</div>}
                 </ReflexElement>
                 <ReflexSplitter propagate={true} style={{ height: "10px" }} />
@@ -31,11 +36,11 @@ class Inspect extends Component {
                     {props.dataset !== undefined && Array.isArray(props.datafiles)
                     ?<SelectFile value={props.dataset.datafile} handleChange={this.props.handleDataChange} options={props.datafiles} name="dataset" />
                     : ''}
-                    {props.dataset != null 
-                    ?<DataView 
+                    {props.dataset != null
+                    ?<DataView
                         data={props.dataset}
-                        id={props.id} 
-                    /> 
+                        id={props.id}
+                    />
                     :<div>There is no data to display</div>}
                 </ReflexElement>
             </ReflexContainer>
@@ -43,4 +48,4 @@ class Inspect extends Component {
     }
 }
 
-export default Inspect;
\ No newline at end of file
+export default Inspect;
diff --git a/ui/src/components/erc/Manipulate/Manipulate.js b/ui/src/components/erc/Manipulate/Manipulate.js
index 6127a5ee..b3a41370 100644
--- a/ui/src/components/erc/Manipulate/Manipulate.js
+++ b/ui/src/components/erc/Manipulate/Manipulate.js
@@ -38,15 +38,16 @@ class Manipulate extends React.Component {
         if (this.state.bindings.length > 5) {
             this.setState({ variant: "scrollable" })
         }
+        document.title = "Manipulate | ERC " + this.props.id + config.title;
     }
 
     componentDidUpdate = (prevProps) => {
         if(JSON.stringify(this.props.bindings) !== JSON.stringify(prevProps.bindings)){
             this.setState({bindings : this.props.bindings, binding: this.props.bindings[0], params: this.getParams(this.props.bindings[0].sourcecode.parameter)}, () => this.setParameter.bind(this))
-            
+
         }
     }
-    
+
     runManipulateService() {
         const self = this;
         self.state.bindings.forEach((binding) => {
@@ -273,4 +274,4 @@ class Manipulate extends React.Component {
     }
 }
 
-export default Manipulate;
\ No newline at end of file
+export default Manipulate;
diff --git a/ui/src/components/erc/Metadata/Metadata.js b/ui/src/components/erc/Metadata/Metadata.js
index 4cc2fc55..04bab88b 100644
--- a/ui/src/components/erc/Metadata/Metadata.js
+++ b/ui/src/components/erc/Metadata/Metadata.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { List, ListItem, ListItemText, Button } from '@material-ui/core';
-import { Map, TileLayer, Polygon } from 'react-leaflet'
+import { Map, TileLayer, Polygon } from 'react-leaflet';
+import config from '../../../helpers/config';
 
 
 import { withRouter } from 'react-router-dom';
@@ -16,6 +17,7 @@ class Metadata extends React.Component {
     componentDidMount() {
         ref2 = this.refs.map.leafletElement;
         ref2.fitBounds([this.metadata.spatial.union.bbox[0], this.metadata.spatial.union.bbox[2]])
+        document.title = "Metadata | ERC " + this.props.erc.id + config.title;
     }
 
     goToErc = (id) => {
@@ -94,4 +96,4 @@ class Metadata extends React.Component {
     }
 }
 
-export default withRouter(Metadata);
\ No newline at end of file
+export default withRouter(Metadata);
diff --git a/ui/src/components/erc/Substitution/Substitution.js b/ui/src/components/erc/Substitution/Substitution.js
index 602693fd..1359766c 100644
--- a/ui/src/components/erc/Substitution/Substitution.js
+++ b/ui/src/components/erc/Substitution/Substitution.js
@@ -1,7 +1,8 @@
 import React from 'react';
 
 import httpRequests from '../../../helpers/httpRequests';
-import { Card, CardHeader, CardContent, Button, IconButton, Collapse, Grid } from '@material-ui/core';
+import config from '../../../helpers/config';
+import { Card, CardHeader, CardContent, CardActions, Button, IconButton, Collapse, Grid } from '@material-ui/core';
 import Substitute from './Substitute/Subsititute'
 
 import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
@@ -26,6 +27,7 @@ class Substitution extends React.Component {
         if (this.props.baseErcData.metadata.o2r.inputfiles.length !== 0) {
             this.getCompendia()
         }
+        document.title = "Substitution | ERC " + this.props.baseErcId + config.title;
     }
 
     getCompendia = () => {
diff --git a/ui/src/components/startpage/Startpage.js b/ui/src/components/startpage/Startpage.js
index 139e9105..05ffffd8 100644
--- a/ui/src/components/startpage/Startpage.js
+++ b/ui/src/components/startpage/Startpage.js
@@ -4,12 +4,17 @@ import { Card, CardContent, Grid } from "@material-ui/core/";
 import './startpage.css';
 import Upload from "../uploadERC/Upload";
 import InspectExamples from '../inspectExamples/InspectExamples';
+import config from '../../../helpers/config';
 
 class Startpage extends Component {
   state = {
     spacing: "10"
   };
 
+  componentDidMount(){
+    document.title = "Home" + config.title;
+  }
+
   render() {
     const { spacing } = this.state;
 
@@ -28,7 +33,7 @@ class Startpage extends Component {
             </Card>
             </Grid>
             <Grid item>
-            <Card id="uploadCard2">    
+            <Card id="uploadCard2">
             <CardContent>
                 <InspectExamples />
             </CardContent>
diff --git a/ui/src/components/startpageDemo/Startpage.js b/ui/src/components/startpageDemo/Startpage.js
index dc28c701..55fc9b79 100644
--- a/ui/src/components/startpageDemo/Startpage.js
+++ b/ui/src/components/startpageDemo/Startpage.js
@@ -4,10 +4,10 @@ import './startpage.css';
 import httpRequests from '../../helpers/httpRequests';
 import InspectExamples from '../inspectExamplesDemo/InspectExamples';
 import Dropzone from "../uploadERC/Dropzone/Dropzone";
+import config from '../../helpers/config';
 import { Grid, TextField, Button, Dialog, DialogActions, DialogContent, DialogTitle, CircularProgress } from '@material-ui/core';
 import { withRouter } from 'react-router-dom';
 
-
 class Startpage extends Component {
   state = {
     spacing: "10",
@@ -59,9 +59,15 @@ class Startpage extends Component {
   }
 
 
+
+  componentDidMount(){
+    document.title = "Home" + config.title;
+  }
+
 render() {
   const { spacing } = this.state;
 
+
   return (
     <div>
       <Grid container spacing={3}>
@@ -137,4 +143,5 @@ render() {
 }
 }
 
+
 export default withRouter(Startpage);
\ No newline at end of file
diff --git a/ui/src/helpers/config.json b/ui/src/helpers/config.json
index 153a95d4..e6235fc2 100644
--- a/ui/src/helpers/config.json
+++ b/ui/src/helpers/config.json
@@ -1,4 +1,5 @@
 {
     "baseUrl": "http://localhost/api/v1/",
-    "ercUrl": "http://localhost/#/erc/"
-}
\ No newline at end of file
+    "ercUrl": "http://localhost/#/erc/",
+    "title":" | o2r Demoserver"
+}
diff --git a/ui/src/helpers/theme.js b/ui/src/helpers/theme.js
index 93875e4f..5043bf08 100644
--- a/ui/src/helpers/theme.js
+++ b/ui/src/helpers/theme.js
@@ -11,8 +11,8 @@ const o2rTheme = createMuiTheme({
         success: {
             main: '#008643'
         },
-        warn: {
-            main: '#CE5100'
+        warning: {
+          main: '#CE5100'
         },
         failure: {
             main: '#860000'
@@ -21,4 +21,4 @@ const o2rTheme = createMuiTheme({
 
   });
 
-  export default o2rTheme;
\ No newline at end of file
+  export default o2rTheme;