diff --git a/web/src/components/SigninForm.vue b/web/src/components/SigninForm.vue
new file mode 100644
index 0000000..395591d
--- /dev/null
+++ b/web/src/components/SigninForm.vue
@@ -0,0 +1,73 @@
+<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'
+
+    export default {
+        name: "SignupForm",
+        data() {
+            return {
+                form: {
+                    username: '',
+                    password: '',
+                },
+                error: false,
+                invalid: false,
+            }
+        },
+        methods: {
+            signin() {
+                this.error = false
+                this.invalid = false
+
+                Api.post('/signin', {
+                    username: this.form.username,
+                    password: this.form.password
+                })
+                    .then(response => console.log(response.data))
+                    .catch(error => {
+                        if (error.response && error.response.status === 401)
+                            this.invalid = true
+                        else
+                            this.error = true
+                    })
+            }
+        }
+    }
+</script>
diff --git a/web/src/views/Signin.vue b/web/src/views/Signin.vue
index 87b221d..a50e00d 100644
--- a/web/src/views/Signin.vue
+++ b/web/src/views/Signin.vue
@@ -2,17 +2,20 @@
     <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
+            Navbar,
+            SigninForm
         }
     }
 </script>
\ No newline at end of file