diff --git a/web/src/components/Centered.vue b/web/src/components/Centered.vue
new file mode 100644
index 0000000..dd20d79
--- /dev/null
+++ b/web/src/components/Centered.vue
@@ -0,0 +1,13 @@
+<template>
+    <div class="row d-flex justify-content-center">
+        <div class="mt-3 col-md-6">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "Centered"
+    }
+</script>
diff --git a/web/src/components/SigninForm.vue b/web/src/components/SigninForm.vue
index 5a7e4f5..c4f58c7 100644
--- a/web/src/components/SigninForm.vue
+++ b/web/src/components/SigninForm.vue
@@ -1,6 +1,6 @@
 <template>
-    <div>
-        <b-card class="mt-3" header="Sign in">
+    <Centered>
+        <b-card header="Sign in">
             <b-form @submit.prevent="signin">
 
                 <b-form-group id="username-group" label="Username:" label-for="username">
@@ -33,15 +33,19 @@
             </b-alert>
 
         </b-card>
-    </div>
+    </Centered>
 </template>
 
 <script>
     import Api from '@/api'
     import {mapMutations} from "vuex";
+    import Centered from '@/components/Centered'
 
     export default {
         name: "SignupForm",
+        components: {
+            Centered
+        },
         data() {
             return {
                 form: {
diff --git a/web/src/components/SignupForm.vue b/web/src/components/SignupForm.vue
index f6dd1e2..43dbf5c 100644
--- a/web/src/components/SignupForm.vue
+++ b/web/src/components/SignupForm.vue
@@ -1,6 +1,6 @@
 <template>
-    <div>
-        <b-card class="mt-3" header="Create an account">
+    <Centered>
+        <b-card header="Create an account">
             <b-form @submit.prevent="handleSubmit">
                 <b-form-group
                         id="email-group"
@@ -44,7 +44,8 @@
                     </b-form-invalid-feedback>
                 </b-form-group>
 
-                <b-form-group id="password-confirm-group" label="Confirm password:" label-for="password-confirm">
+                <b-form-group id="password-confirm-group" label="Confirm password:"
+                              label-for="password-confirm">
                     <b-form-input
                             id="password-confirm"
                             v-model="form.passwordConfirm"
@@ -67,16 +68,20 @@
             <b-alert :show="error" variant="danger" dismissible class="mt-3">
                 An error occurred while attempting to create your account
             </b-alert>
-
         </b-card>
-    </div>
+    </Centered>
 </template>
 
 <script>
     import Api from '@/api'
+    import Centered from '@/components/Centered'
+
 
     export default {
         name: "SignupForm",
+        components: {
+            Centered
+        },
         data() {
             return {
                 form: {