diff --git a/web/src/components/SignupForm.vue b/web/src/components/SignupForm.vue
new file mode 100644
index 0000000..ec17ca9
--- /dev/null
+++ b/web/src/components/SignupForm.vue
@@ -0,0 +1,73 @@
+<template>
+    <div>
+        <b-form @submit.prevent="handleSubmit">
+            <b-form-group
+                    id="email-group"
+                    label="Email address:"
+                    label-for="email"
+                    description="We'll never share your email with anyone else."
+            >
+                <b-form-input
+                        id="email"
+                        v-model="form.email"
+                        type="email"
+                        required
+                        placeholder="Enter email"
+                ></b-form-input>
+            </b-form-group>
+
+            <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"
+                ></b-form-input>
+            </b-form-group>
+
+            <b-form-group id="password-confirm-group" label="Confirm password:" label-for="password-confirm">
+                <b-form-input
+                        id="password-confirm"
+                        v-model="form.passwordConfirm"
+                        required
+                        placeholder="Confirm your password"
+                ></b-form-input>
+            </b-form-group>
+
+            <b-button type="submit" variant="primary">Submit</b-button>
+        </b-form>
+        <b-card class="mt-3" header="Form Data Result">
+            <pre class="m-0">{{ form }}</pre>
+        </b-card>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "SignupForm",
+        data() {
+            return {
+                form: {
+                    username: '',
+                    email: '',
+                    password: '',
+                    passwordConfirm: ''
+                }
+            }
+        },
+        methods: {
+            handleSubmit(){
+                
+            }
+        }
+    }
+</script>