diff --git a/src/app/pages/familylogin/familylogin.page.html b/src/app/pages/familylogin/familylogin.page.html
index 865993d..1d16993 100644
--- a/src/app/pages/familylogin/familylogin.page.html
+++ b/src/app/pages/familylogin/familylogin.page.html
@@ -1,99 +1,54 @@
 <ion-content class="ion-padding">
-  <div class="page_logo">
-    <img alt="WrenchBoard" src="/assets/images/wrenchboard-line.png" />
-  </div>
-
-<!--  <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/jobinterest.jpg)'">-->
-<!--    <ion-button (click)="moveToStartScan()">Scan Qr Code</ion-button>-->
-
-<!--    <div class="ion-padding">-->
-<!--      <ion-icon slot="start" name="arrow-back" class="back" (click)="onBack()"></ion-icon>-->
-<!--    </div>-->
-<!--  </div>-->
-
-  <div class="boxed_contents">
-  <ion-grid>
-    <ion-row>
-      <ion-col>
-      </ion-col>
-      <ion-col>
-        <ion-button fill="outline" size="large" class="scan_login_button"  (click)="moveToStartScan()">
-          <ion-icon slot="start" name="scan"></ion-icon>
-          Scan Login</ion-button>
-      </ion-col>
-    </ion-row>
-
-  </ion-grid>
-  <div class="ion-padding space">
-    <div>
-
-
-        <ion-label class="simp_lbl">Family Login</ion-label>
-        <ion-item lines="none">
-          <ion-icon slot="start" name="mail-outline"></ion-icon>
-          <ion-input type="email" placeholder="UserCode"  maxlength="12" [(ngModel)]='username'></ion-input>
-        </ion-item>
-
-        <ion-item lines="none">
-          <ion-icon slot="start" name="pin-outline"></ion-icon>
-          <ion-input type="password" placeholder="PIN" maxlength="4" [(ngModel)]='pin'></ion-input>
-        </ion-item>
-
-        <div class="check">
-          <ion-checkbox mode="md" checked></ion-checkbox>
-          <ion-label>Remember me</ion-label>
+    <div  class="start-pages">
+        <div class="page_logo">
+            <img alt="WrenchBoard" src="/assets/images/wrenchboard-line.png" />
         </div>
+        <div class="boxed_contents">
+            <ion-grid>
+                <ion-row>
+                    <ion-col>
+                    </ion-col>
+                    <ion-col>
+                        <ion-button fill="outline" size="large" class="scan_login_button"  (click)="moveToStartScan()">
+                            <ion-icon slot="start" name="scan"></ion-icon>
+                            Scan Login</ion-button>
+                    </ion-col>
+                </ion-row>
 
-        <ion-button expand="block" (click)="startLogin()">
-          Login
-        </ion-button>
+            </ion-grid>
+            <div class="ion-padding space">
+                <div>
 
-        <!--      <ion-label class="forgot_lbl" (click)="onForgot()">Forgot your password ?</ion-label>-->
 
-        <ion-label class="or">Or return to general accounts</ion-label>
+                    <ion-label class="simp_lbl">Family Login</ion-label>
+                    <ion-item lines="none">
+                        <ion-icon slot="start" name="mail-outline"></ion-icon>
+                        <ion-input type="email" placeholder="UserCode"  maxlength="12" [(ngModel)]='username'></ion-input>
+                    </ion-item>
 
-      </div>
-      <div class="bottom">
-        <ion-label class="last_lbl">Have an account? <span (click)="userLogin()">login</span></ion-label>
-      </div>
+                    <ion-item lines="none">
+                        <ion-icon slot="start" name="pin-outline"></ion-icon>
+                        <ion-input type="password" placeholder="PIN" maxlength="4" [(ngModel)]='pin'></ion-input>
+                    </ion-item>
+
+                    <div class="check">
+                        <ion-checkbox mode="md" checked></ion-checkbox>
+                        <ion-label>Remember me</ion-label>
+                    </div>
+
+                    <ion-button expand="block" (click)="startLogin()">
+                        Login
+                    </ion-button>
+
+                    <!--      <ion-label class="forgot_lbl" (click)="onForgot()">Forgot your password ?</ion-label>-->
+
+                    <ion-label class="or">Or return to general accounts</ion-label>
+
+                </div>
+                <div class="bottom">
+                    <ion-label class="last_lbl">Have an account? <span (click)="userLogin()">login</span></ion-label>
+                </div>
+            </div>
+        </div>
     </div>
-  </div>
-
-
-<!--      <ion-grid>-->
-<!--        <ion-row>-->
-<!--          <ion-col>-->
-<!--            <ion-button expand="block" fill="outline" >Login</ion-button>-->
-<!--          </ion-col>-->
-<!--          <ion-col>-->
-<!--            <ion-button expand="block" class="loginvb -type"  (click)="familyLogin()">-->
-<!--              <ion-icon slot="start" name="star"></ion-icon>-->
-<!--              Family</ion-button>-->
-<!--          </ion-col>-->
-
-<!--        </ion-row>-->
-<!--      </ion-grid>-->
-
-
-
-<!--      <div class="button">-->
-<!--        <ion-buttons>-->
-<!--          <ion-button>-->
-<!--            <ion-icon name="logo-facebook"></ion-icon>-->
-<!--          </ion-button>-->
-<!--        </ion-buttons>-->
-
-<!--        <ion-buttons>-->
-<!--          <ion-button>-->
-<!--            <ion-icon name="logo-google"></ion-icon>-->
-<!--          </ion-button>-->
-<!--        </ion-buttons>-->
-
-<!--        <ion-buttons>-->
-<!--          <ion-button>-->
-<!--            <ion-icon name="logo-twitter"></ion-icon>-->
-<!--          </ion-button>-->
-<!--        </ion-buttons>-->
-<!--      </div>-->
-
 </ion-content>
diff --git a/src/app/pages/login/login.page.html b/src/app/pages/login/login.page.html
index 0150d5f..b60232e 100644
--- a/src/app/pages/login/login.page.html
+++ b/src/app/pages/login/login.page.html
@@ -1,102 +1,100 @@
 <ion-content class="ion-padding">
-    <div class="page_logo">
-        <img alt="WrenchBoard" src="/assets/images/wrenchboard-line.png" />
-    </div>
+    <div  class="start-pages">
+        <div class="page_logo">
+            <img alt="WrenchBoard" src="/assets/images/wrenchboard-line.png" />
+        </div>
+        <div class="ion-padding space">
+            <div>
 
-    <div class="ion-padding space">
-    <div>
+                <!--      <ion-label class="simp_lbl">Login to continue</ion-label>-->
 
-<!--      <ion-label class="simp_lbl">Login to continue</ion-label>-->
+                <div class="boxed_contents">
+                    <ion-grid>
+                        <ion-row>
+                            <ion-col size="6">
+                                <ion-button fill="outline" size="large" class="scan_login_button" (click)="moveToStartScan()">
+                                    <ion-icon slot="start" name="scan"></ion-icon>
+                                    Scan Login</ion-button>
+                            </ion-col>
+                            <ion-col size="6">
+                                <ion-button  class="login-type22"  (click)="familyLogin()">
+                                    <ion-icon name="people-circle-outline"></ion-icon>
+                                    Family Login</ion-button>
+                            </ion-col>
+                        </ion-row>
+                    </ion-grid>
 
-        <div class="boxed_contents">
-            <ion-grid>
-                <ion-row>
-                    <ion-col size="6">
-                        <ion-button fill="outline" size="large" class="scan_login_button" (click)="moveToStartScan()">
-                            <ion-icon slot="start" name="scan"></ion-icon>
-                            Scan Login</ion-button>
-                    </ion-col>
-                    <ion-col size="6">
-                        <ion-button  class="login-type22"  (click)="familyLogin()">
-                            <ion-icon name="people-circle-outline"></ion-icon>
-                           Family Login</ion-button>
-                    </ion-col>
-                </ion-row>
-            </ion-grid>
+                    <!--            <ion-grid>-->
+                    <!--                <ion-row>-->
+                    <!--                    <ion-col>-->
+                    <!--                        <ion-button fill="outline" size="large" (click)="moveToStartScan()">-->
+                    <!--                            <ion-icon slot="start" name="scan"></ion-icon>-->
+                    <!--                            Scan Login</ion-button>-->
+                    <!--                    </ion-col>-->
+                    <!--                    <ion-col class="family_box">-->
+                    <!--                        <ion-button expand="block" class="login-type"  (click)="familyLogin()">-->
+                    <!--                            <ion-icon name="people-circle-outline"></ion-icon>-->
+                    <!--                            Go to Family Login</ion-button>-->
+                    <!--                    </ion-col>-->
 
-<!--            <ion-grid>-->
-<!--                <ion-row>-->
-<!--                    <ion-col>-->
-<!--                        <ion-button fill="outline" size="large" (click)="moveToStartScan()">-->
-<!--                            <ion-icon slot="start" name="scan"></ion-icon>-->
-<!--                            Scan Login</ion-button>-->
-<!--                    </ion-col>-->
-<!--                    <ion-col class="family_box">-->
-<!--                        <ion-button expand="block" class="login-type"  (click)="familyLogin()">-->
-<!--                            <ion-icon name="people-circle-outline"></ion-icon>-->
-<!--                            Go to Family Login</ion-button>-->
-<!--                    </ion-col>-->
+                    <!--                </ion-row>-->
+                    <!--            </ion-grid>-->
 
-<!--                </ion-row>-->
-<!--            </ion-grid>-->
+                    <ion-label class="simp_lbl_tx">Login to continue</ion-label>
+                    <ion-item lines="none">
+                        <ion-icon slot="start" name="mail-outline"></ion-icon>
+                        <ion-input (ionChange)="refreshBut()" type="email" placeholder="Email"  [(ngModel)]='username'></ion-input>
+                    </ion-item>
 
-            <ion-label class="simp_lbl_tx">Login to continue</ion-label>
-            <ion-item lines="none">
-                <ion-icon slot="start" name="mail-outline"></ion-icon>
-                <ion-input (ionChange)="refreshBut()" type="email" placeholder="Email"  [(ngModel)]='username'></ion-input>
-            </ion-item>
+                    <ion-item lines="none">
+                        <ion-icon slot="start" name="lock-closed-outline"></ion-icon>
+                        <ion-input (ionChange)="refreshBut()" type="password" placeholder="Password"  [(ngModel)]='password'></ion-input>
+                    </ion-item>
 
-            <ion-item lines="none">
-                <ion-icon slot="start" name="lock-closed-outline"></ion-icon>
-                <ion-input (ionChange)="refreshBut()" type="password" placeholder="Password"  [(ngModel)]='password'></ion-input>
-            </ion-item>
+                    <div class="check">
+                        <ion-checkbox mode="md" checked></ion-checkbox>
+                        <ion-label>Remember me</ion-label>
+                    </div>
 
-            <div class="check">
-                <ion-checkbox mode="md" checked></ion-checkbox>
-                <ion-label>Remember me</ion-label>
-            </div>
+                    <ion-button shape="round" expand="block"
+                                (click)="startLogin()"
+                                [disabled]="isDisabled"
+                    >
+                        Login
+                    </ion-button>
+                    <!--            <ion-button shape="round">Round</ion-button>-->
+                    <ion-label class="forgot_lbl" (click)="onForgot()">Forgot your password ?</ion-label>
 
-            <ion-button shape="round" expand="block"
-                        (click)="startLogin()"
-                        [disabled]="isDisabled"
-            >
-                Login
-            </ion-button>
-<!--            <ion-button shape="round">Round</ion-button>-->
-            <ion-label class="forgot_lbl" (click)="onForgot()">Forgot your password ?</ion-label>
+                    <div *ngIf="showSocial == true ">
+                        <ion-label class="or">Or Continue With</ion-label>
+                        <div class="button">
+                            <ion-buttons>
+                                <ion-button (click) ="onLoginFacebook()">
+                                    <ion-icon name="logo-facebook"></ion-icon>
+                                </ion-button>
+                            </ion-buttons>
 
-            <div *ngIf="showSocial == true ">
-                <ion-label class="or">Or Continue With</ion-label>
-                <div class="button">
-                    <ion-buttons>
-                        <ion-button (click) ="onLoginFacebook()">
-                            <ion-icon name="logo-facebook"></ion-icon>
-                        </ion-button>
-                    </ion-buttons>
+                            <ion-buttons>
+                                <ion-button (click) ="onLoginGoogle()" >
+                                    <ion-icon name="logo-google"></ion-icon>
+                                </ion-button>
+                            </ion-buttons>
 
-                    <ion-buttons>
-                        <ion-button (click) ="onLoginGoogle()" >
-                            <ion-icon name="logo-google"></ion-icon>
-                        </ion-button>
-                    </ion-buttons>
+                            <ion-buttons *ngIf="ios">
+                                <ion-button (click) ="onLoginApple()" >
+                                    <ion-icon name="logo-apple"></ion-icon>
+                                </ion-button>
+                            </ion-buttons>
+                        </div>
+                    </div>
 
-                    <ion-buttons *ngIf="ios">
-                        <ion-button (click) ="onLoginApple()" >
-                            <ion-icon name="logo-apple"></ion-icon>
-                        </ion-button>
-                    </ion-buttons>
+                </div>
+
+                <div class="bottom">
+                    <ion-label class="last_lbl">Don't have an account? <span (click)="onRegister()">Register</span></ion-label>
                 </div>
             </div>
 
         </div>
-
-        <div class="bottom">
-            <ion-label class="last_lbl">Don't have an account? <span (click)="onRegister()">Register</span></ion-label>
-        </div>
     </div>
-
-        </div>
-
-
-
 </ion-content>
diff --git a/src/app/pages/register/register.page.html b/src/app/pages/register/register.page.html
index 1597733..e0e68db 100644
--- a/src/app/pages/register/register.page.html
+++ b/src/app/pages/register/register.page.html
@@ -1,120 +1,122 @@
 <ion-content class="ion-padding">
-  <div class="page_logo">
-    <img alt="WrenchBoard" src="/assets/images/wrenchboard-line.png" />
-  </div>
-  <div class="boxed_contents">
-    <div class="ion-padding space">
-      <div *ngIf="signup_state==1; then startBlock"></div>
-      <div *ngIf="signup_state==2; then secondBlock"></div>
-      <ng-template #startBlock>
-        <div>
+  <div  class="start-pages">
+    <div class="page_logo">
+      <img alt="WrenchBoard" src="/assets/images/wrenchboard-line.png" />
+    </div>
+    <div class="boxed_contents">
+      <div class="ion-padding space">
+        <div *ngIf="signup_state==1; then startBlock"></div>
+        <div *ngIf="signup_state==2; then secondBlock"></div>
+        <ng-template #startBlock>
+          <div>
 
-          <ion-label class="simp_lbl">Create Your Account</ion-label>
-          <ion-item lines="none">
-            <ion-select label="Default label" placeholder="Select Country" [(ngModel)]='country'>
-              <ion-select-option value="NG">Nigeria</ion-select-option>
-              <ion-select-option value="US">United States</ion-select-option>
-            </ion-select>
-            <!--        <ion-label>Nigeria</ion-label>-->
-            <!--        <ion-icon name="caret-down-outline"></ion-icon>-->
-          </ion-item>
+            <ion-label class="simp_lbl">Create Your Account</ion-label>
+            <ion-item lines="none">
+              <ion-select label="Default label" placeholder="Select Country" [(ngModel)]='country'>
+                <ion-select-option value="NG">Nigeria</ion-select-option>
+                <ion-select-option value="US">United States</ion-select-option>
+              </ion-select>
+              <!--        <ion-label>Nigeria</ion-label>-->
+              <!--        <ion-icon name="caret-down-outline"></ion-icon>-->
+            </ion-item>
 
 
-          <ion-item lines="none">
-            <ion-icon slot="start" name="person-outline"></ion-icon>
-            <ion-input type="firstname" placeholder="Firstname" [(ngModel)]='firstname'></ion-input>
-          </ion-item>
+            <ion-item lines="none">
+              <ion-icon slot="start" name="person-outline"></ion-icon>
+              <ion-input type="firstname" placeholder="Firstname" [(ngModel)]='firstname'></ion-input>
+            </ion-item>
 
 
-          <ion-item lines="none">
-            <ion-icon slot="start" name="person-outline"></ion-icon>
-            <ion-input type="lastname" placeholder="Lastname" [(ngModel)]='lastname'></ion-input>
-          </ion-item>
+            <ion-item lines="none">
+              <ion-icon slot="start" name="person-outline"></ion-icon>
+              <ion-input type="lastname" placeholder="Lastname" [(ngModel)]='lastname'></ion-input>
+            </ion-item>
 
 
-          <ion-item lines="none">
-            <ion-icon slot="start" name="mail-outline"></ion-icon>
-            <ion-input type="username" placeholder="Email (your username)" [(ngModel)]='username'></ion-input>
-          </ion-item>
+            <ion-item lines="none">
+              <ion-icon slot="start" name="mail-outline"></ion-icon>
+              <ion-input type="username" placeholder="Email (your username)" [(ngModel)]='username'></ion-input>
+            </ion-item>
 
-          <ion-item lines="none">
-            <ion-icon slot="start" name="lock-closed-outline"></ion-icon>
-            <ion-input type="password" placeholder="Password" [(ngModel)]='password'></ion-input>
-          </ion-item>
+            <ion-item lines="none">
+              <ion-icon slot="start" name="lock-closed-outline"></ion-icon>
+              <ion-input type="password" placeholder="Password" [(ngModel)]='password'></ion-input>
+            </ion-item>
 
-          <!--      <ion-item lines="none">-->
-          <!--        <ion-icon slot="start" name="lock-closed-outline"></ion-icon>-->
-          <!--        <ion-input type="password" placeholder="Confirm Password"></ion-input>-->
-          <!--      </ion-item>-->
+            <!--      <ion-item lines="none">-->
+            <!--        <ion-icon slot="start" name="lock-closed-outline"></ion-icon>-->
+            <!--        <ion-input type="password" placeholder="Confirm Password"></ion-input>-->
+            <!--      </ion-item>-->
 
-          <ion-button expand="block" (click)="onFillProfile()">
-            Register
-          </ion-button>
+            <ion-button expand="block" (click)="onFillProfile()">
+              Register
+            </ion-button>
 
-          <div *ngIf="showSocial == true ">
+            <div *ngIf="showSocial == true ">
 
-            <ion-label class="or">Or Continue With</ion-label>
+              <ion-label class="or">Or Continue With</ion-label>
 
-            <div class="button">
-              <ion-buttons>
-                <ion-button>
-                  <ion-icon name="logo-facebook"></ion-icon>
-                </ion-button>
-              </ion-buttons>
+              <div class="button">
+                <ion-buttons>
+                  <ion-button>
+                    <ion-icon name="logo-facebook"></ion-icon>
+                  </ion-button>
+                </ion-buttons>
 
-              <ion-buttons>
-                <ion-button>
-                  <ion-icon name="logo-google"></ion-icon>
-                </ion-button>
-              </ion-buttons>
+                <ion-buttons>
+                  <ion-button>
+                    <ion-icon name="logo-google"></ion-icon>
+                  </ion-button>
+                </ion-buttons>
 
-              <ion-buttons>
-                <ion-button>
-                  <ion-icon name="logo-twitter"></ion-icon>
-                </ion-button>
-              </ion-buttons>
+                <ion-buttons>
+                  <ion-button>
+                    <ion-icon name="logo-twitter"></ion-icon>
+                  </ion-button>
+                </ion-buttons>
+              </div>
             </div>
+
           </div>
+        </ng-template>
+        <ng-template #secondBlock>
+          <div>
 
+            <ion-label class="simp_lbl">Complete Account</ion-label>
+
+            <ion-grid>
+              <ion-row>
+                <ion-col size-md="3">Country</ion-col>
+                <ion-col size-md="9">{{signup_country}}</ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col size-md="3">Username</ion-col>
+                <ion-col size-md="9">{{signup_username}}</ion-col>
+              </ion-row>
+            </ion-grid>
+            <ion-label class="or">Enter Confirmation Received In Email</ion-label>
+            <ion-item lines="none">
+              <ion-icon slot="start" name="mail-outline"></ion-icon>
+              <ion-input type="username" placeholder="Random text" [(ngModel)]='random_text'></ion-input>
+            </ion-item>
+
+            <ion-item lines="none">
+              <ion-icon slot="start" name="lock-closed-outline"></ion-icon>
+              <ion-input type="password" placeholder="Password" [(ngModel)]='password'></ion-input>
+            </ion-item>
+            <ion-button expand="block" (click)="onCompleteProfile()">
+              Complete signup
+            </ion-button>
+
+
+
+
+          </div>
+        </ng-template>
+
+        <div class="bottom">
+          <ion-label class="last_lbl">Already have an account? <span (click)="onLogin()">Login</span></ion-label>
         </div>
-      </ng-template>
-      <ng-template #secondBlock>
-        <div>
-
-          <ion-label class="simp_lbl">Complete Account</ion-label>
-
-          <ion-grid>
-            <ion-row>
-              <ion-col size-md="3">Country</ion-col>
-              <ion-col size-md="9">{{signup_country}}</ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col size-md="3">Username</ion-col>
-              <ion-col size-md="9">{{signup_username}}</ion-col>
-            </ion-row>
-          </ion-grid>
-          <ion-label class="or">Enter Confirmation Received In Email</ion-label>
-          <ion-item lines="none">
-            <ion-icon slot="start" name="mail-outline"></ion-icon>
-            <ion-input type="username" placeholder="Random text" [(ngModel)]='random_text'></ion-input>
-          </ion-item>
-
-          <ion-item lines="none">
-            <ion-icon slot="start" name="lock-closed-outline"></ion-icon>
-            <ion-input type="password" placeholder="Password" [(ngModel)]='password'></ion-input>
-          </ion-item>
-          <ion-button expand="block" (click)="onCompleteProfile()">
-            Complete signup
-          </ion-button>
-
-
-
-
-        </div>
-      </ng-template>
-
-      <div class="bottom">
-        <ion-label class="last_lbl">Already have an account? <span (click)="onLogin()">Login</span></ion-label>
       </div>
     </div>
   </div>
diff --git a/src/global.scss b/src/global.scss
index ff315d2..1dbf8cb 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -229,6 +229,13 @@ body.scanner-active {
 }
 ion-content{
   margin-top: 0px !important;
+  .start-pages{
+   // background-color: #3dc2ff;
+    background-image: linear-gradient(white, aliceblue);
+    margin-top: 0px;
+    height: 100%;
+    width: 100%;
+  }
 }
 .scan_login_button{
   font-size: 16px;