diff --git a/ng8-seed/package-lock.json b/ng8-seed/package-lock.json
index de47053..6799721 100644
--- a/ng8-seed/package-lock.json
+++ b/ng8-seed/package-lock.json
@@ -786,8 +786,9 @@
       }
     },
     "@swimlane/ngx-datatable": {
-      "version": "git+https://github.com/zackarychapple/ngx-datatable.git#24d02ef0dcf14b99c11809a35cda7612230f293a",
-      "from": "git+https://github.com/zackarychapple/ngx-datatable.git"
+      "version": "15.0.2",
+      "resolved": "https://registry.npmjs.org/@swimlane/ngx-datatable/-/ngx-datatable-15.0.2.tgz",
+      "integrity": "sha512-IlUyCs/hLv12hzz2pGugbrdRpBbwE6JUM4Bm4CCqLptmZj+t8pw8Ywthde8yUDdpgGgTJeJ9G5o92QadyGbP3g=="
     },
     "@types/d3": {
       "version": "3.5.43",
diff --git a/ng8-seed/package.json b/ng8-seed/package.json
index a330261..4178587 100644
--- a/ng8-seed/package.json
+++ b/ng8-seed/package.json
@@ -26,7 +26,7 @@
     "@angular/router": "^8.2.2",
     "@ngx-translate/core": "^10.0.2",
     "@ngx-translate/http-loader": "^3.0.1",
-    "@swimlane/ngx-datatable": "git+https://github.com/zackarychapple/ngx-datatable.git",
+    "@swimlane/ngx-datatable": "^15.0.2",
     "angular-calendar": "^0.26.4",
     "angular-sortablejs": "^2.6.0",
     "angular-tree-component": "^8.4.0",
diff --git a/ng8-seed/src/app/components/contribute/contribute.component.html b/ng8-seed/src/app/components/contribute/contribute.component.html
index a227d42..630546c 100644
--- a/ng8-seed/src/app/components/contribute/contribute.component.html
+++ b/ng8-seed/src/app/components/contribute/contribute.component.html
@@ -1,3 +1,4 @@
+<div id="top"></div>
   <!--starts-->
   <div fxLayout fxLayout="row"  fxLayout.xs="column"  fxLayoutGap.xs="0">
     <!-- <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="40" fxFlex.lg="1000" fxFlex.xl="40"> -->
@@ -8,22 +9,22 @@
              <div fxLayout="row" fxLayoutAlign="start center" class="mb-2 pt-1">
 <mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 100%;">
 <mat-select placeholder="Select District" [(ngModel)]="currentDrink" [required]="isRequired" [disabled]="isDisabled" #drinkControl="ngModel">
-        <mat-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
-            {{ drink.viewValue }}
+        <mat-option *ngFor="let item of districtList" [value]="item.id" >
+            {{ item.value }}
         </mat-option>
     </mat-select>
 </mat-form-field>
 <mat-form-field dividerColor="accent" class="ml-xs mr-xs" style="width: 100%;">
 <mat-select placeholder="Select Schools" [(ngModel)]="currentDrink" [required]="isRequired" [disabled]="isDisabled" #drinkControl="ngModel">
-        <mat-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
-            {{ drink.viewValue }}
+        <mat-option *ngFor="let item of schoolList" [value]="item.id" >
+            {{ item.value }}
         </mat-option>
     </mat-select>
 </mat-form-field>
 <mat-form-field dividerColor="warn" class="ml-xs mr-xs" style="width: 100%;">
 <mat-select placeholder="Select Category" [(ngModel)]="currentDrink" [required]="isRequired" [disabled]="isDisabled" #drinkControl="ngModel">
-        <mat-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
-            {{ drink.viewValue }}
+        <mat-option *ngFor="let item of categoryList" [value]="item.id" >
+            {{ item.value }}
         </mat-option>
     </mat-select>
 </mat-form-field>
@@ -44,11 +45,11 @@
                          <!-- <td class="product-remove">
                              <a href="#" class="remove" title="Remove this item">×</a> </td> -->
                          <td class="product-thumbnail">
-                             <a href="#"><img src="assets/images/nike.jpg" alt="" width="100"></a>
+                             <a href="#"><img src="assets/images/csr-img/donate.jpg" alt="" width="100"></a>
                          </td>
                          <td class="product-name">Student Benches required at Govt Girls School, Panruti, Villupuram Dt.</td>
                          <td class="product-price">
-                             <span class=" amount">25<br><span class="price">$</span>23.00</span>
+                             <span class=" amount">25<br><span class="price">&#8377;</span>23.00</span>
                          </td>
                          <td class="product-quantity" data-title="Quantity">
                              <div class="quantity buttons_added">
@@ -56,19 +57,19 @@
                              </div>
                          </td>
                          <td class="product-subtotal" data-title="Total">
-                             <span class="price-amount"><span>$</span>69.00</span>
+                             <span class="price-amount"><span>&#8377;</span>69.00</span>
                          </td>
                      </tr>
                      <tr class="cart_item">
                          <!-- <td class="product-remove">
                              <a href="#" class="remove" title="Remove this item">×</a> </td> -->
                          <td class="product-thumbnail">
-                             <a href="#"><img src="assets/images/nike.jpg" alt="" width="100"></a>
+                             <a href="#"><img src="assets/images/csr-img/img1.jpeg" alt="" width="100"></a>
                          </td>
                          <td class="product-name">
                              <a href="#">Student Benches required at Govt Girls School, Panruti, Villupuram Dt.</a> </td>
                          <td class="product-price">
-                             <span class=" amount">20<br><span class="price">$</span>23.00</span>
+                             <span class=" amount">20<br><span class="price">&#8377;</span>23.00</span>
                          </td>
                          <td class="product-quantity" data-title="Quantity">
                              <div class="quantity buttons_added">
@@ -76,19 +77,19 @@
                              </div>
                          </td>
                          <td class="product-subtotal" data-title="Total">
-                             <span class="price-amount"><span>$</span>69.00</span>
+                             <span class="price-amount"><span>&#8377;</span>69.00</span>
                          </td>
                      </tr>
                      <tr class="cart_item">
                             <!-- <td class="product-remove">
                                 <a href="#" class="remove" title="Remove this item">×</a> </td> -->
                             <td class="product-thumbnail">
-                                <a href="#"><img src="assets/images/nike.jpg" alt="" width="100"></a>
+                                <a href="#"><img src="assets/images/csr-img/img2.jpeg" alt="" width="100"></a>
                             </td>
                             <td class="product-name">
                                 <a href="#">Student Benches required at Govt Girls School, Panruti, Villupuram Dt.</a> </td>
                             <td class="product-price">
-                                <span class=" amount">20<br><span class="price">$</span>23.00</span>
+                                <span class=" amount">20<br><span class="price">&#8377;</span>23.00</span>
                             </td>
                             <td class="product-quantity" data-title="Quantity">
                                 <div class="quantity buttons_added">
@@ -96,19 +97,19 @@
                                 </div>
                             </td>
                             <td class="product-subtotal" data-title="Total">
-                                <span class="price-amount"><span>$</span>69.00</span>
+                                <span class="price-amount"><span>&#8377;</span>69.00</span>
                             </td>
                         </tr>
                         <tr class="cart_item">
                                 <!-- <td class="product-remove">
                                     <a href="#" class="remove" title="Remove this item">×</a> </td> -->
                                 <td class="product-thumbnail">
-                                    <a href="#"><img src="assets/images/nike.jpg" alt="" width="100"></a>
+                                    <a href="#"><img src="assets/images/csr-img/img3.jpg" alt="" width="100"></a>
                                 </td>
                                 <td class="product-name">
                                     <a href="#">Student Benches required at Govt Girls School, Panruti, Villupuram Dt.</a> </td>
                                 <td class="product-price">
-                                    <span class=" amount">20<br><span class="price">$</span>23.00</span>
+                                    <span class=" amount">20<br><span class="price">&#8377;</span>23.00</span>
                                 </td>
                                 <td class="product-quantity" data-title="Quantity">
                                     <div class="quantity buttons_added">
@@ -116,7 +117,7 @@
                                     </div>
                                 </td>
                                 <td class="product-subtotal" data-title="Total">
-                                    <span class="price-amount"><span>$</span>69.00</span>
+                                    <span class="price-amount"><span>&#8377;</span>69.00</span>
                                 </td>
                             </tr>
                      <tr>
@@ -124,14 +125,14 @@
                                 <strong><span>Total</span></strong>                                   
                          </td>
                          <td class="product-subtotal" data-title="Total">
-                                <strong><span class="amount"><span class="currency-symbol">$</span>167.00</span></strong>
+                                <strong><span class="amount"><span class="currency-symbol">&#8377;</span>167.00</span></strong>
                          </td>
                      </tr>
                  </tbody>
              </table>
              <div class="pt-1" style="text-align: right;">
                     <button mat-raised-button color="primary" class="mr-1 mb-1">Will Contribute the above in kind</button>
-                    <button mat-raised-button color="primary" class="mr-1 mb-1">Proceed for Payment</button>
+                    <button [routerLink]="['/authentication']" mat-raised-button style="background-color:rgb(69, 189, 189);color:white" >Proceed for Payment</button>
                   </div>
          </form>
          <!-- <div class="clearfix order-total">
@@ -140,12 +141,12 @@
                  <table class="table-responsive" cellspacing="0">
                      <tr class="cart-subtotal">
                          <th>Subtotal</th>
-                         <td><span class="amount"><span class="currency-symbol">$</span>167.00</span>
+                         <td><span class="amount"><span class="currency-symbol">&#8377;</span>167.00</span>
                          </td>
                      </tr>
                      <tr class="order-total">
                          <th>Total</th>
-                         <td><strong><span class="amount"><span class="currency-symbol">$</span>167.00</span></strong> </td>
+                         <td><strong><span class="amount"><span class="currency-symbol">&#8377;</span>167.00</span></strong> </td>
                      </tr>
                  </table>
                  <div class="order-checkout">
@@ -176,24 +177,31 @@
                     <mat-radio-button name="group1" class="pb-1">State School Dev Fund</mat-radio-button> 
                     <mat-radio-button name="group1">District School Dev Fund</mat-radio-button>
                     <mat-form-field style="width: 100%" class="pl-1">
-                            <mat-select placeholder="Select District" [(ngModel)]="currentDrink" [required]="isRequired" [disabled]="isDisabled" #drinkControl="ngModel">
-                                    <mat-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
-                                        {{ drink.viewValue }}
+                            <mat-select placeholder="Select District"  [required]="isRequired" [disabled]="isDisabled" >
+                                    <mat-option *ngFor="let item of districtList" [value]="item.id" >
+                                        {{ item.value }}
                                     </mat-option>
                                 </mat-select>
                     </mat-form-field> 
                     <mat-radio-button name="group1">School Dev Fund</mat-radio-button> 
                     <mat-form-field style="width: 100%" class="pl-1">
-                            <mat-select placeholder="Select School" [(ngModel)]="currentDrink" [required]="isRequired" [disabled]="isDisabled" #drinkControl="ngModel">
-                                    <mat-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
-                                        {{ drink.viewValue }}
+                            <mat-select placeholder="Select District"  [required]="isRequired" [disabled]="isDisabled" >
+                                    <mat-option *ngFor="let item of districtList" [value]="item.id" >
+                                        {{ item.value }}
+                                    </mat-option>
+                                </mat-select>
+                    </mat-form-field> 
+                    <mat-form-field style="width: 100%" class="pl-1">
+                            <mat-select placeholder="Select School" [required]="isRequired" [disabled]="isDisabled" >
+                                    <mat-option *ngFor="let item of schoolList" [value]="item.id" >
+                                        {{ item.value }}
                                     </mat-option>
                                 </mat-select>
                     </mat-form-field>  
                     <mat-form-field dividerColor="warn" class="ml-xs mr-xs" style="width: 100%;">
                             <textarea matInput placeholder="Remarks" value="Some Text ..."></textarea>
                           </mat-form-field>  
-                    <button class="mat-green" mat-raised-button>Proceed for Payment</button>                      
+                    <button [routerLink]="['/authentication']" class="mat-green" mat-raised-button>Proceed for Payment</button>                      
                 </div>
     </mat-card-content>
 </mat-card>
diff --git a/ng8-seed/src/app/components/contribute/contribute.component.scss b/ng8-seed/src/app/components/contribute/contribute.component.scss
index 606ee32..3922a08 100644
--- a/ng8-seed/src/app/components/contribute/contribute.component.scss
+++ b/ng8-seed/src/app/components/contribute/contribute.component.scss
@@ -80,4 +80,30 @@
         .calculated-shipping{
             width: 100%;
         }
-    }
\ No newline at end of file
+    }
+     .footer {
+    margin:0;
+    width:100%;
+    overflow: hidden;
+  position: relative;
+  // bottom: 10px;
+  top:20px;
+  // margin:0;
+  width: 100%;
+  padding-left:10px;
+  /* Set the fixed height of the footer here */
+  height: 40px;
+  line-height: 60px;
+  background-color:rgb(69, 189, 189);
+}
+.footer h5{
+    font-size: 13px;
+    color:white;
+    font-weight: bold;
+  position: absolute;
+  top: 1%;
+  left: 50%;
+  -moz-transform: translateX(-50%) translateY(-50%);
+  -webkit-transform: translateX(-50%) translateY(-50%);
+  transform: translateX(-50%) translateY(-50%);
+}
\ No newline at end of file
diff --git a/ng8-seed/src/app/components/contribute/contribute.component.ts b/ng8-seed/src/app/components/contribute/contribute.component.ts
index bdc1a9c..40ae12e 100644
--- a/ng8-seed/src/app/components/contribute/contribute.component.ts
+++ b/ng8-seed/src/app/components/contribute/contribute.component.ts
@@ -38,9 +38,55 @@ export class ContributeComponent implements OnInit {
     value: 'milk-8',
     viewValue: 'Milk'
   }];
+  districtList=[{
+    id:"1",
+    value:"Chennai"
+  },{
+    id:"2",
+    value:"Vellore"
+  },{
+    id:"3",
+    value:"Thiruvannamalai"
+  },{
+    id:"4",
+    value:"Kanchipuram"
+  },{
+    id:"5",
+    value:"Nagapattinam"
+  },]
+  schoolList=[{
+    id:"1",
+    value:"Govt High School"
+  },
+  {
+    id:"2",
+    value:"Govt Primary School"
+  }]
+  categoryList=[{
+    id:"1",
+    value:"Building"
+  },
+  {
+    id:"2",
+    value:"Furnitures"
+  },
+  {
+    id:"2",
+    value:"Students kit"
+  }]
   constructor() { }
 
   ngOnInit() { 
   }
 
+  ngAfterViewInit() {
+    // Hack: Scrolls to top of Page after page view initialized
+    let top = document.getElementById('top');
+    console.log("d",top);
+    if (top !== null) {
+      top.scrollIntoView();
+      top = null;
+    }
+  }
+
 }
diff --git a/ng8-seed/src/app/components/project-detail/project-detail.component.html b/ng8-seed/src/app/components/project-detail/project-detail.component.html
index 38e265b..3643425 100644
--- a/ng8-seed/src/app/components/project-detail/project-detail.component.html
+++ b/ng8-seed/src/app/components/project-detail/project-detail.component.html
@@ -1,4 +1,5 @@
 <!-- <app-layout-admin></app-layout-admin> -->
+<div id="top"></div>
 <mat-card class="p-2 main-detail-product">
         <div fxLayout="row wrap">
             <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="30" fxFlex.lg="50" fxFlex.xl="30">
@@ -34,7 +35,7 @@
                     <div class="price">
                         <!-- <h2>$120<span class="sale">$129</span></h2> -->
                         <h4>Thiruvannamalai</h4>
-                        <button mat-raised-button  class="button-cyan">Contribute</button>
+                        <button mat-raised-button [routerLink]="['/contribute']" class="button-cyan">Contribute</button>
                     </div>
                     <div class="separator"></div>
                     <p>Tamil Nadu is one of the most literate states in India. The state's literacy rate is 80.33% in 2011, which is above the national average. A survey conducted by the Industry body Assocham ranks Tamil Nadu top among Indian states with about 100% Gross Enrollment Ratio (GER) in primary and upper primary education.</p>
diff --git a/ng8-seed/src/app/components/project-detail/project-detail.component.ts b/ng8-seed/src/app/components/project-detail/project-detail.component.ts
index e373d97..f3abe3f 100644
--- a/ng8-seed/src/app/components/project-detail/project-detail.component.ts
+++ b/ng8-seed/src/app/components/project-detail/project-detail.component.ts
@@ -28,6 +28,16 @@ export class ProjectDetailComponent implements OnInit {
   ngOnInit() {
   }
 
+  ngAfterViewInit() {
+    // Hack: Scrolls to top of Page after page view initialized
+    let top = document.getElementById('top');
+    console.log("d",top);
+    if (top !== null) {
+      top.scrollIntoView();
+      top = null;
+    }
+  }
+
   thumbnailClick(index){
     this.sliderimg.goToSlide(index);
   }
diff --git a/ng8-seed/src/app/dashboard/dashboard.component.html b/ng8-seed/src/app/dashboard/dashboard.component.html
index d16fa95..f19f7c5 100644
--- a/ng8-seed/src/app/dashboard/dashboard.component.html
+++ b/ng8-seed/src/app/dashboard/dashboard.component.html
@@ -1,22 +1,33 @@
 <!-- <app-layout></app-layout> -->
+<div id="top"></div>
 <div fxLayout="row wrap">
   <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="200" fxFlex.xl="100"> 
     <div class="form-bg">
       <!-- <div class="container"> -->
-        <div fxLayout="row wrap" fxLayoutAlign="center" class="mb-2 pt-3">
-            <div fxLayoutAlign="center" fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="18.33" fxFlex.lg="18.33" fxFlex.xl="18.33" fxFlex="100">
-               <mat-card class="mc-1" style="width: 75%;height: 160px;"> 
+         <div fxLayout="column" fxLayoutAlign="center">
+            <!-- <div fxFlex="100"> -->
+               <div style="margin: 0px;" fxLayoutAlign="center"  fxFlex="10">
+               <h5 class="flex-text">There is no exercise better for the heart than reaching down and lifting people up.</h5>
+            </div>
+            <!-- </div> -->
+         </div>
+        
+        <div fxLayout="row wrap" fxLayoutAlign="center" >
+           <!-- <div > -->
+            <div fxLayoutAlign="center" fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="25.33" fxFlex.lg="25.33" fxFlex.xl="25.33" fxFlex="100" *ngFor="let flex_value of flexContent;let i=index" style="margin-top:30px;">
+               <mat-card [class]="flex_value.card_class" style="width: 75%;height: 160px;"> 
                   <div fxFlex.gt-sm="100%" fxLayoutAlign="center center" fxFlex="100" class="m-gap p-gap mb-0 icon-tp">
                       <div class="text-center m-color">
-                         <i class="fa fa-university fa-3x"></i>
+                         <i [class]="flex_value.icon"></i>
                          <div class="d-inline-block">
-                            <h5>School</h5>
+                            <h5>{{flex_value.name}}</h5>
                          </div>
                       </div>
                    </div>
                </mat-card>
             </div>
-            <div fxLayoutAlign="center" fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="18.33" fxFlex.lg="18.33" fxFlex.xl="18.33" fxFlex="100">
+         <!-- </div> -->
+            <!-- <div fxLayoutAlign="center" fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="18.33" fxFlex.lg="18.33" fxFlex.xl="18.33" fxFlex="100">
                 <mat-card class="mc-2" style="width: 75%;height: 160px;"> 
                     <div fxFlex.gt-sm="100%" fxLayoutAlign="center center" fxFlex="100" class="m-gap p-gap mb-0 icon-tp">
                         <div class="text-center m-color">
@@ -57,7 +68,7 @@
                     <div fxFlex.gt-sm="100%" fxLayoutAlign="center center" fxFlex="100" class="m-gap p-gap mb-0 icon-tp">
                         <div class="text-center m-color">
                            <i class="fa fa-university fa-3x"></i>
-                           <div class="d-inline-block">
+                           <div >
                               <h5>School</h5>
                            </div>
                         </div>
@@ -125,7 +136,7 @@
                         </div>
                      </div> 
                   </mat-card>
-             </div>
+             </div> -->
          </div>
         <!-- </div> -->
     </div>
diff --git a/ng8-seed/src/app/dashboard/dashboard.component.scss b/ng8-seed/src/app/dashboard/dashboard.component.scss
index c354135..446c428 100644
--- a/ng8-seed/src/app/dashboard/dashboard.component.scss
+++ b/ng8-seed/src/app/dashboard/dashboard.component.scss
@@ -16,21 +16,77 @@ $p: 12px;
 // }
 .mc-1{
     background-color: rgba(51,211,192,0.9);
+    z-index: 4;
+}
+.mc-1 :hover{
+    cursor: pointer;
+    background-color: rgba(65, 158, 147, 0.9);
+    i{
+        font-size:52px;
+        // padding:10px;
+       
+    }
+}
+.mc-2 :hover{
+    background-color: rgba(1, 152, 172, 0.9);
+    cursor: pointer;
+    i{
+        font-size:52px;
+       
+    }
+}
+.mc-3 :hover{ 
+    background-color: rgb(0, 126, 175);
+    cursor: pointer;
+    i{
+        font-size:52px;
+       
+    }
+}
+
+.mc-4 :hover{
+    background-color: rgba(5, 107, 170, 0.9);
+    cursor: pointer;
+    i{
+        font-size:52px;
+       
+    }
+}
+.mc-5 :hover{
+    background-color: rgb(102, 90, 177);
+    cursor: pointer;
+    i{
+        font-size:52px;
+       
+    }
+}
+.mc-6 :hover{
+    background-color: rgba(180, 143, 69, 0.9);
+    cursor: pointer;
+    i{
+        font-size:52px;
+       
+    }
 }
 .mc-2{
+    z-index: 4;
     background-color: rgba(0,190,214,0.9);
 }
 .mc-3{
     background-color: rgba(0,165,228,0.9);
+    z-index: 4;
 }
 .mc-4{
     background-color: rgba(0,136,223,0.9);
+    z-index: 4;
 }
 .mc-5{
     background-color: rgba(111,99,195,0.9);
+    z-index: 4;
 }
 .mc-6{
     background-color: rgba(255,198,88,0.9);
+    z-index: 4;
 }
 .mc-7{
     background-color: rgba(255,148,92,0.9);
@@ -43,10 +99,23 @@ $p: 12px;
 }
 .mc-10{
     background-color: rgba(150,55,144,0.9);
+    
 }
 .m-color{
     color: #fff !important;
 }
+.flex-text{
+    color:white;
+    font-style: oblique;
+    font-size: 22px;
+    z-index: 2;
+}
+.flex-text2{
+    color:white;
+    font-style: oblique;
+    font-size: 18px;
+    z-index: 2;
+}
 .form-bg{
     height: 80vh;
     min-height: calc(54vh + 70px);
diff --git a/ng8-seed/src/app/dashboard/dashboard.component.ts b/ng8-seed/src/app/dashboard/dashboard.component.ts
index d92fb89..46c2c80 100644
--- a/ng8-seed/src/app/dashboard/dashboard.component.ts
+++ b/ng8-seed/src/app/dashboard/dashboard.component.ts
@@ -23,10 +23,54 @@ export class DashboardComponent {
     // url:'https://cdn.vox-cdn.com/uploads/chorus_image/image/56789263/akrales_170919_1976_0104.0.jpg',
     url:'assets/images/csr-img/ban3.jpg',
     caption:'Third'
-  }
-  
-]
+  }]
+
+  flexContent=[{
+    id:1,
+    icon:'fa fa-university fa-3x',
+    name:'School',
+    card_class:"mc-1"
+  },
+  {
+    id:2,
+    icon:'fa fa-building fa-3x',
+    name:'Building',
+    card_class:'mc-2'
+  },
+  {
+    id:3,
+    icon:'fa fa-laptop fa-3x',
+    name:'Furniture',
+    card_class:'mc-3'
+  },
+  {
+    id:4,
+    icon:'fa fa-child fa-3x',
+    name:'Uniforms',
+    card_class:'mc-4'
+  },
+  {
+    id:5,
+    icon:'fa fa-briefcase fa-3x',
+    name:'Bags',
+    card_class:'mc-5'
+  },
+  {
+    id:6,
+    icon:'fa fa-book fa-3x',
+    name:'Kit',
+    card_class:'mc-6'
+  }]
   constructor() {
     this.txt=this.txt;
   }
+  ngAfterViewInit() {
+    // Hack: Scrolls to top of Page after page view initialized
+    let top = document.getElementById('top');
+    console.log("d",top);
+    if (top !== null) {
+      top.scrollIntoView();
+      top = null;
+    }
+  }
 }
diff --git a/ng8-seed/src/assets/styles/scss/_material.variables.scss b/ng8-seed/src/assets/styles/scss/_material.variables.scss
index 3bd0a9f..33789f0 100644
--- a/ng8-seed/src/assets/styles/scss/_material.variables.scss
+++ b/ng8-seed/src/assets/styles/scss/_material.variables.scss
@@ -4,6 +4,7 @@
 
 @import '~@angular/material/theming';
 $primary: mat-palette($mat-deep-purple);
+$secondary:rgb(69, 189, 189);
 $accent:  mat-palette($mat-amber, A200, A100, A400);
 $warn: mat-palette($mat-red);
 $theme: mat-light-theme($primary, $accent, $warn);
diff --git a/ng8-seed/src/assets/styles/scss/core/_sessions.scss b/ng8-seed/src/assets/styles/scss/core/_sessions.scss
index 3a0f7f2..270978c 100644
--- a/ng8-seed/src/assets/styles/scss/core/_sessions.scss
+++ b/ng8-seed/src/assets/styles/scss/core/_sessions.scss
@@ -8,7 +8,7 @@
 }
 
 .form-bg {
-    background-image: url("/../../../assets/images/login.jpg");
+    background-image: url("assets/images/login.jpg");
 }
 
 .form-bg {