diff --git a/.gitignore b/.gitignore
index baf6b9d..3aeda52 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 .buildpath
 .project
 .settings/
+*.xcf
diff --git a/application/views/header.php b/application/views/header.php
index 6ee7b53..810e32a 100644
--- a/application/views/header.php
+++ b/application/views/header.php
@@ -21,3 +21,11 @@
 </head>
 
 <body>
+
+<div id="header">
+  <?=img(array('src' => 'assets/images/logo.png', 'style' => 'margin-left: 5px'));?>
+  <div style="float: right; margin-top: 15px; margin-right: 10px; color: #ccc;">
+    <?=anchor('auth/settings', "Einstellungen", array('style' => 'padding: 5px;'));?> |
+    <?=anchor('auth/logout', "Logout", array('style' => 'padding: 5px;'));?>
+  </div>
+</div>
diff --git a/application/views/index.php b/application/views/index.php
index eb56078..16a6732 100644
--- a/application/views/index.php
+++ b/application/views/index.php
@@ -1,45 +1,46 @@
 <?php $this->load->view('header'); ?>
 
 <script type="text/javascript">
-var layoutLeft1 = new Ext.tree.TreePanel({
-    region: 'north',
+var projectPanel = new Ext.tree.TreePanel({
+    id: 'project-tree',
+    region: 'west',
     title: "Projekte",
-    height: 250,
+    height: 400,
     bodyStyle: 'margin-bottom: 6px;',
     autoScroll: true,
-    enableDD: false,
-    rootVisible: false,
-    id: 'treePanel',
+    rootVisible: true,
+    lines: false,
+    tbar: [{
+    	icon: BASE_PATH + 'assets/images/icons/box--plus.png',
+        text: "Neues Projekt",
+        scope: this
+    },{
+        id: 'delete',
+        icon: BASE_PATH + 'assets/images/icons/box--minus.png',
+        text: "Entfernen",
+        scope: this
+    }],
     root: {
-        text: "Projekte",
+        text: "Meine Projekte",
         expanded: true,
-        nodeType: 'async',
         children: [{
             text: 'Projekt 1',
-            expanded: false
+            leaf: true
         }, {
             text: 'Projekt 2',
-            expanded: false,
+            leaf: true
         }]
     }
 });
 
 var layoutLeft2 = new Ext.Panel({
-    region: 'center',
+    region: 'west',
     margin: '10 0 0 0',
     autoScroll: true,
     bodyStyle: 'padding: 10px; background: #eee;',
     html: 'Test'
 });
 
-var toolbarCenter = new Ext.Toolbar({
-    items: ['->', {
-        icon: BASE_PATH + 'assets/images/icons/minus-circle.png',
-        text: 'Logout',
-        handler: logout
-    }]
-});
-
 var panelCenter = new Ext.TabPanel({
     xtype: 'tabpanel',
     resizeTabs: false,
@@ -65,36 +66,34 @@ var layoutCenter = new Ext.Panel({
     margins: '0 5 5 0',
     activeItem: 0,
     border: true,
-    tbar: toolbarCenter,
     items: [panelCenter]
 });
 
 var layoutMain = new Ext.Viewport({
     layout: 'border',
-    renderTo: Ext.getBody(),
     items: [{
+        height: 46,
         region: 'north',
+        xtype: 'box',
+        el: 'header',
+        border: false
+    }, {
+        region: 'west',
+        baseCls: 'x-plain',
+        xtype: 'panel',
         autoHeight: true,
-        height: 100,
+        width: 190,
+        minWidth: 190,
+        maxWidth: 300,
         border: false,
-            html: '<div id="header">Scattport</div>',
-            margins: '0 0 5 0',
-            style: 'margin-bottom: 4px;'
-        }, {
-            region: 'west',
-            baseCls: 'x-plain',
-            xtype: 'panel',
-            autoHeight: true,
-            width: 180,
-            border: false,
-            split: true,
-            margins: '0 0 0 5',
-            items: [layoutLeft1, layoutLeft2]
-        }, layoutCenter]
+        split: true,
+        margins: '0 0 0 5',
+        items: [projectPanel, layoutLeft2]
+    }, layoutCenter]
 });
 
 function logout() {
-    Ext.Ajax.request({
+    $.ajax({
         url: BASE_URL + 'auth/do_logout',
         method: 'post',
         success: function(xhr) {
@@ -102,8 +101,8 @@ function logout() {
         }
     });
 }
-
-layoutMain.show();
 </script>
 
+<div id="main"></div>
+
 <?php $this->load->view('footer'); ?>
\ No newline at end of file
diff --git a/assets/css/main.css b/assets/css/main.css
index d326b79..432b250 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,13 +1,30 @@
 body {
-    background: #7f99be;
+    font: normal 12px "Trebuchet MS", Arial, sans-serif;
+}
+
+html, body {
+    margin: 0;
+    padding: 0;
+    border: 0 none;
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+}
+
+a {
+    color: #4b6b94;
+    text-decoration: none;
+}
+
+a:hover {
+    color: #999;
+    text-decoration: underline;
 }
 
 #header {
-    border-bottom: 1px solid #666;
-    background: #1e4176;
-    padding: 5px;
-    color: #fff;
-    font-size: 20px;
-    font-weight: bold;
-    font-family: 'Trebuchet MS', sans-serif;
-}
\ No newline at end of file
+    height: 46px;
+}
+
+.x-viewport body {
+    background: #ededed url('../images/back.png') repeat-x !important;
+}
diff --git a/assets/images/back.png b/assets/images/back.png
new file mode 100644
index 0000000..bbaf929
Binary files /dev/null and b/assets/images/back.png differ
diff --git a/assets/images/logo.png b/assets/images/logo.png
new file mode 100644
index 0000000..b626fc4
Binary files /dev/null and b/assets/images/logo.png differ
