diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..ece904f
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,14 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Launch Program",
+            "program": "${workspaceFolder}\\start"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/components/App.tsx b/src/components/App.tsx
index b7bd628..40e14fa 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,20 +1,77 @@
 import * as React from 'react';
 import '../style/App.css';
-import { Redirect } from 'react-router';
-import Auth from "../services/Auth";
-import { withRouter } from 'react-router-dom';
+import AppBar from 'material-ui/AppBar';
+import Slider from './Slider';
+import Drawer from 'material-ui/Drawer';
+import SideBar from './Sidebar';
+import RaisedButton from 'material-ui/RaisedButton';
+
+// hotfix for navbar
+const styles = {
+    appBar: {
+        flexWrap: "wrap",
+    },
+    floatRight: {
+        float: "right",
+    },
+};
 
 class App extends React.Component<any, any> {
 
+    allowedExtensions = ".n3,.ttl,.rdf";
+
+    constructor(props: string) {
+        super(props);
+        this.state = {open: false};
+        this.handleToggle = this.handleToggle.bind(this);
+    }
+
+    handleToggle(): void {
+        this.setState(prevState => ({
+            open: !prevState.open
+        }));
+    }
+
   render() {
-      if (! Auth.isLoggedIn()) {
-          return <Redirect to={"/login"} />;
-      } else {
-          return (
-              <div><h1>Hello World </h1></div>
-          );
-      }
+    return (
+        <div>
+            <AppBar
+                title="UnSHACLed"
+                style={{flexWrap: "wrap"}}
+                iconClassNameRight="muidocs-icon-navigation-expand-more"
+                onLeftIconButtonClick={this.handleToggle}
+            >
+                <Drawer
+                    width={220}
+                    docked={false}
+                    open={this.state.open}
+                    onRequestChange={(open) => this.setState({open})}
+                >
+                    <AppBar onLeftIconButtonClick={this.handleToggle}/>
+                    <SideBar/>
+                </Drawer>
+
+                <div style={styles.floatRight}>
+                    <RaisedButton primary={true} label="import Project" className="importProjectButton"/>
+                    <RaisedButton primary={true} label="save Project" className="saveProjectButton"/>
+                    <RaisedButton primary={true} label="import Graph" className="uploadFileButton"/>
+                    <input type="file" onClick={this.uploadFileButton} id="importGraph" style={{"display" : "none"}} /> 
+                    accept={this.allowedExtensions} />
+                    <RaisedButton primary={true} label="save Graph"/>
+                </div>
+            </AppBar>
+
+            <div className="footer">
+                <Slider/>
+            </div>
+        </div>
+    );
+  }
+
+    uploadFileButton() {
+        var input = document.getElementById("importGraph");
+        input.click();
     }
 }
 
-export default withRouter(App);
+export default App;
diff --git a/src/components/containerHome.tsx b/src/components/containerHome.tsx
index df83eae..3519f40 100644
--- a/src/components/containerHome.tsx
+++ b/src/components/containerHome.tsx
@@ -56,6 +56,7 @@ class HomeContainer extends React.Component {
                             style={{color: 'white'}}
                         > 
                             <Button
+                                id="firstLoginButton"
                                 inverted={true}
                                 color="teal"
                                 size="huge"
@@ -66,6 +67,7 @@ class HomeContainer extends React.Component {
                     </Grid.Column>
                     <Grid.Column style={{maxWidth: 250}}>
                         <Button
+                            id="firstSignUpButton"
                             animated="fade"
                             inverted={true}
                             size="huge"
diff --git a/src/components/navbarHome.tsx b/src/components/navbarHome.tsx
index 227d3c1..9a81ee8 100644
--- a/src/components/navbarHome.tsx
+++ b/src/components/navbarHome.tsx
@@ -21,6 +21,7 @@ class Navbar extends React.Component<any, any> {
                         <Image src={logo} size="mini"/>
                     </Menu.Item>
                     <Menu.Item
+                        id="AboutMenuItem"
                         as={Link}
                         to="/about"
                         style={{color: 'white'}}
@@ -28,6 +29,7 @@ class Navbar extends React.Component<any, any> {
                         About
                     </Menu.Item>
                     <Menu.Item
+                        id="ContactMenuItem"
                         as={Link}
                         to="/contact"
                         style={{color: 'white'}}
@@ -35,6 +37,7 @@ class Navbar extends React.Component<any, any> {
                         Contact
                     </Menu.Item>
                     <Menu.Item
+                        id="GithubMenuItem"
                         as="a"
                         href="https://github.com/dubious-developments/UnSHACLed"
                         target="_blank"
@@ -47,6 +50,7 @@ class Navbar extends React.Component<any, any> {
                         }
                     />
                     <Menu.Item
+                        id="ReleaseNotesMenuItem"
                         as="a"
                         href="https://github.com/dubious-developments/UnSHACLed/wiki/Release-notes"
                         target="_blank"
diff --git a/src/form/LoginForm.tsx b/src/form/LoginForm.tsx
index b8e7704..87511d8 100644
--- a/src/form/LoginForm.tsx
+++ b/src/form/LoginForm.tsx
@@ -46,6 +46,7 @@ class LoginForm extends React.Component<any, any> {
 
                                 >
                                     <Input
+                                        id="userNameInput"
                                         size="large"
                                         required={true}
                                         fluid={true}
@@ -59,6 +60,7 @@ class LoginForm extends React.Component<any, any> {
                                     inline={true}
                                 >
                                     <Input
+                                        id="passWordInput"
                                         size="large"
                                         required={true}
                                         fluid={true}
@@ -70,6 +72,7 @@ class LoginForm extends React.Component<any, any> {
                                 </Form.Field>
 
                                 <Button
+                                    id="secondLoginButton"
                                     color="teal"
                                     fluid={true}
                                     inverted={true}
@@ -84,6 +87,7 @@ class LoginForm extends React.Component<any, any> {
                                 >Or
                                 </Divider>
                                 <Button
+                                    id="secondSignUpButton"
                                     animated="fade"
                                     fluid={true}
                                     inverted={true}
diff --git a/testfiles/test.ttl b/testfiles/test.ttl
new file mode 100644
index 0000000..e69de29