diff --git a/client/src/api.js b/client/src/api.js
new file mode 100644
index 0000000..583b783
--- /dev/null
+++ b/client/src/api.js
@@ -0,0 +1,51 @@
+import axios from 'axios'
+import { Toast } from 'quasar'
+import router from './router'
+
+const API_URL = 'http://localhost:8081'
+
+export default {
+	user: {
+		authed: false
+	},
+
+	login (context, user, pass, redirect) {
+		axios.post(API_URL + '/login',
+			{
+				user: user,
+				pass: pass
+			}
+		)
+		.then(response => {
+			localStorage.setItem('token', response.data)
+
+			this.user.authed = true
+
+			if (redirect) {
+				router.push(redirect)
+			}
+			else {
+				router.push('/lists')
+			}
+		})
+		.catch(e => {
+			var msg
+
+			if (e.response.data) {
+				msg = 'Login failed:' + e.response.data
+			}
+			else {
+				msg = 'network error'
+			}
+
+			Toast.create.negative(msg)
+		})
+	},
+
+	logout () {
+		localStorage.removeItem('token')
+		this.user.authed = false
+
+		router.push('/')
+	}
+}
diff --git a/client/src/components/List-overview.vue b/client/src/components/List-overview.vue
index 4af3db2..ebe07b7 100644
--- a/client/src/components/List-overview.vue
+++ b/client/src/components/List-overview.vue
@@ -23,9 +23,11 @@
 			</div>
 
 			<div class="list no-border platform-delimiter">
-				<q-drawer-link to="/">
-					Logout
-				</q-drawer-link>
+				<div class="item item-link" @click="logout">
+					<div class="item-content">
+						Logout
+					</div>
+				</div>
 			</div>
 
 		</q-drawer>
@@ -37,6 +39,15 @@
 </template>
 
 <script>
+import api from '../api'
+
+export default {
+	methods: {
+		logout () {
+			api.logout()
+		}
+	}
+}
 </script>
 
 <style lang="stylus">
diff --git a/client/src/components/index/login.vue b/client/src/components/index/login.vue
index 026db81..3769acd 100644
--- a/client/src/components/index/login.vue
+++ b/client/src/components/index/login.vue
@@ -9,19 +9,19 @@
 				<i class="item-primary">account_circle</i>
 				<div class="item-content">
 					<div class="floating-label">
-						<input required class="full-width">
+						<input required class="full-width" v-model="user">
 						<label>Username</label>
 					</div>
 				</div>
 				<div class="item-content">
 					<div class="floating-label">
-						<input required class="full-width" type="password">
+						<input required class="full-width" type="password" v-model="pass">
 						<label>Password</label>
 					</div>
 				</div>
 				<div class="item-content">
 					<div class="floating-label">
-						<button class="primary">
+						<button class="primary" @click="doLogin()">
 							<i class="on-left">check_circle</i> Login
 						</button>
 					</div>
@@ -29,12 +29,27 @@
 			</div>
 		</div>
 
-
 	</div>
-</div>
 </template>
 
 <script>
+import api from '../../api'
+
+export default {
+	data () {
+		return {
+			user: '',
+			pass: '',
+			error: null
+		}
+	},
+
+	methods: {
+		doLogin: function () {
+			api.login(this, this.user, this.pass)
+		}
+	}
+}
 </script>
 
 <style lang="stylus">