diff --git a/src/app/pages/familylogin/familylogin.page.html b/src/app/pages/familylogin/familylogin.page.html
index dfac6a5..cd21bf1 100644
--- a/src/app/pages/familylogin/familylogin.page.html
+++ b/src/app/pages/familylogin/familylogin.page.html
@@ -7,7 +7,38 @@
   <div class="ion-padding space">
     <div>
 
-      <ion-label class="simp_lbl">Family Login</ion-label>
+      <div class="boxed_contents">
+        <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="Username"  maxlength="8" [(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="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>
+
 
 <!--      <ion-grid>-->
 <!--        <ion-row>-->
@@ -23,28 +54,7 @@
 <!--        </ion-row>-->
 <!--      </ion-grid>-->
 
-      <ion-item lines="none">
-        <ion-icon slot="start" name="mail-outline"></ion-icon>
-        <ion-input type="email" placeholder="Username"  maxlength="8" [(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="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 class="button">-->
 <!--        <ion-buttons>-->
@@ -65,9 +75,5 @@
 <!--          </ion-button>-->
 <!--        </ion-buttons>-->
 <!--      </div>-->
-    </div>
-    <div class="bottom">
-      <ion-label class="last_lbl">Have an account? <span (click)="userLogin()">login</span></ion-label>
-    </div>
-  </div>
+
 </ion-content>
diff --git a/src/app/pages/home/home.page.html b/src/app/pages/home/home.page.html
index 9a832fd..4e59123 100644
--- a/src/app/pages/home/home.page.html
+++ b/src/app/pages/home/home.page.html
@@ -22,11 +22,59 @@
     <ion-icon slot="start" name="search"></ion-icon>
     <ion-label>Search</ion-label>
   </div> -->
+<div class="boxed_contents">
 
   <div class="offer">
     <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/offer.jpg)'"></div>
   </div>
 
+  <div  *ngFor="let item of bannerData; let i = index" class="bg_white {{item.short_style}} "  (click)="onDetails(item)">
+    <div class="list">
+      <div *ngIf="item.banner_location === 'URL' ">
+        <!-- code to render a large video block-->
+        <div class="bg_image back_image banner_image" [style.backgroundImage]="'url('+item.banner+')'"></div>
+      </div>
+      <div *ngIf="item.banner_location === 'LOCAL' ">
+        <div class="bg_image back_image banner_image" [style.backgroundImage]="'url(assets/images/'+item.banner+')'"></div>
+      </div>
+
+      <div class="detail">
+        <ion-label class="name">{{item.short_title}}</ion-label>
+        <ion-label class="bg_text">{{item.short_description}}</ion-label>
+
+
+        <!--        <ion-label class="price">$48.00 </ion-label>-->
+
+        <div class="row">
+          <!--          <ion-icon name="star-half-outline" color="warning"></ion-icon>-->
+          <!--          <ion-label class="small">4.9</ion-label>-->
+          <!--          <ion-label class="small">|</ion-label>-->
+          <!--          <ion-label class="small">8266 Students</ion-label>-->
+        </div>
+      </div>
+    </div>
+    <!--    <ion-icon slot="end" name="bookmark-outline" class="save" color="primary"></ion-icon>-->
+  </div>
+
+  <div class="flex">
+    <ion-label class="bold_text">Recommended Blog</ion-label>
+    <ion-label class="color_text">See all</ion-label>
+  </div>
+  <div class="bg_white bg_alice" *ngFor="let item of blogData; let i = index" (click)="blogDetails(item)">
+    <div class="blog_list">
+      <div class="bg_image back_image banner_image" [style.backgroundImage]="'url(https://blog.wrenchboard.com/wp-content/uploads/'+item.meta_value+')'"></div>
+      <div class="detail">
+        <ion-label class="name">{{item.post_title}}</ion-label>
+      </div>
+    </div>
+    <!--    <ion-icon slot="end" name="bookmark-outline" class="save" color="primary"></ion-icon>-->
+  </div>
+
+
+
+
+</div>
+
   <!-- <div class="flex">
     <ion-label class="bold_text">Top Mentors</ion-label>
     <ion-label class="color_text" (click)="onTopMentors()">See all</ion-label>
@@ -60,46 +108,8 @@
 
 <!--  <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/taskbanners/'+item.banner+')'"></div>-->
 
-  <div  *ngFor="let item of bannerData; let i = index" class="bg_white {{item.short_style}} "  (click)="onDetails(item)">
-    <div class="list">
-      <div *ngIf="item.banner_location === 'URL' ">
-        <!-- code to render a large video block-->
-        <div class="bg_image back_image banner_image" [style.backgroundImage]="'url('+item.banner+')'"></div>
-      </div>
-      <div *ngIf="item.banner_location === 'LOCAL' ">
-        <div class="bg_image back_image banner_image" [style.backgroundImage]="'url(assets/images/'+item.banner+')'"></div>
-      </div>
-
-      <div class="detail">
-        <ion-label class="name">{{item.short_title}}</ion-label>
-        <ion-label class="bg_text">{{item.short_description}}</ion-label>
 
 
-<!--        <ion-label class="price">$48.00 </ion-label>-->
 
-        <div class="row">
-<!--          <ion-icon name="star-half-outline" color="warning"></ion-icon>-->
-<!--          <ion-label class="small">4.9</ion-label>-->
-<!--          <ion-label class="small">|</ion-label>-->
-<!--          <ion-label class="small">8266 Students</ion-label>-->
-        </div>
-      </div>
-    </div>
-<!--    <ion-icon slot="end" name="bookmark-outline" class="save" color="primary"></ion-icon>-->
-  </div>
-
-  <div class="flex">
-    <ion-label class="bold_text">Recommended Blog</ion-label>
-    <ion-label class="color_text">See all</ion-label>
-  </div>
-  <div class="bg_white bg_alice" *ngFor="let item of blogData; let i = index" (click)="blogDetails(item)">
-    <div class="blog_list">
-      <div class="bg_image back_image banner_image" [style.backgroundImage]="'url(https://blog.wrenchboard.com/wp-content/uploads/'+item.meta_value+')'"></div>
-      <div class="detail">
-        <ion-label class="name">{{item.post_title}}</ion-label>
-      </div>
-    </div>
-<!--    <ion-icon slot="end" name="bookmark-outline" class="save" color="primary"></ion-icon>-->
-  </div>
 
 </ion-content>
diff --git a/src/app/pages/login/login.page.html b/src/app/pages/login/login.page.html
index 13439fa..099c127 100644
--- a/src/app/pages/login/login.page.html
+++ b/src/app/pages/login/login.page.html
@@ -8,70 +8,75 @@
 
 <!--      <ion-label class="simp_lbl">Login to continue</ion-label>-->
 
-      <ion-grid>
-        <ion-row>
-          <ion-col>
-<!--            <ion-button expand="block" fill="outline" >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 Account</ion-button>
-          </ion-col>
+        <div class="boxed_contents">
+            <ion-grid>
+                <ion-row>
+                    <ion-col>
+                        <!--            <ion-button expand="block" fill="outline" >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 Account</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 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 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 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>
-
-      <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>
-
-        <div *ngIf="showSocial == true ">
-            <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>
-
-                <ion-buttons>
-                    <ion-button>
-                        <ion-icon name="logo-google"></ion-icon>
-                    </ion-button>
-                </ion-buttons>
-
-                <ion-buttons>
-                    <ion-button>
-                        <ion-icon name="logo-apple"></ion-icon>
-                    </ion-button>
-                </ion-buttons>
+            <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>
+
+            <div *ngIf="showSocial == true ">
+                <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>
+
+                    <ion-buttons>
+                        <ion-button>
+                            <ion-icon name="logo-google"></ion-icon>
+                        </ion-button>
+                    </ion-buttons>
+
+                    <ion-buttons>
+                        <ion-button>
+                            <ion-icon name="logo-apple"></ion-icon>
+                        </ion-button>
+                    </ion-buttons>
+                </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 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/tabs/tabs.page.html b/src/app/pages/tabs/tabs.page.html
index de04f17..639f17d 100644
--- a/src/app/pages/tabs/tabs.page.html
+++ b/src/app/pages/tabs/tabs.page.html
@@ -1,5 +1,5 @@
 
-<ion-tabs>
+<ion-tabs class="bottom_bar_tabs">
 <div class="bottom_bardiv">
   <ion-tab-bar slot="bottom" class="bottom_bar">
     <ion-tab-button tab="tab1">
diff --git a/src/app/pages/tabs/tabs.page.scss b/src/app/pages/tabs/tabs.page.scss
index 77ffbe0..dcde7f3 100644
--- a/src/app/pages/tabs/tabs.page.scss
+++ b/src/app/pages/tabs/tabs.page.scss
@@ -4,12 +4,19 @@
 }
 .bottom_bardiv{
  // background-color: red;
-  position:relative;
+  //position:relative;
   align-content: center;
+ // margin-left: auto;
+ // margin-right: auto;
 }
 
 .bottom_bar{
   position: relative;
   //background-color: red;
   max-width: 600px;
+   margin-left: auto;
+   margin-right: auto;
+}
+.bottom_bar_tabs{
+  background-color: lightgray;
 }
\ No newline at end of file
diff --git a/src/global.scss b/src/global.scss
index b6de494..df42ab7 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -91,3 +91,10 @@ ion-modal.custom_modal_bottom {
   --height: 300px;
   align-items: flex-end;
 }
+
+.boxed_contents{
+  //background-color: red;
+  max-width: 550px;
+  margin-left: auto;
+  margin-right: auto;
+}
\ No newline at end of file