diff --git a/resources/assets/vue/components/accounts/forms/CrossLoginFormComponent.vue b/resources/assets/vue/components/accounts/forms/CrossLoginFormComponent.vue
new file mode 100644
index 00000000..70fd4844
--- /dev/null
+++ b/resources/assets/vue/components/accounts/forms/CrossLoginFormComponent.vue
@@ -0,0 +1,65 @@
+<template>
+    <div class="row" @keyup.enter="submitForm">
+        <div class="col">
+            <error-message-component class="m-b-20" :error="error"></error-message-component>
+            <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.trim="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">
+                            <p class="muted fs-11 font-arial m-b-0 pointer" @click="$store.dispatch('toggleSection', {name: 'forgetPassword', status: true})">Forgot password?</p>
+                        </div>
+                        <div class="col text-right">
+                            <div class="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>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import loginFormValidation from '../../../general/mixins/accounts/validation/loginFormValidation'
+    export default {
+        props: {
+            cross: {
+                type: Boolean,
+                default: false
+            },
+            section:{
+                type: String,
+                required: true
+            }
+        },
+        data() {
+            return {
+                error: '',
+                parameters: {
+                    email: this.email,
+                    password: ''
+                }
+            };
+        },
+        methods: {
+            submitForm(){
+                this.submit(this.route('api.account.authentication.authenticate.attempt'), 'post', this.section, false, false)
+            },
+            successHandler(response){
+                window.parent.postMessage({"data": response}, 'http://shipping-portal.test');
+            },
+        },
+        mixins: [loginFormValidation]
+    }
+
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/general/mixins/guards.js b/resources/assets/vue/general/mixins/guards.js
index 18681e5d..6c840157 100644
--- a/resources/assets/vue/general/mixins/guards.js
+++ b/resources/assets/vue/general/mixins/guards.js
@@ -5,7 +5,7 @@ export default {
             (this.$store.getters.isAuthenticated && !this.isProtectedRoute()&& this.isWithTokenRoute()) ? window.location.href = this.route('dashboard') : '';
         },
         isProtectedRoute(){
-            const unprotectedRoutes = [this.route('login'), this.route('account.email.verification')];
+            const unprotectedRoutes = [this.route('login'), this.route('cross_login'), this.route('account.email.verification')];
             return !unprotectedRoutes.includes(window.location.href);
         },
         isWithTokenRoute(){
diff --git a/resources/views/pages/accounts/cross_iframe_login.blade.php b/resources/views/pages/accounts/cross_iframe_login.blade.php
new file mode 100644
index 00000000..7c6b3e47
--- /dev/null
+++ b/resources/views/pages/accounts/cross_iframe_login.blade.php
@@ -0,0 +1,34 @@
+@extends('layouts.base_login')
+
+@section('inner_content')
+    <transition-component group enter-class="animate__animated animate__fadeInRightBig animate__faster" leave-class="animate__animated animate__fadeOutRightBig">
+        <div class="row" key="1">
+            <div class="col-12 col-md no-padding" v-show="!$store.getters.isShowing('registrationForm')">
+                <div class="padding-50 bg-white h-100">
+                    <div class="row" v-show="!$store.getters.isShowing('forgetPassword')">
+                        <div class="col">
+                            <loading-component style="height: 350px;" key="1" color="primary" v-show="$store.getters.isLoading('crossLoginSection')"></loading-component>
+                            <div class="row" v-show="!$store.getters.isLoading('crossLoginSection')">
+                                <div class="col">
+                                    <div class="row m-b-15">
+                                        <div class="col">
+                                            <div class="inline v-align-middle">
+                                                <div class="font-heading fs-20 all-caps text-primary no-margin lh-28 bold">Welcome Back</div>
+                                                <p class="no-margin fs-11 muted light">To get connected with us please login with your personal info</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col">
+                                            <cross-login-form-component :cross="true" section="crossLoginSection"></cross-login-form-component>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </transition-component>
+@endsection
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index 24507191..2c0df37e 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -69,6 +69,9 @@ Route::get('/mail', function () {
     echo route('login');
 });
 
+Route::get('/cross-login', function () {
+    return view('pages.accounts.cross_iframe_login');
+})->name('cross_login');
 
 
 Route::get('/export/customers/f614e339d7058904a831aad742e24d55', 'Exports\ExportCustomersToExcelController@export');