diff --git a/src/index.js b/src/index.js
index 9c7f4425de43bdb73b7143c8c50eda10764ab6e0..ce76ae1ecafd786cf01108b6d0256ddfbd8e0eb9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,7 @@
 import { LoginScreen } from './login';
 import TableView from './views/tableView';
 import { UserModal, UserTable } from './userTool';
+import Sidebar from './sidebar';
 
 const m = require('mithril');
 
@@ -9,24 +10,42 @@ document.body.appendChild(main);
 const root = main;
 
 
+class Layout {
+  view(vnode) {
+    return m('div.wrapper-main.smooth', [
+      m(Sidebar),
+      m('div.navbar.navbar-defailt.navbar-main'),
+      m('div.wrapper-content', vnode.children),
+    ]);
+  }
+}
+
+function layoutWith(view) {
+  return {
+    view() {
+      return m(Layout, m(view));
+    },
+  };
+}
+
 m.route(root, '/users', {
-  '/users': UserTable,
-  '/users/:id': UserModal,
-  '/events': {
+  '/users': layoutWith(UserTable),
+  '/users/:id': layoutWith(UserModal),
+  '/events': layoutWith({
     view() {
       return m(TableView, {
         resource: 'events',
         keys: ['title_de', 'time_start', 'show_website', 'spots', 'signup_count'],
       });
     },
-  },
-  '/groups': {
+  }),
+  '/groups': layoutWith({
     view() {
       return m(TableView, {
         resource: 'groups',
         keys: ['name'],
       });
     },
-  },
+  }),
   '/login': LoginScreen,
 });
diff --git a/src/sidebar.js b/src/sidebar.js
new file mode 100644
index 0000000000000000000000000000000000000000..555022e60f4328eed25dc595ab988df71747160c
--- /dev/null
+++ b/src/sidebar.js
@@ -0,0 +1,25 @@
+const m = require('mithril');
+
+class Button {
+  view(vnode) {
+    return m('li', m('a', { href: vnode.attrs.href, oncreate: m.route.link }, [
+      m('span.glyphicon', { class: `glyphicon-${vnode.attrs.glyph}` }),
+      m.trust(` ${vnode.attrs.title}`),
+    ]));
+  }
+}
+
+export default class Sidebar {
+  view() {
+    return m('div.wrapper-sidebar.smooth', m('div.container-fluid', [
+      m('a[href=/]', { oncreate: m.route.link }, [
+        m('img.sidebar-logo[src="res/logo/main.svg"]'),
+      ]),
+      m('ul.nav.nav-pills.nav-stacked.nav-sidebar', [
+        m(Button, { href: '/users', glyph: 'list-alt', title: 'Users' }),
+        m(Button, { href: '/events', glyph: 'calendar', title: 'Events' }),
+        m(Button, { href: '/groups', glyph: 'blackboard', title: 'Groups' }),
+      ]),
+    ]));
+  }
+}