diff --git a/src/components/VNav.vue b/src/components/VNav.vue
index b5a123f..7480f25 100644
--- a/src/components/VNav.vue
+++ b/src/components/VNav.vue
@@ -87,10 +87,10 @@
         <div
           class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"
         >
-          <a
-            href="#"
+          <router-link
+            :to="{ name: 'Login' }"
             class="text-white bg-blue-600 hover:bg-blue-800 px-3 py-2 rounded-md text-sm font-medium"
-            >Logout</a
+            >Logout</router-link
           >
         </div>
       </div>
@@ -124,11 +124,12 @@
 <script lang="ts">
 //stolen from https://git.max-site.de/Eulinchen/eulinchen-frontend/src/branch/master/src/components/VNav.vue
 
-import { ref, reactive } from "vue";
+import { ref, reactive, computed } from "vue";
+import { useRoute } from "vue-router";
 
 export default {
   name: "VNav",
-  data() {
+  setup() {
     const title = "radiator";
     const open = ref(false);
     const items = reactive([
@@ -141,12 +142,11 @@ export default {
         to: "Settings",
       },
     ]);
-    return { title, open, items };
-  },
-  computed: {
-    activeRoute(): string {
-      return this.$route.name;
-    }
+    const route = useRoute();
+    console.log(route);
+    const activeRoute = computed(() => route.name);
+
+    return { title, open, items, activeRoute };
   },
 };
 </script>
diff --git a/src/router/index.ts b/src/router/index.ts
index 2c879fe..e15d33a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,8 @@
 import { createWebHistory, createRouter } from "vue-router";
 import Home from "../views/Home.vue";
-import About from "../views/Settings.vue";
+const Settings = () => import("../views/Settings.vue");
+const Login = () => import("../views/Login.vue");
+import { isLoggedIn } from "../api";
 
 const routes = [
   {
@@ -11,7 +13,12 @@ const routes = [
   {
     path: "/settings",
     name: "Settings",
-    component: About,
+    component: Settings,
+  },
+  {
+    path: "/login",
+    name: "Login",
+    component: Login,
   },
 ];
 
@@ -20,4 +27,12 @@ const router = createRouter({
   routes,
 });
 
+router.beforeEach(async (to) => {
+  if (to.name !== "Login") {
+    const canAccess = await isLoggedIn();
+    if (!canAccess) return "/login";
+  }
+  return true;
+});
+
 export default router;
diff --git a/src/views/Login.vue b/src/views/Login.vue
new file mode 100644
index 0000000..7ea86c5
--- /dev/null
+++ b/src/views/Login.vue
@@ -0,0 +1,76 @@
+<template xmlns="http://www.w3.org/1999/html">
+  <div
+    class="container mx-auto h-full flex justify-center items-center dark:text-white"
+  >
+    <div class="sm:w-3/4 md:w-1/3 w-full">
+      <h1 class="font-hairline mb-6 text-center">Login</h1>
+      <div
+        class="border-yellow-300 p-8 border-t-8 bg-white mb-6 rounded-lg shadow-lg"
+      >
+        <div class="mb-4">
+          <label class="font-bold text-gray-800 block mb-2"
+            >Username or Email
+            <input
+              type="text"
+              class="text-black block appearance-none w-full bg-white border border-gray-300 hover:border-gray-700 px-2 py-2 rounded shadow"
+              v-model.trim="user"
+              placeholder="Username"
+            />
+          </label>
+        </div>
+        <div class="mb-4">
+          <label class="font-bold text-gray-800 block mb-2"
+            >Password
+            <input
+              type="password"
+              class="text-black block appearance-none w-full bg-white border border-gray-300 hover:border-gray-700 px-2 py-2 rounded shadow"
+              v-model.trim="password"
+              placeholder="Password"
+            />
+          </label>
+        </div>
+
+        <div class="flex items-center justify-between">
+          <button
+            class="bg-green-600 hover:bg-green-400 text-white font-bold py-2 px-4 rounded"
+            @click="login"
+          >
+            Login
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from "vue";
+import { login as apiLogin } from "../api";
+import router from "../router";
+
+export default {
+  name: "Login",
+  setup() {
+    const user = ref("");
+    const password = ref("");
+    async function login() {
+      try {
+        let loginResp = await apiLogin(user.value, password.value);
+        if (loginResp) {
+          router.push({ name: "Home" });
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    }
+
+    return {
+      user,
+      password,
+      login,
+    };
+  },
+};
+</script>
+
+<style scoped></style>