diff --git a/ui/public/favicon.ico b/ui/public/favicon.ico
index a11777c..0f9ee87 100644
Binary files a/ui/public/favicon.ico and b/ui/public/favicon.ico differ
diff --git a/ui/public/index.html b/ui/public/index.html
index ed0ebaf..4a179b0 100644
--- a/ui/public/index.html
+++ b/ui/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Perfix</title>
   </head>
   <body>
     <noscript>
diff --git a/ui/src/App.css b/ui/src/App.css
index 4e8cf7c..d71099b 100644
--- a/ui/src/App.css
+++ b/ui/src/App.css
@@ -1,3 +1,54 @@
+body {
+  background:white;
+  font: normal 12px/150% Arial, Helvetica, sans-serif;
+  padding:5px;
+}
+
+.view{
+  padding: 10px;
+  border: 1px solid #006699;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+
+/**
+ * Framework starts from here ...
+ * ------------------------------
+ */
+
+.tree,
+.tree ul {
+  margin:0 0 0 1em; /* indentation */
+  padding:0;
+  list-style:none;
+  color:#369;
+  position:relative;
+}
+
+.tree ul {margin-left:.5em} /* (indentation/2) */
+
+.tree:before,
+.tree ul:before {
+  content:"";
+  display:block;
+  width:0;
+  position:absolute;
+  top:0;
+  bottom:0;
+  left:0;
+  border-left:1px solid;
+}
+
+.tree li {
+  margin:0;
+  padding:0 1.5em; /* indentation + .5em */
+  line-height:2em; /* default list item's `line-height` */
+  position:relative;
+  color: #000;
+}
+
+
 .datagrid table {
   border-collapse: collapse;
   text-align: left;
@@ -5,9 +56,9 @@
 }
 
 .datagrid {
+  padding: 10px;
   font: normal 12px/150% Arial, Helvetica, sans-serif;
   background: #fff;
-  overflow: hidden;
   border: 1px solid #006699;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
@@ -19,14 +70,7 @@
 }
 
 .datagrid table thead th {
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F));
-  background: -moz-linear-gradient(center top, #006699 5%, #00557F 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');
-  background-color: #006699;
-  color: #ffffff;
-  font-size: 15px;
-  font-weight: bold;
-  border-left: 1px solid #0070A8;
+  
 }
 
 .datagrid table thead th:first-child {
diff --git a/ui/src/App.js b/ui/src/List.js
similarity index 85%
rename from ui/src/App.js
rename to ui/src/List.js
index 612670e..fa043ff 100644
--- a/ui/src/App.js
+++ b/ui/src/List.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import './App.css';
 import axios from 'axios';
 
-class App extends Component {
+class List extends Component {
   state = {
     data: []
   }
@@ -21,7 +21,7 @@ class App extends Component {
   render() {
     return (
       <div className="datagrid">
-        <button type="button" onClick={() => this.loadData()}>refresh</button>
+        <h1>List view</h1>
         <table>
           <thead><tr><th>name</th><th>invocations</th><th>totalDuration</th><th>average</th></tr></thead>
           <tbody>
@@ -35,4 +35,4 @@ class App extends Component {
   }
 }
 
-export default App;
+export default List;
diff --git a/ui/src/Tree.js b/ui/src/Tree.js
new file mode 100644
index 0000000..7385ef3
--- /dev/null
+++ b/ui/src/Tree.js
@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import axios from 'axios';
+import List from './List';
+
+class Tree extends Component {
+    state = { data: [] };
+
+    componentDidMount() {
+        this.loadData();
+    }
+
+    loadData() {
+        axios.get("http://localhost:2048/callstack")
+            .then(response => this.setState({ data: response.data }));
+    }
+
+    renderChildren(children) {
+        return (<ul className="tree">
+            {children.map(
+                r =>
+                    <li>
+                        {Math.floor(r.report.average / 1000) / 1000} ms &nbsp;
+                        - {r.report.invocations} inv. &nbsp;
+                        {r.report.name}
+                        {this.renderChildren(r.children)}
+                    </li>
+            )}
+        </ul>)
+    }
+
+    render() {
+        return (
+            <div>
+                <div className="view"><h1>Callstack view</h1>
+                    {/* <button type="button" onClick={this.loadData()}> refresh </button> */}
+                    {this.renderChildren(this.state.data)}
+                </div>
+                <p/>
+                <List/>
+            </div>
+        )
+    }
+}
+
+export default Tree;
\ No newline at end of file
diff --git a/ui/src/index.js b/ui/src/index.js
index fae3e35..bcfab92 100644
--- a/ui/src/index.js
+++ b/ui/src/index.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import Tree from './Tree';
 import registerServiceWorker from './registerServiceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<Tree />, document.getElementById('root'));
 registerServiceWorker();
