diff --git a/package.json b/package.json
index 0dd1aea..ba90bfd 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "@smui/switch": "^7.0.0",
     "@smui/textfield": "^7.0.0",
     "@smui/tooltip": "^7.0.0",
+    "@smui/top-app-bar": "^7.0.0",
     "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "@tsconfig/svelte": "^5.0.4",
     "date-fns": "^3.6.0",
diff --git a/src/App.svelte b/src/App.svelte
index ee39b4e..a1350b2 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import {Router, Route, useLocation} from "svelte-routing";
+	import {Router, Route, useLocation, navigate} from "svelte-routing";
+	import TopAppBar, { Row, Section, Title } from '@smui/top-app-bar';
 	import Drawer from "./Drawer.svelte";
 	import {AppContent} from "@smui/drawer";
 	import isMobile from "is-mobile";
@@ -29,117 +30,137 @@
 	import ProtonSettings from "./ProtonSettings.svelte";
 	import ErrorPage from "./ErrorPage.svelte";
 	import Home from "./Home.svelte";
+	import IconButton from "@smui/icon-button";
+	import {baseurl} from "./constants";
+	import {drawerOpen, svelteLoc} from "./stores";
 
 	const mobile = isMobile();
 	let open = !mobile;
-
-	let pathname = window.location.pathname;
-	const location = useLocation();
-
-	$: () => {
-		console.log($location);
-		if ($location === undefined) return;
-		pathname = $location.pathname;
-	}
 </script>
 
-<div class="drawer-container">
-	<Router>
-		<Drawer open={open} statusCallback={(o) => open = o} />
-		<AppContent class="app-content">
-			<main class="main-content">
-				{#if isMobile() && !(pathname === "/login" || pathname === "/register")}
-					<Button on:click={() => open = !open}>
-						<Icon class="material-icons">menu_open</Icon>
-						{#if open}
-							<Label>Zapri navigacijo</Label>
-						{:else}
-							<Label>Odpri navigacijo</Label>
-						{/if}
-					</Button>
-				{/if}
-				<div>
-					<Route path="/samotestiranje">
-						<Samotestiranje />
-					</Route>
-					<Route path="/login">
-						<Login />
-					</Route>
-					<Route path="/register">
-						<Register />
-					</Route>
-					<Route path="/users">
-						<Users />
-					</Route>
-					<Route path="/new/meeting">
-						<NewMeeting />
-					</Route>
-					<!--<Route path="/my/grades" component="{MyGrades}" />-->
-					<Route path="/my/class">
-						<MyClass />
-					</Route>
-					<Route path="/communication/:id" let:params >
-						<Communication id="{params.id}" />
-					</Route>
-					<Route path="/user/:id" let:params >
-						<User id="{params.id}" />
-					</Route>
-					<Route path="/class/user/:id" let:params >
-						<ClassUser studentId="{params.id}" />
-					</Route>
-					<Route path="/edit/:id" let:params >
-						<NewMeeting editId="{params.id}" />
-					</Route>
-					<Route path="/meeting/:id/grading" let:params >
-						<SubjectGrades meetingId="{params.id}" />
-					</Route>
-					<Route path="/meeting/:id/absence" let:params >
-						<AbsenceManagement meetingId="{params.id}" />
-					</Route>
-					<Route path="/meeting/:id/homework" let:params >
-						<Homework meetingId="{params.id}" />
-					</Route>
-					<Route path="/meeting/:id" let:params >
-						<Meeting meetingId="{params.id}" />
-					</Route>
-					<Route path="/class/:id" let:params >
-						<Class id="{params.id}" />
-					</Route>
-					<Route path="/subject/:id" let:params >
-						<Subject id="{params.id}" />
-					</Route>
-					<Route path="/subjects">
-						<Subjects />
-					</Route>
-					<Route path="/meals">
-						<Meals />
-					</Route>
-					<Route path="/classes">
-						<Classes />
-					</Route>
-					<Route path="/settings">
-						<Settings />
-					</Route>
-					<Route path="/notifications">
-						<Notifications />
-					</Route>
-					<Route path="/documents">
-						<Documents />
-					</Route>
-					<Route path="/settings/user">
-						<UserSettings />
-					</Route>
-					<Route path="/proton/settings">
-						<ProtonSettings />
-					</Route>
-					<Route path="/napaka">
-						<ErrorPage />
-					</Route>
-					<Route path="/">
-						<Home />
-					</Route>
-				</div>
-			</main>
-		</AppContent>
-	</Router>
-</div>
+<Router>
+	<div class="flexy">
+		{#if $svelteLoc !== "/login" && $svelteLoc !== "/register"}
+			<div class="top-app-bar-container flexor">
+				<TopAppBar variant="static" style="background-color: #6082B6;">
+					<Row>
+						<Section style="display: flex; flex-direction: row; align-items: center;">
+							<IconButton style="margin: 0 0 0 0.5em;" class="material-icons" on:click={() => drawerOpen.update((open) => !open)}>{#if $drawerOpen}close{:else}menu{/if}</IconButton>
+							<Title>MeetPlan</Title>
+						</Section>
+						<Section align="end" toolbar>
+							<IconButton style="margin: 0;" class="material-icons" aria-hidden="true" on:click={() => navigate("/settings/user")}>settings</IconButton>
+							<IconButton style="margin: 0;" class="material-icons" aria-hidden="true" on:click={async () => {
+								localStorage.clear();
+								// TODO
+								await fetch(`${baseurl}/account/logout`, {method: "POST", credentials: "include"});
+								navigate("/login");
+							}}>
+								<div style="margin: 0 0 0 0.1em;">logout</div>
+							</IconButton>
+						</Section>
+					</Row>
+				</TopAppBar>
+			</div>
+		{/if}
+
+		<div class="drawer-container" id="router" style="width: 100vw; flex-grow: 1; height: 100%; overflow: auto !important;">
+			<Drawer />
+			<AppContent class="app-content">
+				<main class="main-content">
+					{#if isMobile() && !($svelteLoc === "/login" || $svelteLoc === "/register")}
+						<Button on:click={() => open = !open}>
+							<Icon class="material-icons">menu_open</Icon>
+							{#if open}
+								<Label>Zapri navigacijo</Label>
+							{:else}
+								<Label>Odpri navigacijo</Label>
+							{/if}
+						</Button>
+					{/if}
+					<div>
+						<Route path="/samotestiranje">
+							<Samotestiranje />
+						</Route>
+						<Route path="/login">
+							<Login />
+						</Route>
+						<Route path="/register">
+							<Register />
+						</Route>
+						<Route path="/users">
+							<Users />
+						</Route>
+						<Route path="/new/meeting">
+							<NewMeeting />
+						</Route>
+						<!--<Route path="/my/grades" component="{MyGrades}" />-->
+						<Route path="/my/class">
+							<MyClass />
+						</Route>
+						<Route path="/communication/:id" let:params >
+							<Communication id="{params.id}" />
+						</Route>
+						<Route path="/user/:id" let:params >
+							<User id="{params.id}" />
+						</Route>
+						<Route path="/class/user/:id" let:params >
+							<ClassUser studentId="{params.id}" />
+						</Route>
+						<Route path="/edit/:id" let:params >
+							<NewMeeting editId="{params.id}" />
+						</Route>
+						<Route path="/meeting/:id/grading" let:params >
+							<SubjectGrades meetingId="{params.id}" />
+						</Route>
+						<Route path="/meeting/:id/absence" let:params >
+							<AbsenceManagement meetingId="{params.id}" />
+						</Route>
+						<Route path="/meeting/:id/homework" let:params >
+							<Homework meetingId="{params.id}" />
+						</Route>
+						<Route path="/meeting/:id" let:params >
+							<Meeting meetingId="{params.id}" />
+						</Route>
+						<Route path="/class/:id" let:params >
+							<Class id="{params.id}" />
+						</Route>
+						<Route path="/subject/:id" let:params >
+							<Subject id="{params.id}" />
+						</Route>
+						<Route path="/subjects">
+							<Subjects />
+						</Route>
+						<Route path="/meals">
+							<Meals />
+						</Route>
+						<Route path="/classes">
+							<Classes />
+						</Route>
+						<Route path="/settings">
+							<Settings />
+						</Route>
+						<Route path="/notifications">
+							<Notifications />
+						</Route>
+						<Route path="/documents">
+							<Documents />
+						</Route>
+						<Route path="/settings/user">
+							<UserSettings />
+						</Route>
+						<Route path="/proton/settings">
+							<ProtonSettings />
+						</Route>
+						<Route path="/napaka">
+							<ErrorPage />
+						</Route>
+						<Route path="/">
+							<Home />
+						</Route>
+					</div>
+				</main>
+			</AppContent>
+		</div>
+	</div>
+</Router>
diff --git a/src/Classes.svelte b/src/Classes.svelte
index d4706d7..7cbe736 100644
--- a/src/Classes.svelte
+++ b/src/Classes.svelte
@@ -22,13 +22,13 @@
     async function getClasses() {
         let response = await fetch(`${baseurl}/classes/get`, {credentials: "include"});
         let r = await response.json();
-        items = r["data"];
+        items = r.data;
     }
 
     async function getTeachers() {
         let response = await fetch(`${baseurl}/teachers/get`, {credentials: "include"});
-        let r = response.json();
-        teachers = r["data"];
+        let r = await response.json();
+        teachers = r.data;
     }
 
     getClasses();
diff --git a/src/Drawer.svelte b/src/Drawer.svelte
index a1672ce..6c10e13 100644
--- a/src/Drawer.svelte
+++ b/src/Drawer.svelte
@@ -22,6 +22,7 @@
 
     import {useLocation} from "svelte-routing";
     import Checkbox from "@smui/checkbox";
+    import {drawerOpen, svelteLoc} from "./stores";
 
     const location = useLocation();
 
@@ -32,19 +33,18 @@
     let communicationUnread = {};
     let unreadMessages;
 
-    let allPaths = {};
+    let allPaths: Record<string, string> = {};
 
     let lastUrl = "";
-    let showDrawer = false;
     let hasRequested = false;
 
     $: (async () => {
-        statusCallback(open);
-        if (!($location.pathname === "/login" || $location.pathname === "/register")) {
-            showDrawer = true;
+        const path = $location.pathname;
 
-            let path = $location.pathname;
+        console.log(path);
+        svelteLoc.set(path);
 
+        if (path !== "/login" && path !== "/register") {
             if (path === lastUrl) {
                 return
             }
@@ -77,7 +77,7 @@
                     communicationActive = pathSplit[2];
                 }
             } else {
-                console.log("resetting", $location.pathname)
+                console.log("resetting", path)
                 meetingActive = undefined
                 communicationActive = undefined
             }
@@ -105,7 +105,7 @@
             return
         }
 
-        showDrawer = false;
+        drawerOpen.set(false);
         hasRequested = false;
 
         // Set a fake timeout to get the highest timeout id
@@ -160,8 +160,6 @@
     let user = 0;
 
     const mobile = isMobile();
-    export let open: boolean = !mobile;
-    export let statusCallback;
 
     async function fetchData() {
         if (hasRequested) {
@@ -237,7 +235,8 @@
     </DialogTitle>
     <DialogContent id="simple-content">
         <p/>
-        <Select bind:value={user} variant="outlined" style="width: 100%;" label="Izberite učenca">
+        <Select bind:value={user} variant="outlined" style="width: 100%; overflow: visible;"
+                label="Izberite učenca">
             <Option value="" on:click={() => user = -1}/>
             {#each users as c}
                 <Option on:click={async () => {
@@ -281,7 +280,6 @@
         aria-labelledby="simple-title"
         aria-describedby="list-content"
 >
-    <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
     <Title id="simple-title">
         <FormField>
             <Textfield
@@ -375,19 +373,8 @@
     </Actions>
 </Dialog>
 
-{#if showDrawer}
-    <Drawer variant={mobile ? "modal" : "dismissible"} fixed={false} style="position: absolute; top: 0;" bind:open>
-        <Header class="sameline">
-            <Title style="display:inline-block;">MeetPlan</Title>
-            <div style="display:inline-block; float:right;">
-                <IconButton class="material-icons" aria-hidden="true" on:click={() => navigate("/settings/user")}>settings</IconButton>
-                <IconButton class="material-icons" aria-hidden="true" on:click={() => {
-                    document.cookie.split(";").forEach(function(c) { document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/"); });
-                    localStorage.clear()
-                    navigate("/login")
-                }}>logout</IconButton>
-            </div>
-        </Header>
+{#if $drawerOpen}
+    <Drawer variant={mobile ? "modal" : "dismissible"} fixed={false} style="position: absolute; top: 0;" bind:open={$drawerOpen}>
         <Content>
             <List>
                 <Item
diff --git a/src/Home.svelte b/src/Home.svelte
index be4f65f..9346714 100644
--- a/src/Home.svelte
+++ b/src/Home.svelte
@@ -53,8 +53,7 @@
         Za čim boljšo uporabniško izkušnjo, razvijalci MeetPlan sistema priporočajo uporabo računalnikov (namiznih ali prenosnih).
     </div>
 {/if}
-<h1>Pozdravljeni v MeetPlan sistemu</h1>
-<b>Vaša dovoljenja: {localStorage.getItem("role")}</b>
+Vaša dovoljenja: <b>{localStorage.getItem("role")}</b>
 <hr />
 <Select bind:classId variant="outlined">
     <Option value="" on:click={() => {
diff --git a/src/Login.svelte b/src/Login.svelte
index 02b3dd3..a284726 100644
--- a/src/Login.svelte
+++ b/src/Login.svelte
@@ -10,6 +10,8 @@
 
     import Snackbar, {Actions} from "@smui/snackbar";
     import * as constants from "./constants";
+    import {drawerOpen} from "./stores";
+    import isMobile from "is-mobile";
 
     async function login() {
         let fd = new FormData();
@@ -22,6 +24,7 @@
                 localStorage.setItem("role", response["data"]["role"]);
                 localStorage.setItem("userId", response["data"]["user_id"]);
                 localStorage.setItem("email", response["data"]["email"]);
+                drawerOpen.set(!isMobile());
                 navigate("/")
             } else {
                 snackbarWithClose.open();
diff --git a/src/Meals.svelte b/src/Meals.svelte
index b04db8e..1cbb96a 100644
--- a/src/Meals.svelte
+++ b/src/Meals.svelte
@@ -16,8 +16,7 @@
     import Avatar from "svelte-avatar";
     import insane from "insane";
     import Error from "./Widgets/Error.svelte";
-    import List, {Item, Meta, PrimaryText} from "@smui/list";
-
+    import List, {Item, Meta, PrimaryText, Text as TextList} from "@smui/list";
 
     let meals = [];
     
diff --git a/src/Settings.svelte b/src/Settings.svelte
index 5e6e69d..8ddc1e7 100644
--- a/src/Settings.svelte
+++ b/src/Settings.svelte
@@ -28,7 +28,7 @@
     async function getConfiguration() {
         let response = await fetch(`${baseurl}/admin/config/get`, {credentials: "include"});
         let r = await response.json();
-        let config = json["data"];
+        let config = r.data;
         schoolName = config["school_name"];
         postNumber = config["school_post_code"];
         city = config["school_city"];
diff --git a/src/app.css b/src/app.css
index ccb7845..cc690b9 100644
--- a/src/app.css
+++ b/src/app.css
@@ -6,7 +6,6 @@ html, body {
 
 body {
     margin: 0;
-    padding: 8px;
     box-sizing: border-box;
     font-family: 'Open Sans';
 }
@@ -61,42 +60,44 @@ button:focus {
     border-color: #666;
 }
 
+.sameline {
+    white-space: nowrap;
+}
+
+.inline {
+    display: inline-block;
+}
+
 .drawer-container {
     position: relative;
-    display: flex;
-    height: 100%;
-    border: 1px solid
-    var(--mdc-theme-text-hint-on-background, rgba(0, 0, 0, 0.1));
     overflow: hidden;
-    z-index: 0;
 }
-
 .app-content {
     flex: auto;
     overflow: auto;
     position: relative;
     flex-grow: 1;
+    height: 100%;
+}
+.center {
+    text-align: center;
+}
+.flexy {
+    display: flex;
+    flex-flow: column;
+    height: 100vh;
+}
+.flexor {
+    display: inline-flex;
+    flex-direction: column;
+    width: 100%;
 }
-
 .main-content {
     overflow: auto;
     padding: 16px;
     height: 100%;
     box-sizing: border-box;
 }
-
-.sameline {
-    white-space: nowrap;
-}
-
-.inline {
-    display: inline-block;
-}
-
-.center {
-    display:flex;
-    justify-content:center;
-    align-items:center;
-    position: relative;
-    text-align: center;
+#simple-content {
+    overflow: visible;
 }
diff --git a/src/stores.js b/src/stores.js
new file mode 100644
index 0000000..fd6c32b
--- /dev/null
+++ b/src/stores.js
@@ -0,0 +1,5 @@
+import {writable} from "svelte/store";
+import isMobile from "is-mobile";
+
+export const svelteLoc = writable("/");
+export const drawerOpen = writable(!isMobile());