diff --git a/resources/assets/vue/components/accounts/elements/LoginFormComponent.vue b/resources/assets/vue/components/accounts/elements/LoginFormComponent.vue
new file mode 100644
index 00000000..db5b7111
--- /dev/null
+++ b/resources/assets/vue/components/accounts/elements/LoginFormComponent.vue
@@ -0,0 +1,78 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <div class="row m-b-20 animate__animated animate__fadeInUpBig animate__fast" v-if="error">
+                <div class="col">
+                    <small class="bold fs-10 text-danger">{{error}}</small>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <validation-wrapper-component class="m-b-15" :validator="$v.parameters.email">
+                        <label class="text-primary">Email Address</label>
+                        <div class="controls">
+                            <input type="text" class="form-control fs-12" v-model="parameters.email">
+                        </div>
+                    </validation-wrapper-component>
+                    <validation-wrapper-component :validator="$v.parameters.password">
+                        <label class="text-primary">Password</label>
+                        <div class="controls">
+                            <input type="password" class="form-control fs-12" v-model="parameters.password">
+                        </div>
+                    </validation-wrapper-component>
+                    <div class="row m-t-15 align-items-center justify-content-center">
+                        <div class="col-auto">
+                            <div class="font-heading fs-12" style="line-height: 0px;">
+                                <input type="checkbox" v-model="parameters.remember">
+                                <label class="text-primary">Remember</label>
+                            </div>
+                        </div>
+                        <div class="col text-right">
+                            <p class="muted fs-11 font-arial m-b-0 pointer" @click="$store.dispatch('toggleSection', {name: 'forgetPassword', status: true})">Forgot password?</p>
+                        </div>
+                    </div>
+                    <div class="row m-t-15">
+                        <div class="col text-center">
+                            <div class="col btn btn-sm p-l-30 p-r-30 btn-primary bold v-align-middle b-rad-none all-caps" @click="submitForm">Sign In</div>
+                        </div>
+                    </div>
+                    <div class="row m-t-15">
+                        <div class="col text-center">
+                            <div class="col">
+                                <p>New Customer? <strong class=" m-b-0 pointer" @click="$store.dispatch('toggleSection', {name: 'registrationSection', status: true})">Create Account</strong></p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import loginFormValidation from '../../../general/mixins/accounts/validation/loginFormValidation'
+    export default {
+        props: {
+            section:{
+                type: String,
+                required: true
+            }
+        },
+        data() {
+            return {
+                error: '',
+                parameters: {
+                    email: this.email,
+                    password: '',
+                    remember:''
+                }
+            };
+        },
+        methods: {
+          submitForm(){
+              this.submit(this.route('api.account.authentication.authenticate.attempt'), 'post', this.section, false, false)
+          }
+        },
+        mixins: [loginFormValidation]
+    }
+
+</script>
\ No newline at end of file