diff --git a/api/src/controllers/UserController.kt b/api/src/controllers/UserController.kt
index f8800f8..304181f 100644
--- a/api/src/controllers/UserController.kt
+++ b/api/src/controllers/UserController.kt
@@ -36,11 +36,11 @@ class UserController(kodein: Kodein) : KodeinController(kodein) {
                 .where { Users.username eq credential.username }
                 .map { row -> row[Users.email]!! to row[Users.password]!! }
                 .firstOrNull()
-                ?: return@post call.respond(HttpStatusCode.BadRequest, ApiError.InvalidCredentialError)
+                ?: return@post call.respond(HttpStatusCode.Unauthorized, ApiError.InvalidCredentialError)
 
 
             if (!BCrypt.checkpw(credential.password, password)) {
-                return@post call.respond(HttpStatusCode.BadRequest, ApiError.InvalidCredentialError)
+                return@post call.respond(HttpStatusCode.Unauthorized, ApiError.InvalidCredentialError)
             }
 
             return@post call.respond(Response(simpleJwt.sign(email)))
diff --git a/web/src/components/SigninForm.vue b/web/src/components/SigninForm.vue
new file mode 100644
index 0000000..61d9b96
--- /dev/null
+++ b/web/src/components/SigninForm.vue
@@ -0,0 +1,79 @@
+<template>
+    <div>
+        <b-card class="mt-3" header="Sign in">
+            <b-form @submit.prevent="signin">
+
+                <b-form-group id="username-group" label="Username:" label-for="username">
+                    <b-form-input
+                            id="username"
+                            v-model="form.username"
+                            required
+                            placeholder="Enter a username"
+                    ></b-form-input>
+                </b-form-group>
+
+                <b-form-group id="password-group" label="Password:" label-for="password">
+                    <b-form-input
+                            id="password"
+                            v-model="form.password"
+                            required
+                            placeholder="Enter a password"
+                            type="password"
+                    ></b-form-input>
+                </b-form-group>
+
+                <b-button type="submit" variant="primary">Submit</b-button>
+            </b-form>
+
+            <b-alert :show="invalid" variant="danger" dismissible class="mt-3">
+                Invalid credential
+            </b-alert>
+            <b-alert :show="error" variant="danger" dismissible class="mt-3">
+                An error occurred while signin in
+            </b-alert>
+
+        </b-card>
+    </div>
+</template>
+
+<script>
+    import Api from '@/api'
+    import {mapMutations} from "vuex";
+
+    export default {
+        name: "SignupForm",
+        data() {
+            return {
+                form: {
+                    username: '',
+                    password: '',
+                },
+                error: false,
+                invalid: false,
+            }
+        },
+        methods: {
+            ...mapMutations(['setToken']),
+
+            signin() {
+                this.error = false
+                this.invalid = false
+
+                Api.post('/signin', {
+                    username: this.form.username,
+                    password: this.form.password
+                })
+                    .then(response => {
+                        this.setToken({token: response.data.token})
+                    })
+                    .catch(error => {
+                        console.log(error)
+                        if (error.response && error.response.status === 401)
+                            this.invalid = true
+                        else
+                            this.error = true
+                    })
+            }
+        }
+    }
+</script>
diff --git a/web/src/router/index.js b/web/src/router/index.js
index 5f43ce0..52ee0c1 100644
--- a/web/src/router/index.js
+++ b/web/src/router/index.js
@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
 import Signup from '../views/Signup.vue'
+import Signin from '../views/Signin.vue'
 
 Vue.use(VueRouter)
 
@@ -15,6 +16,11 @@ const routes = [
         path: '/signup',
         name: 'Signup',
         component: Signup
+    },
+    {
+        path: '/signin',
+        name: 'Signin',
+        component: Signin
     }
 ]
 
diff --git a/web/src/store/index.js b/web/src/store/index.js
index 332b916..387862b 100644
--- a/web/src/store/index.js
+++ b/web/src/store/index.js
@@ -4,12 +4,13 @@ import Vuex from 'vuex'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-  state: {
-  },
-  mutations: {
-  },
-  actions: {
-  },
-  modules: {
-  }
+    state: {
+        token: ''
+    },
+    mutations: {
+        setToken: (state, {token}) => {
+            state.token = token;
+        }
+    },
+    actions: {}
 })
diff --git a/web/src/views/Signin.vue b/web/src/views/Signin.vue
new file mode 100644
index 0000000..a50e00d
--- /dev/null
+++ b/web/src/views/Signin.vue
@@ -0,0 +1,21 @@
+<template>
+    <div id="app">
+        <Navbar/>
+        <b-container class="mt-5">
+            <SigninForm/>
+        </b-container>
+    </div>
+</template>
+
+<script>
+    import Navbar from "@/components/Navbar";
+    import SigninForm from "@/components/SigninForm";
+
+    export default {
+        name: 'Home',
+        components: {
+            Navbar,
+            SigninForm
+        }
+    }
+</script>
\ No newline at end of file