diff --git a/pages/login.vue b/pages/login.vue
index 97eefd1..70994fe 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -2,11 +2,35 @@
 definePageMeta({
     layout: 'login'
 })
+
+const login = () => {
+    console.log('login')
+    navigateTo('/')
+}
 </script>
 
 <template>
-    <div>
-        <h1>Login</h1>
+    <div class="p-6">
+        <div class="flex flex-col gap-4 m-6 bg-slate-300 rounded-2xl p-6 shadow-md text-sm">
+            <h1 class="text-center font-bold text-lg">Kirjaudu</h1>
+            <form @submit.prevent="login" class="">
+                <label>Käyttäjätunnus
+                    <input class="textfield" type="text" id="username" placeholder="Käyttäjätunnus" />
+                </label>
+                <label>Salasana
+                    <input class="textfield" type="password" id="password" placeholder="Salasana" />
+                </label>
+                <button type="submit" class="btn-primary">Kirjaudu</button>
+            </form>
+        </div>
     </div>
 </template>
-    
\ No newline at end of file
+
+<style>
+    .textfield {
+        border: none;
+        border-bottom: 1px solid #ccc;
+        max-width: 80%;
+        padding: 6px;
+    }
+</style>