diff --git a/resources/assets/images/cief-logo-white.png b/resources/assets/images/cief-logo-white.png
new file mode 100644
index 00000000..12dd6440
Binary files /dev/null and b/resources/assets/images/cief-logo-white.png differ
diff --git a/resources/assets/vue/components/accounts/forms/CompleteRegistrationFormComponent.vue b/resources/assets/vue/components/accounts/forms/CompleteRegistrationFormComponent.vue
new file mode 100644
index 00000000..1ea8a1b2
--- /dev/null
+++ b/resources/assets/vue/components/accounts/forms/CompleteRegistrationFormComponent.vue
@@ -0,0 +1,218 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <div class="row text-left" @keyup.enter="submitForm">
+                <div class="col">
+                    <error-message-component class="m-b-20" :error="error"></error-message-component>
+                    <div class="row">
+                        <div class="col">
+                            <div class="row" v-show="step === 1">
+                                <div class="col">
+                                    <div class="row m-b-15">
+                                        <div class="col">
+                                            <div class="row">
+                                                <div class="col">
+                                                    <p class="bold fs-11 all-caps muted">Select your account type</p>
+                                                </div>
+                                            </div>
+                                            <div class="row text-center fs-10">
+                                                <div class="col">
+                                                    <div class="row">
+                                                        <div class="col col-md-auto p-r-0">
+                                                            <div class="b-a b-grey bg-white p-t-20 p-b-20 p-l-45 p-r-45 pointer" :class="{ 'b-primary': parameters.type === 1, 'text-primary': parameters.type === 1, 'b-grey': parameters.type !== 1 }" @click="parameters.type = 1">
+                                                                <div class="m-b-15">
+                                                                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                                                                         width="45" height="45"
+                                                                         viewBox="0 0 172 172"
+                                                                         style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#000000"><path d="M16.59531,19.35l3.225,12.9h1.67969v116.1h2.15h73.1h2.15h8.23887c0.23218,0.03838 0.46909,0.03838 0.70127,0h29.39873c0.23218,0.03838 0.46909,0.03838 0.70127,0h16.85986v-30.1h-4.3v-60.2h1.67969l3.225,-12.9h-56.50469v-12.9h1.67969l3.225,-12.9zM22.10469,23.65h76.19063l-1.075,4.3h-2.62031c-1.18465,0 -2.15,0.96535 -2.15,2.15c0,1.18465 0.96535,2.15 2.15,2.15v111.8h-68.8v-111.8c1.18465,0 2.15,-0.96535 2.15,-2.15c0,-1.18465 -0.96535,-2.15 -2.15,-2.15h-2.62031zM34.4,27.95c-1.18465,0 -2.15,0.96535 -2.15,2.15c0,1.18465 0.96535,2.15 2.15,2.15c1.18465,0 2.15,-0.96535 2.15,-2.15c0,-1.18465 -0.96535,-2.15 -2.15,-2.15zM43,27.95c-1.18465,0 -2.15,0.96535 -2.15,2.15c0,1.18465 0.96535,2.15 2.15,2.15c1.18465,0 2.15,-0.96535 2.15,-2.15c0,-1.18465 -0.96535,-2.15 -2.15,-2.15zM51.6,27.95c-1.18465,0 -2.15,0.96535 -2.15,2.15c0,1.18465 0.96535,2.15 2.15,2.15c1.18465,0 2.15,-0.96535 2.15,-2.15c0,-1.18465 -0.96535,-2.15 -2.15,-2.15zM60.2,27.95c-1.18465,0 -2.15,0.96535 -2.15,2.15c0,1.18465 0.96535,2.15 2.15,2.15c1.18465,0 2.15,-0.96535 2.15,-2.15c0,-1.18465 -0.96535,-2.15 -2.15,-2.15zM68.8,27.95c-1.18465,0 -2.15,0.96535 -2.15,2.15c0,1.18465 0.96535,2.15 2.15,2.15c1.18465,0 2.15,-0.96535 2.15,-2.15c0,-1.18465 -0.96535,-2.15 -2.15,-2.15zM77.4,27.95c-1.18465,0 -2.15,0.96535 -2.15,2.15c0,1.18465 0.96535,2.15 2.15,2.15c1.18465,0 2.15,-0.96535 2.15,-2.15c0,-1.18465 -0.96535,-2.15 -2.15,-2.15zM86,27.95c-1.18465,0 -2.15,0.96535 -2.15,2.15c0,1.18465 0.96535,2.15 2.15,2.15c1.18465,0 2.15,-0.96535 2.15,-2.15c0,-1.18465 -0.96535,-2.15 -2.15,-2.15zM34.4,40.85v2.15v15.05h12.9v-17.2zM53.75,40.85v2.15v15.05h12.9v-17.2zM73.1,40.85v2.15v15.05h12.9v-17.2zM38.7,45.15h4.3v8.6h-4.3zM58.05,45.15h4.3v8.6h-4.3zM77.4,45.15h4.3v8.6h-4.3zM98.9,49.45h50.99531l-1.075,4.3h-2.62031c-1.18465,0 -2.15,0.96535 -2.15,2.15c0,1.18465 0.96535,2.15 2.15,2.15v60.2c-1.18465,0 -2.15,0.96535 -2.15,2.15c0,1.18465 0.96535,2.15 2.15,2.15h4.3v21.5h-10.75v-15.05h-34.4v15.05h-6.45zM103.2,53.75c-1.18465,0 -2.15,0.96535 -2.15,2.15c0,1.18465 0.96535,2.15 2.15,2.15c1.18465,0 2.15,-0.96535 2.15,-2.15c0,-1.18465 -0.96535,-2.15 -2.15,-2.15zM111.8,53.75c-1.18465,0 -2.15,0.96535 -2.15,2.15c0,1.18465 0.96535,2.15 2.15,2.15c1.18465,0 2.15,-0.96535 2.15,-2.15c0,-1.18465 -0.96535,-2.15 -2.15,-2.15zM120.4,53.75c-1.18465,0 -2.15,0.96535 -2.15,2.15c0,1.18465 0.96535,2.15 2.15,2.15c1.18465,0 2.15,-0.96535 2.15,-2.15c0,-1.18465 -0.96535,-2.15 -2.15,-2.15zM129,53.75c-1.18465,0 -2.15,0.96535 -2.15,2.15c0,1.18465 0.96535,2.15 2.15,2.15c1.18465,0 2.15,-0.96535 2.15,-2.15c0,-1.18465 -0.96535,-2.15 -2.15,-2.15zM137.6,53.75c-1.18465,0 -2.15,0.96535 -2.15,2.15c0,1.18465 0.96535,2.15 2.15,2.15c1.18465,0 2.15,-0.96535 2.15,-2.15c0,-1.18465 -0.96535,-2.15 -2.15,-2.15zM34.4,66.65v2.15v15.05h12.9v-17.2zM53.75,66.65v2.15v15.05h12.9v-17.2zM73.1,66.65v2.15v15.05h12.9v-17.2zM105.35,66.65v2.15v15.05h12.9v-17.2zM124.7,66.65v2.15v15.05h12.9v-17.2zM38.7,70.95h4.3v8.6h-4.3zM58.05,70.95h4.3v8.6h-4.3zM77.4,70.95h4.3v8.6h-4.3zM109.65,70.95h4.3v8.6h-4.3zM129,70.95h4.3v8.6h-4.3zM34.4,92.45v2.15v15.05h12.9v-17.2zM53.75,92.45v2.15v15.05h12.9v-17.2zM73.1,92.45v2.15v15.05h12.9v-17.2zM105.35,92.45v2.15v15.05h12.9v-17.2zM124.7,92.45v2.15v15.05h12.9v-17.2zM38.7,96.75h4.3v8.6h-4.3zM58.05,96.75h4.3v8.6h-4.3zM77.4,96.75h4.3v8.6h-4.3zM109.65,96.75h4.3v8.6h-4.3zM129,96.75h4.3v8.6h-4.3zM34.4,118.25v2.15v15.05h12.9v-17.2zM53.75,118.25v2.15v15.05h12.9v-17.2zM73.1,118.25v2.15v15.05h12.9v-17.2zM103.2,118.25c-1.18465,0 -2.15,0.96535 -2.15,2.15c0,1.18465 0.96535,2.15 2.15,2.15c1.18465,0 2.15,-0.96535 2.15,-2.15c0,-1.18465 -0.96535,-2.15 -2.15,-2.15zM111.8,118.25c-1.18465,0 -2.15,0.96535 -2.15,2.15c0,1.18465 0.96535,2.15 2.15,2.15c1.18465,0 2.15,-0.96535 2.15,-2.15c0,-1.18465 -0.96535,-2.15 -2.15,-2.15zM120.4,118.25c-1.18465,0 -2.15,0.96535 -2.15,2.15c0,1.18465 0.96535,2.15 2.15,2.15c1.18465,0 2.15,-0.96535 2.15,-2.15c0,-1.18465 -0.96535,-2.15 -2.15,-2.15zM129,118.25c-1.18465,0 -2.15,0.96535 -2.15,2.15c0,1.18465 0.96535,2.15 2.15,2.15c1.18465,0 2.15,-0.96535 2.15,-2.15c0,-1.18465 -0.96535,-2.15 -2.15,-2.15zM137.6,118.25c-1.18465,0 -2.15,0.96535 -2.15,2.15c0,1.18465 0.96535,2.15 2.15,2.15c1.18465,0 2.15,-0.96535 2.15,-2.15c0,-1.18465 -0.96535,-2.15 -2.15,-2.15zM38.7,122.55h4.3v8.6h-4.3zM58.05,122.55h4.3v8.6h-4.3zM77.4,122.55h4.3v8.6h-4.3zM109.65,133.3h10.75c0,1.18465 0.96535,2.15 2.15,2.15c1.18465,0 2.15,-0.96535 2.15,-2.15h10.75v10.75h-12.9h-12.9zM122.55,144.05c1.18465,0 2.15,-0.96535 2.15,-2.15c0,-1.18465 -0.96535,-2.15 -2.15,-2.15c-1.18465,0 -2.15,0.96535 -2.15,2.15c0,1.18465 0.96535,2.15 2.15,2.15z"></path></g></g></svg>
+                                                                </div>
+                                                                <p class="no-margin bold">Company</p>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col col-md-auto">
+                                                            <div class="b-a b-grey bg-white p-t-20 p-b-20 p-l-45 p-r-45 pointer" :class="{ 'b-primary': parameters.type === 0, 'text-primary': parameters.type === 0, 'b-grey': parameters.type !== 0 }"  @click="parameters.type = 0">
+                                                                <div class="m-b-15">
+                                                                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                                                                         width="45" height="45"
+                                                                         viewBox="0 0 172 172"
+                                                                         style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#000000"><path d="M83.85,19.35c-14.88203,0 -28.65547,8.39004 -38.76719,16.60371c-10.12012,8.22207 -16.6625,16.45254 -16.6625,16.45254l-1.80566,2.26758l2.6875,1.0666c0,0 2.20039,0.86504 4.58555,3.48535c2.37676,2.62031 4.8123,6.86152 4.8123,13.87422c0,8.65039 1.49492,15.10879 2.25918,17.88027c-2.56992,1.15899 -4.40918,3.67012 -4.40918,6.63477c0,1.65449 0.5291,3.2502 0.98262,4.80391c0.22676,0.77266 0.45352,1.50332 0.60469,2.06601c0.15117,0.57109 0.20156,1.1002 0.20156,0.86504c0,3.58613 3.04024,6.45 6.63477,6.45h0.17637v0.10918c0,19.92949 14.32774,36.49961 33.23262,40.06895c2.09961,1.68809 4.70313,2.82187 7.61738,2.82187c2.91426,0 5.51777,-1.13379 7.61738,-2.82187c18.90488,-3.56934 33.23262,-20.13945 33.23262,-40.06895v-0.10918h0.17637c3.58613,0 6.63477,-2.86387 6.63477,-6.45c0,0.23516 0.05039,-0.29395 0.20156,-0.86504c0.15117,-0.56269 0.37793,-1.29336 0.60469,-2.06601c0.45351,-1.55371 0.98262,-3.14941 0.98262,-4.80391c0,-2.78828 -1.6377,-5.16504 -3.96406,-6.39961c0.90703,-4.02285 3.96406,-18.08184 3.96406,-27.74004c0,-21.16406 -13.55508,-30.25117 -24.44785,-30.94824c-0.60469,-1.10019 -2.05762,-3.48535 -5.45898,-6.24844c-4.3168,-3.49375 -11.3127,-6.92871 -21.69316,-6.92871zM83.85,23.65c9.44824,0 15.35234,3.01504 18.98047,5.97129c3.62812,2.94785 4.87109,5.68574 4.87109,5.68574l0.57109,1.24297h1.37734c8.75957,0 21.5,6.76914 21.5,26.92539c0,8.85195 -3.09902,23.32246 -3.90527,26.96738c-0.13437,0.05039 -0.26035,0.10078 -0.39473,0.11758v-7.78535c0,-10.7416 -4.3,-17.40156 -8.65879,-21.13047c-4.35039,-3.72051 -8.85195,-4.68633 -8.85195,-4.68633l-1.24297,-0.26035l-0.83145,0.95742c0,0 -2.1416,2.51953 -7.08828,5.20703c-4.94668,2.6959 -12.57246,5.43379 -23.28047,5.43379c-5.25742,0 -12.9084,0.95742 -19.54316,4.45957c-6.13926,3.2502 -11.18672,9.1375 -11.91738,17.87188c-0.04199,-0.0084 -0.07559,-0.0252 -0.11758,-0.03359c-0.38633,-1.19258 -2.31797,-7.5502 -2.31797,-17.49395c0,-8.0373 -2.93945,-13.47949 -5.9377,-16.76328c-1.30176,-1.43613 -2.56992,-2.34316 -3.67012,-3.08223c1.82246,-2.1584 6.4668,-7.525 14.39492,-13.9582c9.73379,-7.91133 22.82695,-15.64629 36.06289,-15.64629zM109.65,40.85c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM109.65,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM109.42324,61.50176c1.0666,0.31914 3.2334,1.0666 5.97129,3.40976c3.55254,3.04024 7.15547,8.23887 7.15547,17.86348v13.67266l2.95625,-1.18418c1.0582,-0.43672 2.06602,-0.66348 2.41875,-0.66348c1.85605,0 3.225,1.36895 3.225,3.00664v0.0084c0,0.41992 -0.36953,2.09121 -0.80625,3.59453c-0.22676,0.74746 -0.45351,1.48652 -0.63828,2.1584c-0.17637,0.66348 -0.34434,1.15059 -0.34434,1.98203c0,1.16738 -0.97422,2.15 -2.33477,2.15h-4.47637v4.40918c0,18.00625 -12.99238,32.89668 -30.1,35.94531l-0.60469,0.11758l-0.46191,0.41152c-1.44453,1.31855 -3.30898,2.11641 -5.3834,2.11641c-2.07441,0 -3.93887,-0.79785 -5.3834,-2.11641l-0.46191,-0.41152l-0.60469,-0.11758c-17.10762,-3.04863 -30.1,-17.93906 -30.1,-35.94531v-4.40918h-4.47637c-1.36055,0 -2.33477,-0.98262 -2.33477,-2.15c0,-0.83145 -0.16797,-1.31855 -0.35273,-1.98203c-0.18477,-0.67187 -0.40313,-1.41094 -0.62988,-2.1584c-0.43672,-1.50332 -0.80625,-3.17461 -0.80625,-3.59453c0,-1.64609 1.36895,-3.01504 3.225,-3.01504c0.35274,0 1.36055,0.22676 2.41875,0.66348l2.95625,1.18418v-3.82969c0,-8.39844 4.24121,-13.05957 9.91855,-16.05781c5.67734,-2.99824 12.82441,-3.96406 17.52754,-3.96406c11.44707,0 19.82871,-2.95625 25.32969,-5.95449c4.06484,-2.20879 6.12246,-4.08164 7.19746,-5.13984zM68.8,94.6c-2.37676,0 -4.3,1.92324 -4.3,4.3c0,2.37676 1.92324,4.3 4.3,4.3c2.37676,0 4.3,-1.92324 4.3,-4.3c0,-2.37676 -1.92324,-4.3 -4.3,-4.3zM103.2,94.6c-2.37676,0 -4.3,1.92324 -4.3,4.3c0,2.37676 1.92324,4.3 4.3,4.3c2.37676,0 4.3,-1.92324 4.3,-4.3c0,-2.37676 -1.92324,-4.3 -4.3,-4.3z"></path></g></g></svg>
+                                                                </div>
+                                                                <p class="no-margin bold">Personal</p>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col">
+                                            <div class="row">
+                                                <div class="col">
+                                                    <p class="bold fs-11 all-caps muted">Account Information</p>
+                                                </div>
+                                            </div>
+                                            <div class="row m-b-15" v-show="parameters.type === 1">
+                                                <div class="col">
+                                                    <validation-wrapper-component :validator="$v.parameters.company_name">
+                                                        <label>Company Name</label>
+                                                        <input class="form-control" v-model="parameters.company_name">
+                                                    </validation-wrapper-component>
+                                                </div>
+                                            </div>
+                                            <div class="row m-b-15">
+                                                <div class="col">
+                                                    <validation-wrapper-component :validator="$v.parameters.identification_no">
+                                                        <label>{{ parameters.type === 0 ? 'IC/Passport' : 'SSM Registration' }} Number</label>
+                                                        <div class="controls">
+                                                            <input type="text" class="form-control fs-12" v-model="parameters.identification_no">
+                                                        </div>
+                                                    </validation-wrapper-component>
+                                                </div>
+                                            </div>
+
+                                            <div class="row m-b-15">
+                                                <div class="col">
+                                                    <file-input-component :validator="$v.parameters.files" v-model="parameters.files">
+                                                        <template slot="label">
+                                                            <div class="font-heading fs-11 all-caps">{{ parameters.type === 0 ? 'IC Photo' : 'SSM Registration Photo' }}</div>
+                                                        </template>
+                                                        <template slot="tips">
+                                                            <div class="row"  v-show="false">
+                                                                <div class="col">
+                                                                    <div class="row m-b-20">
+                                                                        <div class="col">
+                                                                            <div class="font-heading fs-11 text-warning m-b-10">{{ parameters.type === 0 ? 'IC': 'SSM registration'}} number shown in the photo should tally with {{ parameters.type === 0 ? 'IC': 'SSM registration'}} number provided above.</div>
+                                                                            <div class="font-heading fs-11 muted">Tips on how your photo should look</div>
+                                                                        </div>
+                                                                    </div>
+
+                                                                    <div class="row">
+                                                                        <div class="col">
+                                                                            <div class="row m-b-15">
+                                                                                <div class="col">
+                                                                                    <div class="row m-b-5">
+                                                                                        <div class="col">
+                                                                                            <div class="b-a b-danger b-thick">
+                                                                                                <div class="absolute" style="right: -10px; top: -10px;">
+                                                                                                    <div class="icon-thumbnail btn-rounded icon-25 bg-danger fs-12"><i class="fa fa-times text-white fs-12"></i></div>
+                                                                                                </div>
+                                                                                                <img v-if="parameters.type === 0" src="https://i.pinimg.com/originals/c2/18/96/c218966593d1baacae525934835d847d.jpg" class="w-100">
+                                                                                                <img v-if="parameters.type === 1" src="https://2.bp.blogspot.com/-uElNIO5qSEI/VE4I_f2Ai-I/AAAAAAAAJdA/zJbbBr7NRzI/s1600/ssm-notice-facebook-page.png" class="w-100">
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                    <div class="row text-center">
+                                                                                        <div class="col">
+                                                                                            <div class="font-heading fs-11">Covered</div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                                <div class="col">
+                                                                                    <div class="row m-b-5">
+                                                                                        <div class="col">
+                                                                                            <div class="b-a b-danger b-thick">
+                                                                                                <div class="absolute" style="right: -10px; top: -10px;">
+                                                                                                    <div class="icon-thumbnail btn-rounded icon-25 bg-danger fs-12"><i class="fa fa-times text-white fs-12"></i></div>
+                                                                                                </div>
+                                                                                                <img v-if="parameters.type === 0" src="https://i.pinimg.com/originals/c2/18/96/c218966593d1baacae525934835d847d.jpg" class="w-100">
+                                                                                                <img v-if="parameters.type === 1" src="https://2.bp.blogspot.com/-uElNIO5qSEI/VE4I_f2Ai-I/AAAAAAAAJdA/zJbbBr7NRzI/s1600/ssm-notice-facebook-page.png" class="w-100">
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                    <div class="row text-center">
+                                                                                        <div class="col">
+                                                                                            <div class="font-heading fs-11">Blurry</div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                                <div class="col">
+                                                                                    <div class="row m-b-5">
+                                                                                        <div class="col">
+                                                                                            <div class="b-a b-success b-thick">
+                                                                                                <div class="absolute" style="right: -10px; top: -10px;">
+                                                                                                    <div class="icon-thumbnail btn-rounded icon-25 bg-success fs-12"><i class="fa fa-check text-white fs-12"></i></div>
+                                                                                                </div>
+                                                                                                <img v-if="parameters.type === 0" src="https://i.pinimg.com/originals/c2/18/96/c218966593d1baacae525934835d847d.jpg" class="w-100">
+                                                                                                <img v-if="parameters.type === 1" src="https://2.bp.blogspot.com/-uElNIO5qSEI/VE4I_f2Ai-I/AAAAAAAAJdA/zJbbBr7NRzI/s1600/ssm-notice-facebook-page.png" class="w-100">
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+
+                                                                                    <div class="row text-center">
+                                                                                        <div class="col">
+                                                                                            <div class="font-heading fs-11">This is right!</div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </template>
+                                                    </file-input-component>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</template>
+<script>
+    import registrationFormValidation from '../../../general/mixins/accounts/validation/registrationFormValidation';
+    export default {
+        data() {
+            return {
+                error: '',
+                step: 1,
+                parameters : {
+                    name: '',
+                    email: '',
+                    type: 1,
+                    company_name: '',
+                    phone: '',
+                    password: '',
+                    password_confirmation: '',
+                    identification_no:'',
+                    files: []
+                },
+                status:{
+                    direction:null,
+                },
+                watchCheckEmail:null
+
+            }
+        },
+        methods:{
+            changeStep(direction){
+
+                if(direction === 'next'){
+                    if(this.validate()){
+                        this.$v.$reset();
+                        this.step += 1;
+                    }
+                    return;
+                }
+
+                this.parameters.email = '';
+                this.parameters.password = '';
+                this.parameters.password_confirmation = '';
+
+                return this.step -= 1
+
+            },
+            submitForm(){
+                this.step === 2 ? this.submit(this.route('api.account.registration.register'), 'post', this.section, false, false) : this.changeStep('next');
+            }
+        },
+        mixins: [registrationFormValidation]
+    }
+</script>
diff --git a/resources/assets/vue/components/accounts/forms/RegistrationFormComponent.vue b/resources/assets/vue/components/accounts/forms/RegistrationFormComponent.vue
index 52535ad1..db6d8315 100644
--- a/resources/assets/vue/components/accounts/forms/RegistrationFormComponent.vue
+++ b/resources/assets/vue/components/accounts/forms/RegistrationFormComponent.vue
@@ -6,7 +6,7 @@
                     <error-message-component class="m-b-20" :error="error"></error-message-component>
                     <div class="row">
                         <div class="col">
-                            <div class="row" v-show="step === 1">
+                            <div class="row hide" v-show="step === 1">
                                 <div class="col">
                                     <div class="row m-b-15">
                                         <div class="col">
@@ -180,13 +180,8 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="row"  v-show="step === 2">
+                            <div class="row"  v-show="step === 1">
                                 <div class="col">
-                                    <div class="row">
-                                        <div class="col">
-                                            <p class="bold fs-11 all-caps muted">Personal Information</p>
-                                        </div>
-                                    </div>
                                     <div class="row m-b-15">
                                         <div class="col p-r-5">
                                             <validation-wrapper-component :validator="$v.parameters.name">
@@ -202,18 +197,12 @@
                                         </div>
                                     </div>
                                     <div class="row m-b-15">
-                                        <div class="col p-r-5">
+                                        <div class="col">
                                             <validation-wrapper-component :validator="$v.parameters.email">
                                                 <label>Email</label>
                                                 <input class="form-control" v-model="parameters.email">
                                             </validation-wrapper-component>
                                         </div>
-                                        <div class="col-4 p-l-5">
-                                            <validation-wrapper-component :validator="$v.parameters.wechat_id">
-                                                <label>WeChat ID</label>
-                                                <input class="form-control" v-model="parameters.wechat_id">
-                                            </validation-wrapper-component>
-                                        </div>
                                     </div>
 
                                     <div class="row m-b-15">
@@ -230,9 +219,10 @@
                                             </validation-wrapper-component>
                                         </div>
                                     </div>
-                                    <div class="row">
-                                        <div class="col-auto">
-                                            <button type="button" class="btn btn-sm p-t-10 p-b-10 btn-default bg-master-lighter b-rad-none" @click="changeStep('back')">
+                                    <div class="row  align-items-center">
+                                        <div class="col">
+                                            <p class="text-info pointer m-b-0">Sign in instead</p>
+                                            <button type="button" class="hide btn btn-sm p-t-10 p-b-10 btn-default bg-master-lighter b-rad-none" @click="changeStep('back')">
                                                 <div class="row align-items-center">
                                                     <div class="col-auto p-r-10">
                                                         <i class="fa fa-angle-left fs-16" style="margin-top: 1px;"></i>
@@ -241,8 +231,8 @@
                                                 </div>
                                             </button>
                                         </div>
-                                        <div class="col text-right">
-                                            <button type="button" class="btn btn-sm btn-block p-t-10 p-b-10 p-r-35 p-l-35 btn-primary b-rad-none p-r-30" @click="submitForm"><i class="fa fa-check fs-18 m-r-10"></i>Complete Registration</button>
+                                        <div class="col-3">
+                                            <button type="button" class="btn btn-sm btn-block p-t-10 p-b-10 p-r-35 p-l-35 btn-primary b-rad-none p-r-30" @click="submitForm">Sign Up</button>
                                         </div>
                                     </div>
                                 </div>
diff --git a/resources/assets/vue/components/companies/sections/CustomerProfileSectionComponent.vue b/resources/assets/vue/components/companies/sections/CustomerProfileSectionComponent.vue
index 749e7ef8..1a148c73 100644
--- a/resources/assets/vue/components/companies/sections/CustomerProfileSectionComponent.vue
+++ b/resources/assets/vue/components/companies/sections/CustomerProfileSectionComponent.vue
@@ -8,8 +8,8 @@
             </div>
             <div class="row" v-show="!$store.getters.isShowing('createOrderForm')">
                 <div class="col">
-                    <on-boarding-section-component v-if="!company.last_order"></on-boarding-section-component>
-                    <div class="row" v-if="company.last_order">
+                    <on-boarding-section-component v-if="company.last_order && company.status === 0"></on-boarding-section-component>
+                    <div class="row" v-if="company.last_order && company.status !== 0">
                         <div class="col">
                             <div class="row m-b-30 relative">
                                 <div class="col">
@@ -67,7 +67,7 @@
                     </div>
                 </div>
             </div>
-            <order-form-component v-show="$store.getters.isShowing('createOrderForm')" :company="company" :section="section"></order-form-component>
+            <order-form-component v-show="$store.getters.isShowing('createOrderForm') || (!company.last_order && company.status === 0)" :company="company" :section="section"></order-form-component>
         </div>
     </div>
 </template>
diff --git a/resources/assets/vue/components/companies/sections/OnBoardingSectionComponent.vue b/resources/assets/vue/components/companies/sections/OnBoardingSectionComponent.vue
index c7b5b154..2e4a9cec 100644
--- a/resources/assets/vue/components/companies/sections/OnBoardingSectionComponent.vue
+++ b/resources/assets/vue/components/companies/sections/OnBoardingSectionComponent.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="row">
         <div class="col">
-            <div class="row m-b-20">
+            <div class="row m-b-20 hide">
                 <div class="col">
                     <div class="row m-b-50 text-center" v-if="!$store.getters.isAdmin">
                         <div class="col">
@@ -97,6 +97,109 @@
                     </div>
                 </div>
             </div>
+            <div class="row align-items-center justify-content-center m-b-30">
+                <div class="col-10 bg-master-lightest padding-25">
+                    <div class="row align-items-center">
+                        <div class="col-12 col-lg-3">
+                            <div class="row justify-content-center">
+                                <div class="col-10">
+                                    <a :href="route('order.qr.download', 3362)" target="_blank">
+                                        <div class="peelable-corner overflow-hidden relative">
+                                            <img :src="'https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl={id:3362}'" class="w-100">
+                                        </div>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col">
+                            <div class="row align-items-center">
+                                <div class="col">
+                                    <h4 class="text-success bold">Hooray! You have successfully created your first order.</h4>
+                                </div>
+                            </div>
+                            <div class="row m-b-20">
+                                <div class="col-auto">
+                                    <h3 class="no-margin"><b>Order No.</b> 636295692</h3>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row align-items-center justify-content-center m-b-50">
+                <div class="col-10">
+                    <div class="row">
+                        <div class="col p-t-10 p-b-25 p-l-25 p-r-25 bg-master-lightest b-r b-grey">
+                            <div class="row m-b-15">
+                                <div class="col text-center">
+                                    <img src="/images/qr-box.svg" width="150" height="150">
+                                </div>
+                            </div>
+                            <div class="row justify-content-center">
+                                <div class="col">
+                                    <div class="row m-b-10">
+                                        <div class="col">
+                                            <div class="bold all-caps fs-10"><i class="fa fa-circle text-primary m-r-10"></i>Step 1</div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col">
+                                            <p class="no-margin">Send the QR Code label to your supplier to attach to your parcel</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col p-t-10 p-b-25 p-l-25 p-r-25 bg-master-lightest b-r b-grey">
+                            <div class="row m-b-15">
+                                <div class="col text-center">
+                                    <img src="/images/package.svg" width="120" height="150">
+                                </div>
+                            </div>
+                            <div class="row justify-content-center">
+                                <div class="col">
+                                    <div class="row m-b-10">
+                                        <div class="col">
+                                            <div class="bold all-caps fs-10"><i class="fa fa-circle text-primary m-r-10"></i>Step 2</div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col">
+                                            <p class="no-margin">We receive your packages at our warehouse, and arrange for shipping.</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col p-t-10 p-b-25 p-l-25 p-r-25 bg-master-lightest">
+                            <div class="row m-b-15">
+                                <div class="col">
+                                    <img src="/images/package_hands.svg" width="160" height="150">
+                                </div>
+                            </div>
+                            <div class="row justify-content-center">
+                                <div class="col">
+                                    <div class="row m-b-10">
+                                        <div class="col">
+                                            <div class="bold all-caps fs-10"><i class="fa fa-circle text-primary m-r-10"></i>Step 3</div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col">
+                                            <p class="no-margin">Track your parcel to your doorsteps at your selected delivery address.</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row align-items-center justify-content-center">
+                <div class="col-10">
+                    <complete-registration-form-component></complete-registration-form-component>
+                </div>
+            </div>
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/resources/assets/vue/components/orders/forms/OrderFormComponent.vue b/resources/assets/vue/components/orders/forms/OrderFormComponent.vue
index 9b0020c9..62feec75 100644
--- a/resources/assets/vue/components/orders/forms/OrderFormComponent.vue
+++ b/resources/assets/vue/components/orders/forms/OrderFormComponent.vue
@@ -133,9 +133,15 @@
                         </div>
                     </div>
                     <loading-component class="m-l-0" style="height: 50px; top: 0;" color="info"></loading-component>
-                    <div class="row">
+                    <div class="row" v-if="!company.last_order">
                         <div class="col">
-                            <h4 class="text-info">We are generating the <b>QR code</b> that you need to <b>send to your supplier</b> to print to <b>stick to your packages</b>, this QR code is required for us to identify your packages when they arrives at our warehouse!</h4>
+                            <h4 class="text-info">We are generating your first <b>QR code</b></h4>
+                            <p>Please wait...</p>
+                        </div>
+                    </div>
+                    <div class="row" v-if="company.last_order">
+                        <div class="col">
+                            <h4 class="text-info">We are generating the <b>QR code</b> for you to <b>send to your supplier</b> to print and <b>stick to your packages</b>, this QR code is required for us to identify your packages when they arrives at our warehouse!</h4>
                             <p>Please wait...</p>
                         </div>
                     </div>
@@ -176,7 +182,7 @@
         methods:{
             createOrder(){
                 this.step++;
-                this.submit((this.route('api.order.create')), 'post', 'orderListSection', true, false)
+                this.submit((this.route('api.order.create')), 'post', 'orderListSection', false, false)
             },
             cancelOrder(){
                 this.parameters.warehouse_id = '';
@@ -184,13 +190,18 @@
                 this.$store.dispatch('toggleSection', {name: this.section, status: false})
             },
             successHandler(response){
-                let vm = this;
+                if(!this.company.last_order) {
+                    window.location.reload();
+                    return;
+                }
+
                 setTimeout(function(){
                     window.location.href = this.route('order.show', response.payload.data.reference)
                 }, 5000);
 
             },
             errorHandler(response){
+                alert(response.message)
                 this.error = response.message;
                 this.step--;
             }
diff --git a/resources/assets/vue/general/mixins/guards.js b/resources/assets/vue/general/mixins/guards.js
index ffa96e7d..cd61d755 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'), this.route('company.claim')];
+            const unprotectedRoutes = [this.route('login'), this.route('account.email.verification'), this.route('company.claim'), this.route('signup')];
             if(window.location.href.indexOf(this.route('company.claim')) === 0) {
                 return false;
             }
diff --git a/resources/views/pages/accounts/signup.blade.php b/resources/views/pages/accounts/signup.blade.php
new file mode 100644
index 00000000..226cd994
--- /dev/null
+++ b/resources/views/pages/accounts/signup.blade.php
@@ -0,0 +1,67 @@
+@extends('layouts.base')
+@section('content')
+    <div class="fluid-container h-100">
+        <div class="row h-100">
+            <div class="col-5 d-none d-lg-inline h-100 padding-50 bg-info" >
+                <div class="row">
+                    <div class="col">
+                        <div class="row m-b-50">
+                            <div class="col-5 col-md-3">
+                                <img class="w-100" src="{{asset('images/cief-logo-white.png')}}" alt="">
+                            </div>
+                        </div>
+                        <div class="row m-b-20">
+                            <div class="col">
+                                <h3 class="text-white ">Spend less time managing your logistics and more time optimizing your operations.</h3>
+                            </div>
+                        </div>
+                        <div class="row m-b-20">
+                            <div class="col">
+                                <h4 class="text-white ">You know how to run your operations, let us help you streamline your logistic supply chain management.</h4>
+                            </div>
+                        </div>
+                        <div class="row ">
+                            <div class="col">
+                                <h4 class="text-white">Sign-up today and get access to:</h4>
+                                <h5 class="text-white m-l-20"><i class="fa fa-circle-o m-r-10"></i>An intuitive and easy to use order process</h5>
+                                <h5 class="text-white m-l-20"><i class="fa fa-circle-o m-r-10"></i>Service customization to keep you in control</h5>
+                                <h5 class="text-white m-l-20"><i class="fa fa-circle-o m-r-10"></i>Follow-up action to keep you on track</h5>
+                                <h5 class="text-white m-l-20"><i class="fa fa-circle-o m-r-10"></i>Personalized customer support</h5>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col bg-white no-padding h-100">
+                <div class="row h-100 align-items-center justify-content-center">
+                    <div class="col h-100">
+                        <div class="page-container">
+                            <div class="page-content-wrapper p-t-50 p-b-50 h-100">
+                                <div class="row no-margin align-items-center justify-content-center h-100">
+                                    <div class="col">
+                                        <div class="content p-t-0 overflow-hidden">
+                                            <div class="row h-100 no-margin align-items-center justify-content-center">
+                                                <div class="col col-md-10">
+                                                    <div class="row">
+                                                        <div class="col">
+                                                            <loading-component style="height: 350px;" key="1" color="primary" v-show="$store.getters.isLoading('loginSection')"></loading-component>
+                                                            <div class="row justify-content-center" v-show="!$store.getters.isLoading('loginSection')">
+                                                                <div class="col">
+                                                                    <registration-form-component section="loginSection"></registration-form-component>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index 31c961b1..b99ae38f 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -31,6 +31,10 @@ Route::get('', function () {
     return view('pages.accounts.login');
 })->name('login');
 
+Route::get('/signup', function () {
+    return view('pages.accounts.signup');
+})->name('signup');
+
 Route::group(['prefix' => 'swagger'], function () {
     Route::get('/', function () {
         return view('swagger.index');