diff --git a/src/lib/Sidebar.svelte b/src/lib/Sidebar.svelte
index 4ee4580..9aadb96 100644
--- a/src/lib/Sidebar.svelte
+++ b/src/lib/Sidebar.svelte
@@ -1,7 +1,32 @@
 <script>
 	import UserStore from '$lib/UserStore';
+	import { onDestroy, onMount } from 'svelte';
+	import * as localForage from 'localforage';
+	import Apiclient from './Apiclient';
 
-	$: logged_in = $UserStore.isLoggedIn;
+	$: logged_in = false;
+
+	UserStore.init();
+	onMount(() => {
+		localForage.getItem('userdata', (err, value) => {
+			if (value) {
+				if (value.token) {
+					UserStore.login(value);
+				}
+			}
+		});
+	});
+
+	const unsubscribe = UserStore.subscribe((value) => {
+		logged_in = value.isLoggedIn;
+	});
+
+	onDestroy(unsubscribe);
+
+	async function logout() {
+		await Apiclient.logout().catch((e)=>{});
+		UserStore.logout();
+	}
 </script>
 
 <div
@@ -96,9 +121,9 @@
 
 					<span class="mx-4 font-medium">Settings</span>
 				</a> -->
-				<a
+				<button
 					class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700"
-					href="#"
+					on:click={logout}
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -116,7 +141,7 @@
 					</svg>
 
 					<span class="mx-4 font-medium">Logout</span>
-				</a>
+				</button>
 			{:else}
 				<a
 					class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700"