diff --git a/src/App.vue b/src/App.vue
index 136aa0306..a94b015f3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,96 @@
 <template>
-	<div id="app">
-		<router-view/>
+	<div id="app" class="container">
+		<div class="column is-centered" v-if="user.authenticated">
+			<button v-on:click="logout()" class="button is-right">Logout</button>
+		</div>
+		<div class="column is-centered">
+			<div class="box" v-if="user.authenticated">
+				<div class="container">
+					<div class="columns">
+						<div class="column is-3">
+							<aside class="menu">
+								<template v-for="n in namespaces">
+									<p v-bind:key="n.id" class="menu-label">
+										{{n.name}}
+									</p>
+									<ul v-bind:key="n.lists" class="menu-list">
+										<template v-for="l in n.lists">
+											<li v-bind:key="l.id"><a>{{l.title}}</a></li>
+										</template>
+									</ul>
+								</template>
+							</aside>
+						</div>
+						<div class="column is-9">
+							<router-view/>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div v-else>
+				<router-view/>
+			</div>
+		</div>
 	</div>
 </template>
 
 <script>
+    import auth from './auth'
+    import {HTTP} from './http-common'
+
     export default {
-        name: 'app'
+        name: 'app',
+
+        data() {
+            return {
+                user: auth.user,
+                loading: false,
+                namespaces: [],
+            }
+        },
+        created() {
+            this.loadNamespaces()
+        },
+        methods: {
+            logout() {
+                auth.logout()
+            },
+            loadNamespaces() {
+                this.loading = true
+                this.namespaces = []
+                HTTP.get(`namespaces`, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
+                    .then(response => {
+
+                        let namespaces = response.data
+
+                        // Get the lists
+                        for (const n in namespaces) {
+
+                            this.namespaces[n] = namespaces[n]
+
+                            HTTP.get(`namespaces/` + namespaces[n].id + `/lists`, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
+                                .then(response => {
+                                    this.namespaces[n].lists = response.data
+                                })
+                                .catch(e => {
+                                    this.loading = false
+                                    // eslint-disable-next-line
+                                    console.log(e)
+                                })
+                        }
+
+                        // eslint-disable-next-line
+                        console.log(this.namespaces)
+
+                        this.loading = false
+                    })
+                    .catch(e => {
+                        this.loading = false
+                        // eslint-disable-next-line
+                        console.log(e)
+                    })
+            },
+        },
     }
 </script>