diff --git a/application/controllers/auth.php b/application/controllers/auth.php
index 7fa3275..311c8d4 100755
--- a/application/controllers/auth.php
+++ b/application/controllers/auth.php
@@ -11,6 +11,13 @@ class Auth extends CI_Controller {
      * Shows the index page.
      */
 	public function index()	{
+		$this->load->view('index');
+	}
+
+    /**
+     * Shows the index page.
+     */
+	public function login()	{
 		$this->load->view('auth/login');
 	}
 
@@ -20,6 +27,13 @@ class Auth extends CI_Controller {
 	public function do_login() {
 	    echo "{success: true}";
 	}
+
+	/**
+	 * Logs the user out.
+	 */
+	public function do_logout() {
+	    echo "{success: true}";
+	}
 }
 
 /* End of file auth.php */
diff --git a/application/views/header.php b/application/views/header.php
index 7b8f53a..6ee7b53 100644
--- a/application/views/header.php
+++ b/application/views/header.php
@@ -3,6 +3,7 @@
 <head>
   <title>Scattport</title>
   <meta charset="utf-8" />
+  <?=link_tag('assets/css/main.css');?>
   <?=link_tag('assets/js/ext/resources/css/ext-all.css');?>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
   <!-- ExtJS library: base/adapter -->
diff --git a/application/views/index.php b/application/views/index.php
new file mode 100644
index 0000000..eb56078
--- /dev/null
+++ b/application/views/index.php
@@ -0,0 +1,109 @@
+<?php $this->load->view('header'); ?>
+
+<script type="text/javascript">
+var layoutLeft1 = new Ext.tree.TreePanel({
+    region: 'north',
+    title: "Projekte",
+    height: 250,
+    bodyStyle: 'margin-bottom: 6px;',
+    autoScroll: true,
+    enableDD: false,
+    rootVisible: false,
+    id: 'treePanel',
+    root: {
+        text: "Projekte",
+        expanded: true,
+        nodeType: 'async',
+        children: [{
+            text: 'Projekt 1',
+            expanded: false
+        }, {
+            text: 'Projekt 2',
+            expanded: false,
+        }]
+    }
+});
+
+var layoutLeft2 = new Ext.Panel({
+    region: 'center',
+    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,
+    minTabWidth: 115,
+    tabWidth: 135,
+    enableTabScroll: true,
+    layoutOnTabChange: true,
+    border: false,
+    activeItem: 'tab_welcome',
+    autoDestroy: false,
+    items: [{
+        xtype: 'panel',
+        id: 'tab_welcome',
+        bodyStyle: 'padding: 10px',
+        title: "Willkommen"
+    }]
+});
+
+var layoutCenter = new Ext.Panel({
+    id: 'content-panel',
+    region: 'center',
+    layout: 'card',
+    margins: '0 5 5 0',
+    activeItem: 0,
+    border: true,
+    tbar: toolbarCenter,
+    items: [panelCenter]
+});
+
+var layoutMain = new Ext.Viewport({
+    layout: 'border',
+    renderTo: Ext.getBody(),
+    items: [{
+        region: 'north',
+        autoHeight: true,
+        height: 100,
+        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]
+});
+
+function logout() {
+    Ext.Ajax.request({
+        url: BASE_URL + 'auth/do_logout',
+        method: 'post',
+        success: function(xhr) {
+            window.location = BASE_URL + 'auth/login';
+        }
+    });
+}
+
+layoutMain.show();
+</script>
+
+<?php $this->load->view('footer'); ?>
\ No newline at end of file
