diff --git a/ng8-seed/src/app/components/contribute/contribute.component.html b/ng8-seed/src/app/components/contribute/contribute.component.html
index e3ca194..b88588b 100644
--- a/ng8-seed/src/app/components/contribute/contribute.component.html
+++ b/ng8-seed/src/app/components/contribute/contribute.component.html
@@ -2,7 +2,7 @@
   <!--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"> -->
-<mat-card class="p-2" fxFlex="70%" fxFlex.xs="100" fxFlex.sm="100">
+<mat-card class="p-2" fxFlex="71%" fxFlex.xs="100" fxFlex.sm="100">
         <mat-card-title class="mb-1"><h5 class="mt-0 text-center">Contribute to Specific Need </h5></mat-card-title>
         <hr>
          <form [formGroup]="Contribute">
@@ -51,54 +51,54 @@
       
           <!-- Requirement Column -->
           <!-- <ng-container matColumnDef="Requirement">
-            <th style="width: 15% !important;" mat-header-cell *matHeaderCellDef mat-sort-header></th>
+            <th style="width: 15% !important;" mat-header-cell *matHeaderCellDef ></th>
             <td style="width: 15% !important;" mat-cell *matCellDef="let row" class="product-thumbnail"><img src="{{row.img_url}}" onerror="this.onerror=null;this.src='assets/images/csr-img/error_img.jpg';" alt="School Img" width="70"></td>
           </ng-container> -->
 
           <!-- Item Need Column -->
           <ng-container matColumnDef="Item Need">
-            <th style="width: 15% !important;text-align: right;float: center" mat-header-cell *matHeaderCellDef mat-sort-header>Item Needed</th>
-            <td style="width: 15% !important;" mat-cell *matCellDef="let row" class="product-thumbnail"><span> {{row.material_name}} </span></td>
+            <th style="width: 25% !important;text-align: right;float: center" mat-header-cell *matHeaderCellDef mat-sort-header>Item Needed</th>
+            <td style="width: 25% !important;" mat-cell *matCellDef="let row" class="product-thumbnail"><span> {{row.material_name}} </span></td>
           </ng-container>
 
           <!-- School Column -->
           <ng-container matColumnDef="School">
-            <th style="width: 25% !important;text-align: center !important;" mat-header-cell *matHeaderCellDef mat-sort-header>School</th>
+            <th style="width: 25% !important;text-align: center !important;" mat-header-cell *matHeaderCellDef  mat-sort-header>School</th>
             <td style="width: 25% !important;" mat-cell *matCellDef="let row"> <a (click)="goToProjectDet(row)">{{row.school_name}}</a>, {{row.block_name}} Block, {{row.district_name}} District.</td>
           </ng-container>
       
           <!-- Quantity Column -->
           <ng-container matColumnDef="Required Qty">
-            <th style="width: 8% !important;" mat-header-cell *matHeaderCellDef mat-sort-header> Required Qty </th>
+            <th style="width: 8% !important;text-align: center;" mat-header-cell *matHeaderCellDef > Required Qty </th>
             <td style="width: 8% !important;text-align: center;" mat-cell *matCellDef="let row"> {{row.qty}}</td>
           </ng-container>
 
           <ng-container matColumnDef="Received Qty">
-              <th style="width: 10% !important;" mat-header-cell *matHeaderCellDef mat-sort-header> Received Qty </th>
-              <td style="width: 10% !important;text-align: center;" mat-cell *matCellDef="let row"> {{row.received_qty}}</td>
+              <th style="width: 8% !important;text-align: center;" mat-header-cell *matHeaderCellDef > Received Qty </th>
+              <td style="width: 8% !important;text-align: center;" mat-cell *matCellDef="let row"> {{row.received_qty}}</td>
             </ng-container>
             <ng-container matColumnDef="balance Qty">
-                <th style="width: 8% !important;" mat-header-cell *matHeaderCellDef mat-sort-header> Balance Qty </th>
+                <th style="width: 8% !important;text-align: center;" mat-header-cell *matHeaderCellDef > Balance Qty </th>
                 <td style="width: 8% !important;text-align: center;" mat-cell *matCellDef="let row"> {{row.qty-row.received_qty <= 0 ? '' : row.qty-row.received_qty }}</td>
               </ng-container>
       
           <!-- Sponsor Column -->
           <ng-container matColumnDef="Sponsor Qty">
-            <th style="width: 10% !important;" mat-header-cell *matHeaderCellDef mat-sort-header> Sponsored Qty </th>
-            <td style="width: 10% !important;" mat-cell *matCellDef="let row;let i = index"> <input step="1" min="1" max="" title="Qty" [(ngModel)]="sponsor_qty[i]" class="text" size="2" type="number" (change)="somethingChanged($event.target.value,i,row.cost_per_unit,row.mat_id,row)" style="width: 100% !important;text-align: center;"> </td>
+            <th style="width: 10% !important;text-align: center;" mat-header-cell *matHeaderCellDef > Sponsored Qty </th>
+            <td style="width: 10% !important;text-align: center;" mat-cell *matCellDef="let row;let i = index"> <input step="1" min="1" max="" title="Qty" [(ngModel)]="sponsor_qty[i]" class="text" size="2" type="number" (change)="somethingChanged($event.target.value,i,row.cost_per_unit,row.mat_id,row)" style="width: 100% !important;text-align: center;"> </td>
           </ng-container>
          
           <!-- price Column -->
           <ng-container matColumnDef="Cost Per Unit">
-            <th align="right" style="width: 20% !important;text-align: right;align-items: center" mat-header-cell *matHeaderCellDef mat-sort-header > Cost Per Unit (in Rs) </th>
-            <td style="width: 15% !important;text-align: right;;" mat-cell *matCellDef="let row;" > {{row.cost_per_unit === null?0:row.cost_per_unit}} </td>
+            <th align="right" style="width: 8% !important;text-align: center;" mat-header-cell *matHeaderCellDef  > Cost Per Unit<br> (in Rs) </th>
+            <td style="width: 8% !important;text-align: center;" mat-cell *matCellDef="let row;" > {{row.cost_per_unit === null?0:row.cost_per_unit}} </td>
             <!-- <td mat-footer-cell *matFooterCellDef> Total </td> -->
           </ng-container>
       
           <!-- Total Column -->
           <ng-container matColumnDef="Amount">
-            <th style="width: 20% !important;" mat-header-cell *matHeaderCellDef mat-sort-header style="text-align: right;"> Amount <br/>(in Rs) </th>
-            <td style="width: 20% !important;" mat-cell *matCellDef="let row ;let i=index" style="text-align: right;">{{Total[i]}} </td>
+            <th style="width: 8% !important;text-align: right;" mat-header-cell *matHeaderCellDef  style="text-align: right;"> Amount <br/>(in Rs) </th>
+            <td style="width: 8% !important;text-align: right;" mat-cell *matCellDef="let row ;let i=index" style="text-align: right;">{{Total[i]}} </td>
             <!-- <td mat-footer-cell *matFooterCellDef> {{somethingChanged()}} </td> -->
           </ng-container>
        
@@ -152,14 +152,14 @@
        <!--</mat-card-title> --> 
     <!-- </mat-card-header> -->
     <mat-card-content>
-        <p class="quote" style="margin-top:4px;text-align: center">&#8221;Alone we can do so little, together we can do so much&#8221; <br/>- Hellen Keller</p>
-        <h5 class="text-center"> Contribute to State School Development Fund</h5>
+        <p class="quote" style="margin-top:4px;text-align: center">&#8221;Alone we can do so little,<br> together we can do so much&#8221; <br/>- Hellen Keller</p>
+        <h5 class="text-center"> Contribute to<br> State School Development Fund</h5>
             <div fxLayout="column" fxLayoutAlign="start stretch">
 
                     <!-- <div fxLayout fxLayout="row"  fxLayout.xs="column"  fxLayoutGap.xs="0">  -->
                         <div class="text-center" fxFlex="100%" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="40" fxFlex.lg="100" fxFlex.xl="100">
                                 <mat-form-field appearance="outline" style="width: 70%;text-align: center;">
-                                        <input matInput type="tel" placeholder="Amount" [(ngModel)]="general_devlop_amt"  maxlength="10" (change)="dev_fund_change($event.target.value)" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
+                                        <input matInput type="tel" placeholder="Amount in Rs." [(ngModel)]="general_devlop_amt"  maxlength="10" (change)="dev_fund_change($event.target.value)" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
                                      </mat-form-field>
                             <!-- </div> -->
                             </div>
@@ -190,8 +190,8 @@
                     <mat-form-field dividerColor="warn" class="ml-xs mr-xs" style="width: 100%;" appearance="outline">
                             <textarea matInput placeholder="Comments" rows="5" [(ngModel)]="gen_dev_fund_remarks"></textarea>
                           </mat-form-field>  
-                    <button class="mat-green" mat-raised-button style="color:white" (click)="storeData_session()">Proceed to Contribute</button>                      
-                    <p class="quote">&#8221;We make a living by what we get. But we make a life by what we give&#8221; <br/>- Winston Churchill</p>
+                    <button mat-raised-button style="background-color:rgb(69, 189, 189);color:white" (click)="storeData_session()">Proceed to Contribute</button>                      
+                    <p class="quote">&#8221;We make a living by what we get.<br> But we make a life by what we give&#8221; <br/>- Winston Churchill</p>
                 </div>
     </mat-card-content>
 </mat-card>
diff --git a/ng8-seed/src/app/components/login/login-component.html b/ng8-seed/src/app/components/login/login-component.html
index 0284477..03e5aa5 100644
--- a/ng8-seed/src/app/components/login/login-component.html
+++ b/ng8-seed/src/app/components/login/login-component.html
@@ -7,7 +7,7 @@
                         <div class="close_icon" (click)="closeDialog()">
                         <mat-icon  >close</mat-icon>
                     </div>
-                        <h2 class="base-border">Login Form</h2>
+                        <h2 class="base-border">Login</h2>
                         <p>Enter Your Login Details</p>
                         <form [formGroup]="loginForm">
                             <div fxLayout="column" fxLayoutAlign="start stretch">
diff --git a/ng8-seed/src/app/components/payment/payment.component.html b/ng8-seed/src/app/components/payment/payment.component.html
index 0f15d61..e6c9cf2 100644
--- a/ng8-seed/src/app/components/payment/payment.component.html
+++ b/ng8-seed/src/app/components/payment/payment.component.html
@@ -91,8 +91,8 @@
                </mat-card>   
          </div>
             <div *ngIf="payment_mode == '2' && contribute_type != '2'" class="ac_det">
-               <p>A/c Name : Tamil Nadu State Parent Teacher</p>
-               <p>Association : CSR Funds</p>
+               <p>A/c Name : Tamil Nadu State Parent Teacher Association - CSR Funds</p>
+               <!-- <p>Association : CSR Funds</p> -->
                <p>A/C Number : 142301000022944</p>
                <p>MICR : 600020076</p>
                <p>IFSC : IOBA0001423</p>
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 b4c1590..6872012 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
@@ -40,7 +40,105 @@
                           <button mat-raised-button [routerLink]="['/contribute']" class="button-cyan">Contribute</button> 
                     </div> -->
                     <div class="separator"></div>
-                    <div fxLayout fxLayout="row"  fxLayout.xs="column"  fxLayoutGap.xs="0" class="mt-1">
+                    <!-- <div fxLayout="row wrap">
+                        <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" fxFlex="100" class="m-gap p-gap">
+                           <mat-card>
+                              <div class="card-wheather grad-blue">
+                                 <div class="city">New Orders</div>
+                                 <div class="date">This Week</div>
+                                 <div class="weather">
+                                    <div class="sun d-flex justify-content-between">
+                                       <i class="fa fa-shopping-bag fa-3x "></i>
+                                       <div class="temp ">190</div>
+                                    </div>
+                                 </div>
+                              </div>
+                           </mat-card>
+                        </div> 
+                     </div>
+                     <div fxLayout="row wrap">
+                        <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" fxFlex="100" class="m-gap p-gap">
+                           <mat-card>
+                              <div class="card-wheather grad-blue">
+                                 <div class="city">New Orders</div>
+                                 <div class="date">This Week</div>
+                                 <div class="weather">
+                                    <div class="sun d-flex justify-content-between">
+                                       <i class="fa fa-shopping-bag fa-3x "></i>
+                                       <div class="temp ">190</div>
+                                    </div>
+                                 </div>
+                              </div>
+                           </mat-card>
+                        </div> 
+                     </div> -->
+                     <div fxLayout="row wrap" fxLayoutAlign="center none">
+                        <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="45.33" fxFlex.lg="45.33" fxFlex.xl="45.33" fxFlex="100" class="p-gap">
+                           <mat-card class="grad-blue" style="padding:10px;height: 74px;"> 
+                               <h5 class="temp mt-0">Classes</h5>
+                               <h6 class="mt-0" style="text-align: right;">{{schoolInfo.low_class === '13' ? 'LKG': schoolInfo.low_class === '14' ? 'UKG' : schoolInfo.low_class === '15' ? 'Pre-kg' : schoolInfo.low_class}} - {{schoolInfo.high_class === '13' ? 'LKG': schoolInfo.high_class === '14' ? 'UKG' : schoolInfo.high_class === '15' ? 'Pre-kg' : schoolInfo.high_class}}</h6>
+                           </mat-card>
+                        </div> 
+                     </div>
+                     <div fxLayout="row wrap">
+                            <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="45.33" fxFlex.lg="45.33" fxFlex.xl="45.33" fxFlex="100" class="p-gap">
+                               <mat-card class="grad-blue" style="padding:10px;height: 74px;"> 
+                                   
+                                   <div fxLayout fxLayout="row" fxLayoutGap.xs="0">
+                                        <div fxFlex.sm="50" fxFlex.xs="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="p-gap">
+                                            <h5 class="temp mt-0">Students</h5>   
+                                        </div>
+                                        <div fxLayoutAlign="end none" fxFlex.sm="50" fxFlex.xs="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="p-gap">
+                                               
+                                                    <h5 class="temp mt-0">&nbsp;{{schoolInfo.total}}</h5> 
+                                        </div>
+                                   </div>
+                                   <div fxLayout fxLayout="row" fxLayoutGap.xs="0">  
+                                        <div fxLayoutAlign="end none" fxFlex.sm="75" fxFlex.xs="75" fxFlex.md="75" fxFlex.lg="75" fxFlex.xl="75"class="p-gap">
+                                               
+                                                    <i class="fa fa-male fa-2x "></i>
+                                                    <div class="temp ">&nbsp;{{schoolInfo.total_b}}</div> 
+                                        </div>
+                                        <div fxLayoutAlign="end none" fxFlex.sm="25" fxFlex.xs="25" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25" class="p-gap">
+                                              
+                                                    <i class="fa fa-female fa-2x "></i>
+                                                    <div class="temp ">&nbsp;{{schoolInfo.total_g}}</div>
+                                               
+                                        </div>
+                                        
+                                    </div> 
+                                   <!-- <h6 class="mt-0" style="text-align: right;">{{schoolInfo.total}}</h6> -->
+                               </mat-card>
+                            </div> 
+                            <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="45.33" fxFlex.lg="45.33" fxFlex.xl="45.33" fxFlex="100" class="p-gap">
+                                    <mat-card class="grad-blue" style="padding:10px;height: 74px;"> 
+                                        
+                                        <div fxLayout fxLayout="row" fxLayoutGap.xs="0">
+                                             <div fxFlex.sm="50" fxFlex.xs="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="p-gap">
+                                                 <h5 class="temp mt-0">Staff</h5>   
+                                             </div>
+                                             <div fxLayoutAlign="end none" fxFlex.sm="50" fxFlex.xs="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="p-gap">
+                                                    
+                                                         <h5 class="temp mt-0">&nbsp;{{schoolInfo.totstaff}}</h5> 
+                                             </div>
+                                        </div>
+                                        <div fxLayout fxLayout="row" fxLayoutGap.xs="0">  
+                                             <div fxLayoutAlign="end none" fxFlex.sm="40" fxFlex.xs="40" fxFlex.md="40" fxFlex.lg="40" fxFlex.xl="40"class="p-gap">
+                                                     
+                                                         <div class="temp ">&nbsp;{{schoolInfo.teach_tot}}<span class="mt-0 mb-0" style="font-size:10px;margin-left: 12px;">Teaching</span></div> 
+                                             </div>
+                                             <div fxLayoutAlign="end none" fxFlex.sm="60" fxFlex.xs="60" fxFlex.md="60" fxFlex.lg="60" fxFlex.xl="60" class="p-gap">
+                                                    
+                                                         <div class="temp ">&nbsp;{{schoolInfo.nonteach_tot}}<span class="mt-0 mb-0" style="font-size:10px;margin-left: 10px;">Non-Teaching</span></div>
+                                                    
+                                             </div>
+                                             
+                                         </div> 
+                                        <!-- <h6 class="mt-0" style="text-align: right;">{{schoolInfo.total}}</h6> -->
+                                    </mat-card>
+                                 </div> 
+                         </div> 
+                    <!-- <div fxLayout fxLayout="row"  fxLayout.xs="column"  fxLayoutGap.xs="0" class="mt-1">
                         <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
                                 <h5 class="mt-0">Classes</h5>
                         </div>
@@ -48,8 +146,7 @@
                         <div fxLayout fxLayout="row" fxLayoutGap.xs="0" class="mb-1">
                         <div fxLayoutAlign="center" fxFlex.sm="55.33" fxFlex.xs="55.33" fxFlex.md="43.33" fxFlex.lg="43.33" fxFlex.xl="43.33">
                                 <div class="sun d-flex">
-                                    <!-- <i class="fa fa-users fa-2x align-self-center"></i> -->
-                                    <div class="temp align-self-center">&nbsp;{{schoolInfo.low_class === '13' ? 'LKG': schoolInfo.low_class === '14' ? 'UKG' : schoolInfo.low_class === '15' ? 'Pre-kg' : schoolInfo.low_class}} - {{schoolInfo.high_class === '13' ? 'LKG': schoolInfo.high_class === '14' ? 'UKG' : schoolInfo.high_class === '15' ? 'Pre-kg' : schoolInfo.high_class}}</div>
+                                    <div class="temp ">&nbsp;{{schoolInfo.low_class === '13' ? 'LKG': schoolInfo.low_class === '14' ? 'UKG' : schoolInfo.low_class === '15' ? 'Pre-kg' : schoolInfo.low_class}} - {{schoolInfo.high_class === '13' ? 'LKG': schoolInfo.high_class === '14' ? 'UKG' : schoolInfo.high_class === '15' ? 'Pre-kg' : schoolInfo.high_class}}</div>
                                 </div>
                         </div>                         
                     </div>  
@@ -61,20 +158,19 @@
                             <div fxLayout fxLayout="row" fxLayoutGap.xs="0" class="mb-1">
                             <div fxLayoutAlign="center" fxFlex.sm="33.33" fxFlex.xs="33.33" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33">
                                     <div class="sun d-flex">
-                                        <!-- <i class="fa fa-users fa-2x align-self-center"></i> -->
-                                        <div class="temp align-self-center">&nbsp;{{schoolInfo.total}}</div>
+                                        <div class="temp ">&nbsp;{{schoolInfo.total}}</div>
                                     </div>
                             </div>
                             <div fxLayoutAlign="center" fxFlex.sm="33.33" fxFlex.xs="33.33" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33">
                                     <div class="sun d-flex">
-                                        <i class="fa fa-male fa-2x align-self-center"></i>
-                                        <div class="temp align-self-center">&nbsp;{{schoolInfo.total_b}}</div>
+                                        <i class="fa fa-male fa-2x "></i>
+                                        <div class="temp ">&nbsp;{{schoolInfo.total_b}}</div>
                                     </div>
                             </div>
                             <div fxLayoutAlign="center" fxFlex.sm="33.33" fxFlex.xs="33.33" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33">
                                     <div class="sun d-flex">
-                                        <i class="fa fa-female fa-2x align-self-center"></i>
-                                        <div class="temp align-self-center">&nbsp;{{schoolInfo.total_g}}</div>
+                                        <i class="fa fa-female fa-2x "></i>
+                                        <div class="temp ">&nbsp;{{schoolInfo.total_g}}</div>
                                     </div>
                             </div>
                             
@@ -87,24 +183,24 @@
                             <div fxLayout fxLayout="row" fxLayoutGap.xs="0" class="mb-2">
                             <div fxLayoutAlign="center" fxFlex.sm="33.33" fxFlex.xs="33.33" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33">
                                     <div class="sun d-flex"> 
-                                        <div class="temp align-self-center">&nbsp;{{schoolInfo.totstaff}}</div>
+                                        <div class="temp ">&nbsp;{{schoolInfo.totstaff}}</div>
                                     </div>
                             </div>
                             <div fxLayoutAlign="center" fxFlex.sm="33.33" fxFlex.xs="33.33" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33">
                                     <div class="sun d-flex"> 
-                                        <div class="temp align-self-center" style="text-align: center;">&nbsp;{{schoolInfo.teach_tot}}<br><p class="mt-0 mb-0" style="font-size:10px;margin-left: 12px;">Teaching</p></div>
+                                        <div class="temp " style="text-align: center;">&nbsp;{{schoolInfo.teach_tot}}<br><p class="mt-0 mb-0" style="font-size:10px;margin-left: 12px;">Teaching</p></div>
                                     </div>                                    
                             </div>
                             <div fxLayoutAlign="center" fxFlex.sm="33.33" fxFlex.xs="33.33" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33">
                                     <div class="sun d-flex"> 
-                                        <div class="temp align-self-center" style="text-align: center;">&nbsp;{{schoolInfo.nonteach_tot}}<br><p class="mt-0 mb-0" style="font-size:10px;margin-left: 10px;">Non-Teaching</p></div>
+                                        <div class="temp " style="text-align: center;">&nbsp;{{schoolInfo.nonteach_tot}}<br><p class="mt-0 mb-0" style="font-size:10px;margin-left: 10px;">Non-Teaching</p></div>
                                     </div>                                    
                             </div>
                             
-                        </div> 
+                        </div>  -->
                                                  
    
-                            <div fxLayout fxLayout="row"  fxLayout.xs="column"  fxLayoutGap.xs="0">
+                            <div class="mt-3" fxLayout fxLayout="row"  fxLayout.xs="column"  fxLayoutGap.xs="0">
                                 <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" fxLayoutAlign="center" class="m-gap p-gap">
                                     <button mat-raised-button (click)="toTop($event)" class="button-cyan">Contribute</button> 
                                 </div> 
diff --git a/ng8-seed/src/app/components/project-detail/project-detail.component.scss b/ng8-seed/src/app/components/project-detail/project-detail.component.scss
index b93293a..d7aad2b 100644
--- a/ng8-seed/src/app/components/project-detail/project-detail.component.scss
+++ b/ng8-seed/src/app/components/project-detail/project-detail.component.scss
@@ -259,3 +259,47 @@ table th {
    
     
   
+
+//wheather
+.card-wheather {
+  height: 220px;
+  color: #fff;
+}
+
+
+
+.city {
+
+  font-size: 26px;
+}
+
+.date {
+  font-size: 20px;
+  line-height: 40px;
+}
+
+.sun {
+  height: 70px;
+}
+
+.grad-blue {
+  background: linear-gradient(58deg, #f44336, #673ab7);
+  color: #fff;
+}
+
+.grad-green {
+  background: linear-gradient(58deg, #009688, #673ab7);
+  color: #fff;
+}
+
+.grad-red {
+  background: linear-gradient(58deg, #f44336, #673ab7);
+  color: #fff;
+}
+.card-wheather{
+  padding: 2rem;
+}
+.temp {
+  font-size: 14px;
+  display: inline-block;
+}
diff --git a/ng8-seed/src/app/components/project-list/project-list.component.html b/ng8-seed/src/app/components/project-list/project-list.component.html
index 1fb03e0..fbc8784 100644
--- a/ng8-seed/src/app/components/project-list/project-list.component.html
+++ b/ng8-seed/src/app/components/project-list/project-list.component.html
@@ -1,5 +1,5 @@
 <mat-card>
-        <mat-card-title><h5 class="mt-0">Projects</h5></mat-card-title>
+        <mat-card-title><h5 class="mt-0">Requirements</h5></mat-card-title>
         <hr><br/>
       
          <!-- <div fxLayout="row" fxLayoutAlign="center center" > -->
@@ -18,7 +18,7 @@
          <div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.md="23.33" fxFlex.lg="23.33" fxFlex.xl="23.33" class="m-gap p-gap" style="margin-left: 5px;" *ngFor="let schooldetails of school_list" (click)="getschDetails(schooldetails)"> 
             <div class="p-list-main mb-2">
                  <div class="p-list">                     
-                     <div class="top"><img src="{{schooldetails.images[0]}}" onerror="this.onerror=null;this.src='assets/images/csr-img/error_img.jpg';" alt=""></div>
+                     <div class="top"><img src="{{schooldetails.images[0]}}" onerror="this.onerror=null;this.src='assets/images/csr-img/error_img.jpg';"></div>
                      <div class="bottom">
                          <div class="left">
                              <div class="details" style="width: unset !important;">
@@ -54,6 +54,11 @@
                  </div>
              </div> 
         </div>
+         <div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.md="23.33" fxFlex.lg="23.33" fxFlex.xl="23.33" class="m-gap p-gap"> 
+            <mat-card style="height: 85%;" fxLayoutAlign="center center" [routerLink]="['/contribute']">
+            <h1 class="text"><span> More</span></h1>
+            </mat-card>
+        </div>
           
          <!-- <div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="23.33" fxFlex.lg="23.33" fxFlex.xl="23.33" class="m-gap p-gap"> -->
              <!-- <div class="p-list-main mb-2">
diff --git a/ng8-seed/src/app/components/project-list/project-list.component.scss b/ng8-seed/src/app/components/project-list/project-list.component.scss
index ed4e6d0..5fa4f86 100644
--- a/ng8-seed/src/app/components/project-list/project-list.component.scss
+++ b/ng8-seed/src/app/components/project-list/project-list.component.scss
@@ -197,3 +197,40 @@ mat-card{
     height: 100%;
     width:100%;
 }
+.text {
+    border-radius: 4px;
+    // background-color: #e91e63;
+    border: none;
+    color: #51caca;
+    text-align: center;
+    font-size: 30px;
+    padding: 5px;
+    width: 200px;
+    transition: all 0.5s;
+    cursor: pointer;
+  }
+  
+  .text span {
+    cursor: pointer;
+    display: inline-block;
+    position: relative;
+    transition: 0.5s;
+  }
+  
+  .text span:after {
+    content: '\00bb';
+    position: absolute;
+    opacity: 0;
+    top: 0;
+    right: -20px;
+    transition: 0.5s;
+  }
+  
+  .text:hover span {
+    padding-right: 25px;
+  }
+  
+  .text:hover span:after {
+    opacity: 1;
+    right: 0;
+  }
\ No newline at end of file
diff --git a/ng8-seed/src/app/components/req-list/req-list.component.html b/ng8-seed/src/app/components/req-list/req-list.component.html
index 64dff46..d3668a2 100644
--- a/ng8-seed/src/app/components/req-list/req-list.component.html
+++ b/ng8-seed/src/app/components/req-list/req-list.component.html
@@ -2,54 +2,54 @@
       
     <!-- Requirement Column -->
       <!-- <ng-container matColumnDef="Item Need">
-            <th style="width: 15% !important;text-align: right;float: center" mat-header-cell *matHeaderCellDef mat-sort-header>Item Needed</th>
+            <th style="width: 15% !important;text-align: right;float: center" mat-header-cell *matHeaderCellDef >Item Needed</th>
             <td style="width: 15% !important;" mat-cell *matCellDef="let row" class="product-thumbnail"><img src="{{row.img_url}}" onerror="this.onerror=null;this.src='assets/images/csr-img/error_img.jpg';" alt="School Img" width="70"><br/><span> {{row.material_name}} </span></td>
           </ng-container> -->
 
     <!-- Item Need Column -->
     <ng-container matColumnDef="Item Need">
-        <th style="width: 20% !important;text-align: right;float: center" mat-header-cell *matHeaderCellDef mat-sort-header>Item Needed</th>
+        <th style="width: 20% !important;" mat-header-cell *matHeaderCellDef >Item Needed</th>
         <td style="width: 20% !important;" mat-cell *matCellDef="let row" class="product-thumbnail"><span> {{row.material_name}} </span></td>
       </ng-container>
 
     <!-- School Column -->
     <ng-container matColumnDef="School">
-      <th style="width: 25% !important;text-align: center !important;" mat-header-cell *matHeaderCellDef mat-sort-header>School</th>
-      <td style="width: 25% !important;" mat-cell *matCellDef="let row"> <a [routerLink]="'/home/project-detail'">{{row.school_name}}</a>, {{row.block_name}} Block, {{row.district_name}} District.</td>
+      <th style="width: 26% !important;" mat-header-cell *matHeaderCellDef >School</th>
+      <td style="width: 26% !important;" mat-cell *matCellDef="let row"> <a [routerLink]="'/home/project-detail'">{{row.school_name}}</a>, {{row.block_name}} Block, {{row.district_name}} District.</td>
     </ng-container>
 
     <!-- Quantity Column -->
     <ng-container matColumnDef="Required Qty">
-      <th style="width: 10% !important;" mat-header-cell *matHeaderCellDef mat-sort-header> Required Qty </th>
-      <td style="width: 10% !important;" mat-cell *matCellDef="let row"> {{row.qty}}</td>
+      <th style="width: 10% !important;text-align: center !important;" mat-header-cell *matHeaderCellDef > Required Qty </th>
+      <td style="width: 10% !important;text-align: center !important;" mat-cell *matCellDef="let row"> {{row.qty}}</td>
     </ng-container>
 
     <ng-container matColumnDef="Received Qty">
-        <th style="width: 10% !important;;text-align: center;" mat-header-cell *matHeaderCellDef mat-sort-header> Received Qty </th>
+        <th style="width: 10% !important;;text-align: center;" mat-header-cell *matHeaderCellDef > Received Qty </th>
         <td style="width: 10% !important;text-align: center;" mat-cell *matCellDef="let row"> {{row.received_qty}}</td>
       </ng-container>
       <ng-container matColumnDef="balance Qty">
-            <th style="width: 8% !important;" mat-header-cell *matHeaderCellDef mat-sort-header> Balance Qty </th>
+            <th style="width: 8% !important;text-align: center !important;" mat-header-cell *matHeaderCellDef > Balance Qty </th>
             <td style="width: 8% !important;text-align: center;" mat-cell *matCellDef="let row"> {{row.qty-row.received_qty <= 0 ? '' : row.qty-row.received_qty }}</td>
           </ng-container>
 
     <!-- Sponsor Column -->
     <ng-container matColumnDef="Sponsor Qty">
-      <th style="width: 10% !important;text-align: center" mat-header-cell *matHeaderCellDef mat-sort-header> Sponsor Qty </th>
-      <td style="width: 10% !important;text-align: center" mat-cell *matCellDef="let row;let i = index"> {{row.sponsor_qty}} </td>
+      <th style="width: 10% !important;text-align: center;" mat-header-cell *matHeaderCellDef > Sponsor Qty </th>
+      <td style="width: 10% !important;text-align: center;" mat-cell *matCellDef="let row;let i = index"> {{row.sponsor_qty}} </td>
     </ng-container>
    
     <!-- price Column -->
     <ng-container matColumnDef="Cost Per Unit">
-      <th style="width: 10%!important;text-align: right" mat-header-cell *matHeaderCellDef mat-sort-header> Cost Per Unit<br/> (in Rs) </th>
-      <td style="width: 10% ;text-align: center" mat-cell *matCellDef="let row;" > {{row.cost_per_unit === null ? 0 : row.cost_per_unit}} </td>
+      <th style="width: 10%!important;text-align: center;" mat-header-cell *matHeaderCellDef > Cost Per Unit<br/> (in Rs) </th>
+      <td style="width: 10% ;text-align: center;" mat-cell *matCellDef="let row;" > {{row.cost_per_unit === null ? 0 : row.cost_per_unit}} </td>
       <!-- <td mat-footer-cell *matFooterCellDef> Total </td> -->
     </ng-container>
 
     <!-- Total Column -->
     <ng-container matColumnDef="Amount">
-      <th style="width: 20% !important;" mat-header-cell *matHeaderCellDef mat-sort-header> Amount (in Rs) </th>
-      <td style="width: 20% !important;" mat-cell *matCellDef="let row ;let i=index" style="text-align: right">{{row.amount}} </td>
+      <th style="width: 20% !important;text-align: right;" mat-header-cell *matHeaderCellDef > Amount (in Rs) </th>
+      <td style="width: 20% !important;text-align: right;" mat-cell *matCellDef="let row ;let i=index" style="text-align: right">{{row.amount}} </td>
       <!-- <td mat-footer-cell *matFooterCellDef> {{somethingChanged()}} </td> -->
     </ng-container>
  
diff --git a/ng8-seed/src/app/dashboard/dashboard.component.html b/ng8-seed/src/app/dashboard/dashboard.component.html
index 978fcdd..999af9b 100644
--- a/ng8-seed/src/app/dashboard/dashboard.component.html
+++ b/ng8-seed/src/app/dashboard/dashboard.component.html
@@ -50,24 +50,16 @@ showCaptions="true"
 <div class="mt-0">
     <mat-card-title><h5 class="mt-0 mb-1 text-center">Support Recieved</h5></mat-card-title>
     <hr style="border-top:2px solid rgb(81, 202, 202) !important;width:190px !important;">
-    <div fxLayout="row" class="text-center mt-1 mb-1">
-         <div fxFlex="50">
-               <h2 class="mt-0 logo_one" style="color: #f9a22b !important;"><span>1000+</span></h2>
-               <p>Desktop Computers</p>
-            </div>
-            <div fxFlex="50">
-               <h2 class="mt-0 logo_one" style="color: #000000 !important;"><span>75+</span></h2>
-               <p>Smart Boards</p>
+    <div fxLayout="row" class="text-center mt-2 mb-1">
+         <div fxFlex="100">
+               <h2 class="mt-0 logo_one" style="color: #f9a22b !important;"><span>18</span></h2>
+               <p>Supporters</p>
             </div>
       </div>
       <div fxLayout="row" class="text-center mt-1 mb-1">
-            <div fxFlex="50">
-                  <h2 class="mt-0 logo_one" style="color: #a978e0 !important;"><span>80+</span></h2>
-                  <p>Televisions</p>
-               </div>
-               <div fxFlex="50">
-                  <h2 class="mt-0 logo_one" style="color: #a978e0 !important;"><span>50+</span></h2>
-                  <p>Printers</p>
+            <div fxFlex="100">
+                  <h2 class="mt-0 logo_one" style="color: #a978e0 !important;"><span>Rs.80,00,000</span></h2>
+                  <p>Contributed</p>
                </div>
          </div> 
          <div fxLayout="row" class="text-center mt-1 mb-1">
diff --git a/ng8-seed/src/app/dashboard/dashboard.component.ts b/ng8-seed/src/app/dashboard/dashboard.component.ts
index 99f7fa9..31e1feb 100644
--- a/ng8-seed/src/app/dashboard/dashboard.component.ts
+++ b/ng8-seed/src/app/dashboard/dashboard.component.ts
@@ -20,7 +20,8 @@ export class DashboardComponent {
     {img: "assets/images/csr-img/TN_client_logo/9.png"},
     {img: "assets/images/csr-img/TN_client_logo/10.png"},
     {img: "assets/images/csr-img/TN_client_logo/11.png"},
-    {img: "assets/images/csr-img/TN_client_logo/12.png"}
+    {img: "assets/images/csr-img/TN_client_logo/12.png"},
+    {img: "assets/images/csr-img/TN_client_logo/13.png"}
   ];
   slideConfig = {"slidesToShow": 8, "slidesToScroll": 1,"dots": true,"infinite": true,"autoplay": true,"autoplaySpeed": 1200};
   
diff --git a/ng8-seed/src/app/layouts/admin/admin-layout.component.html b/ng8-seed/src/app/layouts/admin/admin-layout.component.html
index 47fd3f3..1b3d6ec 100644
--- a/ng8-seed/src/app/layouts/admin/admin-layout.component.html
+++ b/ng8-seed/src/app/layouts/admin/admin-layout.component.html
@@ -1,568 +1,579 @@
 <div  class="app search-i" [dir]="layoutDir" [ngClass]="[ menuLayout, selectedSidebarImage, selectedSidebarColor, selectedHeaderColor, collapsedClass]" [class.app-dark]="dark" [class.boxed]="boxed" [class.collapsed-sidebar]="collapseSidebar" [class.compact-sidebar]="compactSidebar" [class.bg-img-disable]="!sidebarBg">
-<mat-sidenav-container class="app-inner">
-   <mat-sidenav #sidemenu class="sidebar-panel" id="sidebar-panel" [mode]="isOver() ? 'over' : 'side'" [opened]="!isOver()" (mouseover)="menuMouseOver()" (mouseout)="menuMouseOut()">
-   <div class="opt-side relative ">
-      <div class="sidebar-container ">
-         <div class="branding text-center">
-               <h2><img src="assets/images/csr-img/tn_logo.png" style="width:95%;height:54px;">
-            </h2>
-         </div>
-         <div class="main-nav">
-            <!-- <div class="user-pro-wrap">
-               <div class="user-profile-thumb text-center">
-                  <div class="user-i">
-                     <img src="assets/images/userpic.jpg" class="rad-full mb-1" width="100" height="100" alt="">
-                     <div> <span>John Doe</span></div>
+   <mat-sidenav-container class="app-inner">
+      <mat-sidenav #sidemenu class="sidebar-panel" id="sidebar-panel" [mode]="isOver() ? 'over' : 'side'" [opened]="!isOver()" (mouseover)="menuMouseOver()" (mouseout)="menuMouseOut()">
+      <div class="opt-side relative ">
+         <div class="sidebar-container ">
+            <div class="branding text-center">
+                  <h2><img src="assets/images/csr-img/tn_logo.png" style="width:95%;height:54px;">
+               </h2>
+            </div>
+            <div class="main-nav">
+               <!-- <div class="user-pro-wrap">
+                  <div class="user-profile-thumb text-center">
+                     <div class="user-i">
+                        <img src="assets/images/userpic.jpg" class="rad-full mb-1" width="100" height="100" alt="">
+                        <div> <span>John Doe</span></div>
+                     </div>
                   </div>
-               </div>
-               <div class="most-used text-center">
-                  <a class="most-link" color="primary">
-                     <mat-icon>home</mat-icon>
-                  </a>
-                  <a class="most-link" color="primary">
-                     <mat-icon>person</mat-icon>
-                  </a>
-                  <a class="most-link" color="primary">
-                     <mat-icon>settings</mat-icon>
-                  </a>
-               </div>
-            </div> -->
-            <mat-nav-list appAccordion class="navigation relative">
-               <mat-list-item appAccordionLink *ngFor="let menuitem of menuItems.getAll()">
-                  <a appAccordionToggle class="relative" mat-ripple (click)="navRedirectionHorizontal(menuitem)" *ngIf="menuitem.type === 'link'">
-                  <mat-icon>{{ menuitem.icon }}</mat-icon>
-                  <span>{{ menuitem.name == 'Login' ? user_name == '' ? menuitem.name : 'Log Out' : menuitem.name  | translate }}</span>
-                  <span fxFlex></span>
-                  <span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
-                  </a>
-                  <a appAccordionToggle class="relative" mat-ripple href="{{menuitem.state}}" *ngIf="menuitem.type === 'extLink'">
+                  <div class="most-used text-center">
+                     <a class="most-link" color="primary">
+                        <mat-icon>home</mat-icon>
+                     </a>
+                     <a class="most-link" color="primary">
+                        <mat-icon>person</mat-icon>
+                     </a>
+                     <a class="most-link" color="primary">
+                        <mat-icon>settings</mat-icon>
+                     </a>
+                  </div>
+               </div> -->
+               <mat-nav-list appAccordion class="navigation relative">
+                  <mat-list-item appAccordionLink *ngFor="let menuitem of menuItems.getAll()">
+                     <a appAccordionToggle class="relative" mat-ripple (click)="navRedirectionHorizontal(menuitem)" *ngIf="menuitem.type === 'link'">
                      <mat-icon>{{ menuitem.icon }}</mat-icon>
-                     <span>{{ menuitem.name | translate }}</span>
+                     <span>{{ menuitem.name == 'Login' ? user_name == '' ? menuitem.name : 'Log Out' : menuitem.name  | translate }}</span>
                      <span fxFlex></span>
                      <span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
-                  </a>
-                  <a appAccordionToggle class="relative" mat-ripple href="{{menuitem.state}}" target="_blank" *ngIf="menuitem.type === 'extTabLink'">
-                     <mat-icon>{{ menuitem.icon }}</mat-icon>
-                     <span>{{ menuitem.name | translate }}</span>
-                     <span fxFlex></span>
-                     <span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
-                  </a>
-                  <a appAccordionToggle class="relative" mat-ripple href="javascript:;" *ngIf="menuitem.type === 'sub'">
-                     <mat-icon>{{ menuitem.icon }}</mat-icon>
-                     <span>{{ menuitem.name | translate }}</span>
-                     <span fxFlex></span>
-                     <span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
-                     <mat-icon class="menu-caret">arrow_drop_down</mat-icon>
-                  </a>
-                  <mat-nav-list class="sub-menu" *ngIf="menuitem.type === 'sub'">
-                     <mat-list-item *ngFor="let childitem of menuitem.children" routerLinkActive="open">
-                        <a [routerLink]="['/'+childitem.state ]" class="relative" mat-ripple>{{ childitem.name | translate }}</a>
-                     </mat-list-item>
-                  </mat-nav-list>
-               </mat-list-item>
-               <mat-divider></mat-divider>
-              
-<!--                <mat-list-item>
-                  <a (click)="addMenuItem()">
-                     <mat-icon>add</mat-icon>
-                     <span>Add</span>
-                  </a>
-               </mat-list-item> -->
-            </mat-nav-list>
+                     </a>
+                     <a appAccordionToggle class="relative" mat-ripple href="{{menuitem.state}}" *ngIf="menuitem.type === 'extLink'">
+                        <mat-icon>{{ menuitem.icon }}</mat-icon>
+                        <span>{{ menuitem.name | translate }}</span>
+                        <span fxFlex></span>
+                        <span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
+                     </a>
+                     <a appAccordionToggle class="relative" mat-ripple href="{{menuitem.state}}" target="_blank" *ngIf="menuitem.type === 'extTabLink'">
+                        <mat-icon>{{ menuitem.icon }}</mat-icon>
+                        <span>{{ menuitem.name | translate }}</span>
+                        <span fxFlex></span>
+                        <span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
+                     </a>
+                     <a appAccordionToggle class="relative" mat-ripple href="javascript:;" *ngIf="menuitem.type === 'sub'">
+                        <mat-icon>{{ menuitem.icon }}</mat-icon>
+                        <span>{{ menuitem.name | translate }}</span>
+                        <span fxFlex></span>
+                        <span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
+                        <mat-icon class="menu-caret">arrow_drop_down</mat-icon>
+                     </a>
+                     <mat-nav-list class="sub-menu" *ngIf="menuitem.type === 'sub'">
+                        <mat-list-item *ngFor="let childitem of menuitem.children" routerLinkActive="open">
+                           <a [routerLink]="['/'+childitem.state ]" class="relative" mat-ripple>{{ childitem.name | translate }}</a>
+                        </mat-list-item>
+                     </mat-nav-list>
+                  </mat-list-item>
+                  <mat-divider></mat-divider>
+                 
+   <!--                <mat-list-item>
+                     <a (click)="addMenuItem()">
+                        <mat-icon>add</mat-icon>
+                        <span>Add</span>
+                     </a>
+                  </mat-list-item> -->
+               </mat-nav-list>
+            </div>
          </div>
       </div>
-   </div>
-   <div class="bg-overlay"></div>
-   </mat-sidenav>
-   <mat-toolbar class="main-header">
-      <div class="horizontal-top-bar w-100">
-        <!-- <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
-         <div class="search-bar" fxFlex>
-            <form class="search-form">
+      <div class="bg-overlay"></div>
+      </mat-sidenav>
+      <mat-toolbar class="main-header" style="height: 95px !important;">
+         <div class="horizontal-top-bar w-100">
+           <!-- <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
+            <div class="search-bar" fxFlex>
+               <form class="search-form">
+                  <mat-icon>search</mat-icon>
+                  <input type="text" placeholder="Search" autofocus="true" />
+               </form>
+            </div>
+            </div> -->
+            <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="100.33" fxFlex.xl="33.33" fxFlex="100">
+             <div class="horizontal-logo">
+               <div class="header-name">
+                  <h2><a href="#"><img src="assets/images/csr-img/tn_logo.png" style="width:40%;height:60px;"></a>
+                  </h2>
+               </div>
+            </div>
+            </div>
+            <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="63.33" fxFlex.xl="33.33" fxFlex="100">
+                  <div class="horizontal-menu text-center">
+                  <nav>
+                        <ul class="main-h-list" style="font-size: 16px;">
+                           <li *ngFor="let menuitem of horizontalMenuItems.getAll()">
+                              <a  *ngIf="menuitem.type === 'link' && menuitem.name != 'Login'" (click)="navRedirection(menuitem)">
+                              <!--<mat-icon>{{ menuitem.icon }}</mat-icon>-->
+                              <span><strong>{{  menuitem.name == 'Login' ? user_name == '' ? menuitem.name : '' : menuitem.name | translate }}</strong></span>
+                              </a>
+                              <a  *ngIf="menuitem.type === 'link' && menuitem.name == 'Login' && user_name == ''" (click)="navRedirection(menuitem)">
+                              <!--<mat-icon>{{ menuitem.icon }}</mat-icon>-->
+                              <span><strong>{{ menuitem.name | translate }}</strong></span>
+                              </a>
+
+                              <a [routerLink]="['/'+menuitem.state]" *ngIf="menuitem.type === 'sub' && menuitem.name != 'My Account'">
+                              <!-- <mat-icon>{{ menuitem.icon }}</mat-icon> -->
+                              <span style="text-transform: capitalize;"><strong>{{ menuitem.name == 'My Account' ? user_name == '' ? menuitem.name : user_name : menuitem.name  | translate }}</strong></span>
+                              </a>
+                              <a [routerLink]="['/'+menuitem.state]" *ngIf="menuitem.type === 'sub' && menuitem.name == 'My Account' && user_name != ''">
+                              <!-- <mat-icon>{{ menuitem.icon }}</mat-icon> -->
+                              <span style="text-transform: capitalize;"><strong>{{ menuitem.name == 'My Account' ? user_name == '' ? menuitem.name : user_name : menuitem.name  | translate }}</strong></span>
+                              </a>
+
+                              <ul class="dropdown" *ngIf="menuitem.type === 'sub' && user_name != ''">
+                                 <li *ngFor="let childitem of menuitem.children">
+                                    <a  (click)="SubMenu(childitem)">{{ childitem.name | translate }}</a>
+                                    <ul class="dropdown" *ngIf="childitem.type === 'super-sub'">
+                                       <li *ngFor="let subchild of childitem.subchildren">
+                                          <a [routerLink]="['/'+subchild.state ]">{{subchild.name | translate}}</a>
+                                       </li>
+                                    </ul>
+                                 </li>
+                              </ul>
+                           </li>
+                           <!-- <li style="cursor: pointer">
+                              <span *ngIf="user_name != ''" (click)="signOut()"><strong>Log Out</strong></span>
+                           </li> -->
+                        </ul>
+                     </nav>
+                  </div>
+            <!-- <div class="menu-links">
+               <button appToggleFullscreen mat-icon-button matTooltip="FullScreen">
+                  <mat-icon>fullscreen</mat-icon>
+               </button>
+               <button [mat-menu-trigger-for]="user2" mat-icon-button class="ml-xs overflow-visible">
+                  <mat-icon>message</mat-icon>
+               </button>
+               <mat-menu #user2="matMenu" class="opt-menu" x-position="after">
+                  <div mat-menu-item class="head-menu grad-blue">
+                     Message Menu
+                  </div>
+                  <button mat-menu-item>
+                  <img width="40" src="assets/images/user-1.jpg" alt="">
+                  Next Update for angular 5
+                  </button>
+                  <button mat-menu-item>
+                  <img width="40" src="assets/images/user-2.jpg" alt="">
+                  Check out our new admin theme
+                  </button>
+                  <button mat-menu-item>
+                  <img width="40" src="assets/images/user-3.jpg" alt="">
+                  Expedita quo, laboriosam officia.
+                  </button>
+                  <button mat-menu-item>
+                  <img width="40" src="assets/images/user-4.jpg" alt="">
+                  Lorem ipsum dolor sit amet consectetur.
+                  </button>
+               </mat-menu>
+               <button [mat-menu-trigger-for]="user1" mat-icon-button class="ml-xs overflow-visible">
+                  <mat-icon>reorder</mat-icon>
+                  <span class="notification-label">3</span>
+               </button>
+               <mat-menu #user1="matMenu" class="opt-menu" x-position="before">
+                  <div mat-menu-item class="head-menu grad-blue">
+                     User Menu
+                  </div>
+                  <button mat-menu-item>
+                     <mat-icon>show_chart</mat-icon>
+                     Charts
+                  </button>
+                  <button mat-menu-item>
+                     <mat-icon>navigation</mat-icon>
+                     Maps
+                  </button>
+                  <button mat-menu-item>
+                     <mat-icon>web</mat-icon>
+                     Calendar Settings
+                  </button>
+               </mat-menu>
+               <button (click)="end.toggle()" mat-icon-button class="ml-xs overflow-visible">
+                  <mat-icon>notifications</mat-icon>
+                  <span class="notification-label">2</span>
+               </button>
+               <button [mat-menu-trigger-for]="user" mat-icon-button class="ml-xs">
+                  <mat-icon>person</mat-icon>
+               </button>
+               <mat-menu #user="matMenu" class="opt-menu" x-position="before">
+                  <div mat-menu-item class="head-menu grad-blue">
+                     Settings
+                  </div>
+                  <button mat-menu-item>
+                     <mat-icon>settings</mat-icon>
+                     Setting 
+                  </button>
+                  <button mat-menu-item>
+                     <mat-icon>account_box</mat-icon>
+                     Profile
+                  </button>
+                  <button mat-menu-item>
+                     <mat-icon>notifications_off</mat-icon>
+                     Disable notifications
+                  </button>
+                  <button mat-menu-item>
+                     <mat-icon>exit_to_app</mat-icon>
+                     Sign Out
+                  </button>
+               </mat-menu>
+            </div> -->
+           </div>
+         </div>
+         <div class="vertical-menu w-80">
+         <button (click)="menuToggleFunc()" mat-icon-button class="lines-btn">
+            <mat-icon>menu</mat-icon>
+         </button>
+         <!-- <div class="search-bar" fxFlex>
+            <form class="search-form" fxShow="false" fxShow.gt-xs>
                <mat-icon>search</mat-icon>
                <input type="text" placeholder="Search" autofocus="true" />
             </form>
-         </div>
          </div> -->
-         <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="100.33" fxFlex.xl="33.33" fxFlex="100">
-          <div class="horizontal-logo">
-            <div class="header-name">
-               <h2><a href="#"><img src="assets/images/csr-img/tn_logo.png" style="width:35%;height:54px;"></a>
-               </h2>
+         <!--  <span fxFlex></span> -->
+        <!-- <button appToggleFullscreen mat-icon-button>
+            <mat-icon>fullscreen</mat-icon>
+         </button>
+         <button [mat-menu-trigger-for]="user2" mat-icon-button class="ml-xs overflow-visible">
+            <mat-icon>message</mat-icon>
+         </button>
+         <mat-menu #user2="matMenu" class="opt-menu" x-position="after">
+            <div mat-menu-item class="head-menu grad-blue">
+               Message Menu
             </div>
-         </div>
-         </div>
-         <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="63.33" fxFlex.xl="33.33" fxFlex="100">
-               <div class="horizontal-menu text-center">
-               <nav>
-                     <ul class="main-h-list" style="font-size: 16px;">
-                        <li *ngFor="let menuitem of horizontalMenuItems.getAll()">
-                           <a  *ngIf="menuitem.type === 'link'" (click)="navRedirection(menuitem)">
-                           <!--<mat-icon>{{ menuitem.icon }}</mat-icon>-->
-                           <span><strong>{{ menuitem.name == 'Login' ? user_name == '' ? menuitem.name : user_name : menuitem.name  | translate }}</strong></span>
-                           </a>
-                           <a [routerLink]="['/'+menuitem.state]" *ngIf="menuitem.type === 'sub'">
-                           <mat-icon>{{ menuitem.icon }}</mat-icon>
-                           <span>{{ menuitem.name | translate }}</span>
-                           </a>
-                           <ul class="dropdown" *ngIf="menuitem.type === 'sub'">
-                              <li *ngFor="let childitem of menuitem.children">
-                                 <a [routerLink]="['/'+childitem.state ]">{{ childitem.name | translate }}</a>
-                                 <ul class="dropdown" *ngIf="childitem.type === 'super-sub'">
-                                    <li *ngFor="let subchild of childitem.subchildren">
-                                       <a [routerLink]="['/'+subchild.state ]">{{subchild.name | translate}}</a>
-                                    </li>
-                                 </ul>
-                              </li>
-                           </ul>
-                        </li>
-                        <li style="cursor: pointer">
-                           <span *ngIf="user_name != ''" (click)="signOut()"><strong>Log Out</strong></span>
-                        </li>
-                     </ul>
-                  </nav>
-               </div>
-         <!-- <div class="menu-links">
-            <button appToggleFullscreen mat-icon-button matTooltip="FullScreen">
-               <mat-icon>fullscreen</mat-icon>
+            <button mat-menu-item>
+            <img width="40" src="assets/images/user-1.jpg" alt="">
+            Next Update for angular 5
             </button>
-            <button [mat-menu-trigger-for]="user2" mat-icon-button class="ml-xs overflow-visible">
-               <mat-icon>message</mat-icon>
+            <button mat-menu-item>
+            <img width="40" src="assets/images/user-2.jpg" alt="">
+            Check out our new admin theme
             </button>
-            <mat-menu #user2="matMenu" class="opt-menu" x-position="after">
-               <div mat-menu-item class="head-menu grad-blue">
-                  Message Menu
-               </div>
-               <button mat-menu-item>
-               <img width="40" src="assets/images/user-1.jpg" alt="">
-               Next Update for angular 5
-               </button>
-               <button mat-menu-item>
-               <img width="40" src="assets/images/user-2.jpg" alt="">
-               Check out our new admin theme
-               </button>
-               <button mat-menu-item>
-               <img width="40" src="assets/images/user-3.jpg" alt="">
-               Expedita quo, laboriosam officia.
-               </button>
-               <button mat-menu-item>
-               <img width="40" src="assets/images/user-4.jpg" alt="">
-               Lorem ipsum dolor sit amet consectetur.
-               </button>
-            </mat-menu>
-            <button [mat-menu-trigger-for]="user1" mat-icon-button class="ml-xs overflow-visible">
-               <mat-icon>reorder</mat-icon>
-               <span class="notification-label">3</span>
+            <button mat-menu-item>
+            <img width="40" src="assets/images/user-3.jpg" alt="">
+            Expedita quo, laboriosam officia.
             </button>
-            <mat-menu #user1="matMenu" class="opt-menu" x-position="before">
-               <div mat-menu-item class="head-menu grad-blue">
-                  User Menu
-               </div>
-               <button mat-menu-item>
-                  <mat-icon>show_chart</mat-icon>
-                  Charts
-               </button>
-               <button mat-menu-item>
-                  <mat-icon>navigation</mat-icon>
-                  Maps
-               </button>
-               <button mat-menu-item>
-                  <mat-icon>web</mat-icon>
-                  Calendar Settings
-               </button>
-            </mat-menu>
-            <button (click)="end.toggle()" mat-icon-button class="ml-xs overflow-visible">
-               <mat-icon>notifications</mat-icon>
-               <span class="notification-label">2</span>
+            <button mat-menu-item>
+            <img width="40" src="assets/images/user-4.jpg" alt="">
+            Lorem ipsum dolor sit amet consectetur.
             </button>
-            <button [mat-menu-trigger-for]="user" mat-icon-button class="ml-xs">
-               <mat-icon>person</mat-icon>
+         </mat-menu>
+         <button [mat-menu-trigger-for]="user1" mat-icon-button class="ml-xs overflow-visible">
+            <mat-icon>reorder</mat-icon>
+            <span class="notification-label">3</span>
+         </button>
+         <mat-menu #user1="matMenu" class="opt-menu" x-position="before">
+            <div mat-menu-item class="head-menu grad-blue">
+               User Menu
+            </div>
+            <button mat-menu-item>
+               <mat-icon>show_chart</mat-icon>
+               Charts
             </button>
-            <mat-menu #user="matMenu" class="opt-menu" x-position="before">
-               <div mat-menu-item class="head-menu grad-blue">
-                  Settings
-               </div>
-               <button mat-menu-item>
-                  <mat-icon>settings</mat-icon>
-                  Setting 
-               </button>
-               <button mat-menu-item>
-                  <mat-icon>account_box</mat-icon>
-                  Profile
-               </button>
-               <button mat-menu-item>
-                  <mat-icon>notifications_off</mat-icon>
-                  Disable notifications
-               </button>
-               <button mat-menu-item>
-                  <mat-icon>exit_to_app</mat-icon>
-                  Sign Out
-               </button>
-            </mat-menu>
-         </div> -->
-        </div>
-      </div>
-      <div class="vertical-menu w-80">
-      <button (click)="menuToggleFunc()" mat-icon-button class="lines-btn">
-         <mat-icon>menu</mat-icon>
-      </button>
-      <!-- <div class="search-bar" fxFlex>
-         <form class="search-form" fxShow="false" fxShow.gt-xs>
-            <mat-icon>search</mat-icon>
-            <input type="text" placeholder="Search" autofocus="true" />
-         </form>
+            <button mat-menu-item>
+               <mat-icon>navigation</mat-icon>
+               Maps
+            </button>
+            <button mat-menu-item>
+               <mat-icon>web</mat-icon>
+               Calendar Settings
+            </button>
+         </mat-menu>
+         <button (click)="end.toggle()" mat-icon-button class="ml-xs overflow-visible">
+            <mat-icon>notifications</mat-icon>
+            <span class="notification-label">2</span>
+         </button> -->
+         <!-- <button [mat-menu-trigger-for]="user" mat-icon-button class="ml-xs">
+            <mat-icon>person</mat-icon>
+         </button> -->
+         <mat-menu #user="matMenu" class="opt-menu" x-position="before">
+            <div mat-menu-item class="head-menu grad-blue">
+               Settings
+            </div>
+            <button mat-menu-item>
+               <mat-icon>settings</mat-icon>
+               Setting 
+            </button>
+            <button mat-menu-item>
+               <mat-icon>account_box</mat-icon>
+               Profile
+            </button>
+            <button mat-menu-item>
+               <mat-icon>notifications_off</mat-icon>
+               Disable notifications
+            </button>
+            <button mat-menu-item>
+               <mat-icon>exit_to_app</mat-icon>
+               Sign Out
+            </button>
+         </mat-menu>
+          </div>
+      </mat-toolbar>
+      <!-- <div class="horizontal-menu text-center">
+         <nav>
+            <ul class="main-h-list">
+               <li *ngFor="let menuitem of horizontalMenuItems.getAll()">
+                  <a [routerLink]="['/'+menuitem.state]" *ngIf="menuitem.type === 'link'">
+                  <mat-icon>{{ menuitem.icon }}</mat-icon>
+                  <span>{{ menuitem.name | translate }}</span>
+                  </a>
+                  <a [routerLink]="['/'+menuitem.state]" *ngIf="menuitem.type === 'sub'">
+                  <mat-icon>{{ menuitem.icon }}</mat-icon>
+                  <span>{{ menuitem.name | translate }}</span>
+                  </a>
+                  <ul class="dropdown" *ngIf="menuitem.type === 'sub'">
+                     <li *ngFor="let childitem of menuitem.children">
+                        <a [routerLink]="['/'+childitem.state ]">{{ childitem.name | translate }}</a>
+                        <ul class="dropdown" *ngIf="childitem.type === 'super-sub'">
+                           <li *ngFor="let subchild of childitem.subchildren">
+                              <a [routerLink]="['/'+subchild.state ]">{{subchild.name | translate}}</a>
+                           </li>
+                        </ul>
+                     </li>
+                  </ul>
+               </li>
+            </ul>
+         </nav>
       </div> -->
-      <!--  <span fxFlex></span> -->
-     <!-- <button appToggleFullscreen mat-icon-button>
-         <mat-icon>fullscreen</mat-icon>
-      </button>
-      <button [mat-menu-trigger-for]="user2" mat-icon-button class="ml-xs overflow-visible">
-         <mat-icon>message</mat-icon>
-      </button>
-      <mat-menu #user2="matMenu" class="opt-menu" x-position="after">
-         <div mat-menu-item class="head-menu grad-blue">
-            Message Menu
-         </div>
-         <button mat-menu-item>
-         <img width="40" src="assets/images/user-1.jpg" alt="">
-         Next Update for angular 5
-         </button>
-         <button mat-menu-item>
-         <img width="40" src="assets/images/user-2.jpg" alt="">
-         Check out our new admin theme
-         </button>
-         <button mat-menu-item>
-         <img width="40" src="assets/images/user-3.jpg" alt="">
-         Expedita quo, laboriosam officia.
-         </button>
-         <button mat-menu-item>
-         <img width="40" src="assets/images/user-4.jpg" alt="">
-         Lorem ipsum dolor sit amet consectetur.
-         </button>
-      </mat-menu>
-      <button [mat-menu-trigger-for]="user1" mat-icon-button class="ml-xs overflow-visible">
-         <mat-icon>reorder</mat-icon>
-         <span class="notification-label">3</span>
-      </button>
-      <mat-menu #user1="matMenu" class="opt-menu" x-position="before">
-         <div mat-menu-item class="head-menu grad-blue">
-            User Menu
-         </div>
-         <button mat-menu-item>
-            <mat-icon>show_chart</mat-icon>
-            Charts
-         </button>
-         <button mat-menu-item>
-            <mat-icon>navigation</mat-icon>
-            Maps
-         </button>
-         <button mat-menu-item>
-            <mat-icon>web</mat-icon>
-            Calendar Settings
-         </button>
-      </mat-menu>
-      <button (click)="end.toggle()" mat-icon-button class="ml-xs overflow-visible">
-         <mat-icon>notifications</mat-icon>
-         <span class="notification-label">2</span>
-      </button> -->
-      <!-- <button [mat-menu-trigger-for]="user" mat-icon-button class="ml-xs">
-         <mat-icon>person</mat-icon>
-      </button> -->
-      <mat-menu #user="matMenu" class="opt-menu" x-position="before">
-         <div mat-menu-item class="head-menu grad-blue">
-            Settings
-         </div>
-         <button mat-menu-item>
-            <mat-icon>settings</mat-icon>
-            Setting 
-         </button>
-         <button mat-menu-item>
-            <mat-icon>account_box</mat-icon>
-            Profile
-         </button>
-         <button mat-menu-item>
-            <mat-icon>notifications_off</mat-icon>
-            Disable notifications
-         </button>
-         <button mat-menu-item>
-            <mat-icon>exit_to_app</mat-icon>
-            Sign Out
-         </button>
-      </mat-menu>
-       </div>
-   </mat-toolbar>
-   <!-- <div class="horizontal-menu text-center">
-      <nav>
-         <ul class="main-h-list">
-            <li *ngFor="let menuitem of horizontalMenuItems.getAll()">
-               <a [routerLink]="['/'+menuitem.state]" *ngIf="menuitem.type === 'link'">
-               <mat-icon>{{ menuitem.icon }}</mat-icon>
-               <span>{{ menuitem.name | translate }}</span>
-               </a>
-               <a [routerLink]="['/'+menuitem.state]" *ngIf="menuitem.type === 'sub'">
-               <mat-icon>{{ menuitem.icon }}</mat-icon>
-               <span>{{ menuitem.name | translate }}</span>
-               </a>
-               <ul class="dropdown" *ngIf="menuitem.type === 'sub'">
-                  <li *ngFor="let childitem of menuitem.children">
-                     <a [routerLink]="['/'+childitem.state ]">{{ childitem.name | translate }}</a>
-                     <ul class="dropdown" *ngIf="childitem.type === 'super-sub'">
-                        <li *ngFor="let subchild of childitem.subchildren">
-                           <a [routerLink]="['/'+subchild.state ]">{{subchild.name | translate}}</a>
-                        </li>
-                     </ul>
-                  </li>
-               </ul>
-            </li>
-         </ul>
-      </nav>
-   </div> -->
-   <div class="body-container">
-      <router-outlet class="router-outlet" (activate)="onActivate($event)"></router-outlet>
-   </div>
-   <mat-sidenav #end position="end" class="chat-panel" mode="over" opened="false">
-      <mat-tab-group [selectedIndex]="1" mat-stretch-tabs>
-         <mat-tab>
-            <ng-template mat-tab-label>Today</ng-template>
-            <div class="scroll">
-               <mat-list class="pt-1 pb-1">
-                  <mat-list-item>
-                     <div fxLayout="column">
-                        <h2 class="ma-0">{{ today | date:'EEEE' }}</h2>
-                        <h6 class="mat-text-muted ma-0"><span>{{ today | date:'dd' }}</span>&nbsp;<span>{{ today | date:'MMMM' }}</span></h6>
-                     </div>
-                  </mat-list-item>
-               </mat-list>
-               <mat-nav-list>
-                  <mat-divider></mat-divider>
-                  <h3 mat-subheader class="text-uppercase font-weight-bold">Projects Stats</h3>
-                  <mat-list-item>
-                     <p class="text-mat" mat-line>Project A</p>
-                     <mat-progress-bar mat-line mode="determinate" color="warn" value="20"></mat-progress-bar>
-                  </mat-list-item>
-                  <mat-list-item>
-                     <p class="text-mat" mat-line>Project B </p>
-                     <mat-progress-bar mat-line mode="determinate" color="accent" value="80"></mat-progress-bar>
-                  </mat-list-item>
-                  <mat-list-item>
-                     <p class="text-mat" mat-line>Project C</p>
-                     <mat-progress-bar mat-line mode="determinate" value="30"></mat-progress-bar>
-                  </mat-list-item>
-                  <mat-divider></mat-divider>
-                  <h3 mat-subheader class="text-uppercase font-weight-bold">Todo</h3>
-                  <mat-list-item>
-                     <a mat-line href="javascript:;">Consectetur adipisicing elit. Nemo omnis.</a>
-                     <p mat-line class="mat-text-muted text-mat">2:45PM</p>
-                  </mat-list-item>
-                  <mat-list-item>
-                     <a mat-line href="javascript:;"> Temporibus cumque cupiditate </a>
-                     <p mat-line class="mat-text-muted text-mat">3:20PM</p>
-                  </mat-list-item>
-                  <mat-list-item>
-                     <a mat-line href="javascript:;">Libero voluptatibus harum quis accusamus</a>
-                     <p mat-line class="mat-text-muted text-mat">16:00PM</p>
-                  </mat-list-item>
-               </mat-nav-list>
-            </div>
-         </mat-tab>
-         <mat-tab>
-            <ng-template mat-tab-label>Notifications</ng-template>
-            <div class="scroll">
-               <mat-nav-list>
-                  <mat-list-item>
-                     <mat-icon mat-list-avatar class="mat-text-primary">people</mat-icon>
-                     <h4 mat-line>Social</h4>
-                     <p mat-line> 5 new members joined today</p>
-                  </mat-list-item>
-                  <mat-list-item>
-                     <mat-icon mat-list-avatar class="mat-text-warn">local_offer</mat-icon>
-                     <h4 mat-line>Promotions</h4>
-                     <p mat-line>Updated your email
-                     </p>
-                  </mat-list-item>
-                  <mat-list-item>
-                     <mat-icon mat-list-avatar class="mat-text-accent">info</mat-icon>
-                     <h4 mat-line>Updates</h4>
-                     <p mat-line> 15 new product added</p>
-                  </mat-list-item>
-                  <mat-list-item>
-                     <mat-icon mat-list-avatar class="mat-deep-purple">delete_sweep</mat-icon>
-                     <h4 mat-line> 2 order cancelled</h4>
-                     <span class="text-mat mat-text-muted" mat-line>{{ 1427207139000 | date: 'fullDate' }}</span>
-                  </mat-list-item>
-                  <mat-list-item>
-                     <mat-icon mat-list-avatar>check_circle</mat-icon>
-                     <h4 mat-line>System Scan completed</h4>
-                     <span class="text-mat mat-text-muted" mat-line>{{ 1427412725000 | date: 'fullDate' }}</span>
-                  </mat-list-item>
-                  <mat-list-item>
-                     <mat-icon mat-list-avatar>person_add</mat-icon>
-                     <h4 mat-line>4 Users connected</h4>
-                     <span class="text-mat mat-text-muted" mat-line>{{ 1428275520000 | date: 'fullDate' }}</span>
-                  </mat-list-item>
-               </mat-nav-list>
-            </div>
-         </mat-tab>
-      </mat-tab-group>
-   </mat-sidenav>
-</mat-sidenav-container>
-<!-- Demo Purposes Only -->
-<!-- <button mat-fab color="warn" class="mat-fab-bottom-right" (click)="showSettings = true">
-   <mat-icon class="mat-24">settings</mat-icon>
-</button>
-<mat-card class="settings-panel" *ngIf="showSettings">
-   <mat-toolbar color="warn">
-      <span fxFlex>Options</span>
-      <button mat-icon-button (click)="showSettings = false">
-         <mat-icon>close</mat-icon>
-      </button>
-   </mat-toolbar>
-   <mat-card-content class="demo-checkbox">
-      <span class="mb-2 d-block"><strong>Sidebar Image</strong></span>
-      <div class="bg-img clearfix">
-         <div class="pb-1" [ngClass]="{'border-active' : isBgActive('bg-1')}">
-            <a (click)="onSelectSidebarImage('bg-1')">
-            <img src="assets/images/bg-5.jpg" alt="">
-            </a>
-         </div>
-         <div class="pb-1" [ngClass]="{'border-active' : isBgActive('bg-2')}">
-            <a (click)="onSelectSidebarImage('bg-2')">
-            <img src="assets/images/bg-2.jpg" alt="">
-            </a>
-         </div>
-         <div class="pb-1" [ngClass]="{'border-active' : isBgActive('bg-3')}">
-            <a (click)="onSelectSidebarImage('bg-3')">
-            <img src="assets/images/bg-3.jpg" alt="">
-            </a>
-         </div>
-         <div class="pb-2" [ngClass]="{'border-active' : isBgActive('bg-4')}">
-            <a (click)="onSelectSidebarImage('bg-4')">
-            <img src="assets/images/bg-4.jpg" alt="">
-            </a>
-         </div>
+      <div class="body-container">
+         <router-outlet class="router-outlet" (activate)="onActivate($event)"></router-outlet>
       </div>
-      <div class="color-sidebar clearfix">
+      <mat-sidenav #end position="end" class="chat-panel" mode="over" opened="false">
+         <mat-tab-group [selectedIndex]="1" mat-stretch-tabs>
+            <mat-tab>
+               <ng-template mat-tab-label>Today</ng-template>
+               <div class="scroll">
+                  <mat-list class="pt-1 pb-1">
+                     <mat-list-item>
+                        <div fxLayout="column">
+                           <h2 class="ma-0">{{ today | date:'EEEE' }}</h2>
+                           <h6 class="mat-text-muted ma-0"><span>{{ today | date:'dd' }}</span>&nbsp;<span>{{ today | date:'MMMM' }}</span></h6>
+                        </div>
+                     </mat-list-item>
+                  </mat-list>
+                  <mat-nav-list>
+                     <mat-divider></mat-divider>
+                     <h3 mat-subheader class="text-uppercase font-weight-bold">Projects Stats</h3>
+                     <mat-list-item>
+                        <p class="text-mat" mat-line>Project A</p>
+                        <mat-progress-bar mat-line mode="determinate" color="warn" value="20"></mat-progress-bar>
+                     </mat-list-item>
+                     <mat-list-item>
+                        <p class="text-mat" mat-line>Project B </p>
+                        <mat-progress-bar mat-line mode="determinate" color="accent" value="80"></mat-progress-bar>
+                     </mat-list-item>
+                     <mat-list-item>
+                        <p class="text-mat" mat-line>Project C</p>
+                        <mat-progress-bar mat-line mode="determinate" value="30"></mat-progress-bar>
+                     </mat-list-item>
+                     <mat-divider></mat-divider>
+                     <h3 mat-subheader class="text-uppercase font-weight-bold">Todo</h3>
+                     <mat-list-item>
+                        <a mat-line href="javascript:;">Consectetur adipisicing elit. Nemo omnis.</a>
+                        <p mat-line class="mat-text-muted text-mat">2:45PM</p>
+                     </mat-list-item>
+                     <mat-list-item>
+                        <a mat-line href="javascript:;"> Temporibus cumque cupiditate </a>
+                        <p mat-line class="mat-text-muted text-mat">3:20PM</p>
+                     </mat-list-item>
+                     <mat-list-item>
+                        <a mat-line href="javascript:;">Libero voluptatibus harum quis accusamus</a>
+                        <p mat-line class="mat-text-muted text-mat">16:00PM</p>
+                     </mat-list-item>
+                  </mat-nav-list>
+               </div>
+            </mat-tab>
+            <mat-tab>
+               <ng-template mat-tab-label>Notifications</ng-template>
+               <div class="scroll">
+                  <mat-nav-list>
+                     <mat-list-item>
+                        <mat-icon mat-list-avatar class="mat-text-primary">people</mat-icon>
+                        <h4 mat-line>Social</h4>
+                        <p mat-line> 5 new members joined today</p>
+                     </mat-list-item>
+                     <mat-list-item>
+                        <mat-icon mat-list-avatar class="mat-text-warn">local_offer</mat-icon>
+                        <h4 mat-line>Promotions</h4>
+                        <p mat-line>Updated your email
+                        </p>
+                     </mat-list-item>
+                     <mat-list-item>
+                        <mat-icon mat-list-avatar class="mat-text-accent">info</mat-icon>
+                        <h4 mat-line>Updates</h4>
+                        <p mat-line> 15 new product added</p>
+                     </mat-list-item>
+                     <mat-list-item>
+                        <mat-icon mat-list-avatar class="mat-deep-purple">delete_sweep</mat-icon>
+                        <h4 mat-line> 2 order cancelled</h4>
+                        <span class="text-mat mat-text-muted" mat-line>{{ 1427207139000 | date: 'fullDate' }}</span>
+                     </mat-list-item>
+                     <mat-list-item>
+                        <mat-icon mat-list-avatar>check_circle</mat-icon>
+                        <h4 mat-line>System Scan completed</h4>
+                        <span class="text-mat mat-text-muted" mat-line>{{ 1427412725000 | date: 'fullDate' }}</span>
+                     </mat-list-item>
+                     <mat-list-item>
+                        <mat-icon mat-list-avatar>person_add</mat-icon>
+                        <h4 mat-line>4 Users connected</h4>
+                        <span class="text-mat mat-text-muted" mat-line>{{ 1428275520000 | date: 'fullDate' }}</span>
+                     </mat-list-item>
+                  </mat-nav-list>
+               </div>
+            </mat-tab>
+         </mat-tab-group>
+      </mat-sidenav>
+   </mat-sidenav-container>
+   <!-- Demo Purposes Only -->
+   <!-- <button mat-fab color="warn" class="mat-fab-bottom-right" (click)="showSettings = true">
+      <mat-icon class="mat-24">settings</mat-icon>
+   </button>
+   <mat-card class="settings-panel" *ngIf="showSettings">
+      <mat-toolbar color="warn">
+         <span fxFlex>Options</span>
+         <button mat-icon-button (click)="showSettings = false">
+            <mat-icon>close</mat-icon>
+         </button>
+      </mat-toolbar>
+      <mat-card-content class="demo-checkbox">
+         <span class="mb-2 d-block"><strong>Sidebar Image</strong></span>
+         <div class="bg-img clearfix">
+            <div class="pb-1" [ngClass]="{'border-active' : isBgActive('bg-1')}">
+               <a (click)="onSelectSidebarImage('bg-1')">
+               <img src="assets/images/bg-5.jpg" alt="">
+               </a>
+            </div>
+            <div class="pb-1" [ngClass]="{'border-active' : isBgActive('bg-2')}">
+               <a (click)="onSelectSidebarImage('bg-2')">
+               <img src="assets/images/bg-2.jpg" alt="">
+               </a>
+            </div>
+            <div class="pb-1" [ngClass]="{'border-active' : isBgActive('bg-3')}">
+               <a (click)="onSelectSidebarImage('bg-3')">
+               <img src="assets/images/bg-3.jpg" alt="">
+               </a>
+            </div>
+            <div class="pb-2" [ngClass]="{'border-active' : isBgActive('bg-4')}">
+               <a (click)="onSelectSidebarImage('bg-4')">
+               <img src="assets/images/bg-4.jpg" alt="">
+               </a>
+            </div>
+         </div>
+         <div class="color-sidebar clearfix">
+            <div class="pb-1">
+               <mat-checkbox [(ngModel)]="sidebarBg">Sidebar Image</mat-checkbox>
+            </div>
+            <span class="mb-2 d-block"><strong>Sidebar Color</strong></span>
+            <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-default')}">
+               <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-default')"><i aria-hidden="true" class="color-default fa fa-circle fa-lg def"></i>
+               Default</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-green')}">
+               <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-green')"><i aria-hidden="true" class="color-green fa fa-circle fa-lg"></i>
+               Green</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-red')}">
+               <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-red')"><i aria-hidden="true" class="color-red fa fa-circle fa-lg"></i>
+               Red</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-purple')}">
+               <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-purple')"><i aria-hidden="true" class="color-purple fa fa-circle fa-lg"></i>
+               Purple</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-pink')}">
+               <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-pink')"><i aria-hidden="true" class="color-pink fa fa-circle fa-lg"></i>
+               Pink</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-blue')}">
+               <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-blue')"><i aria-hidden="true" class="color-blue fa fa-circle fa-lg"></i>
+               Blue</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-green-deep')}">
+               <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-green-deep')"><i aria-hidden="true" class="color-green-deep fa fa-circle fa-lg"></i>
+               Green Deep</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-brown')}">
+               <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-brown')"><i aria-hidden="true" class="color-brown fa fa-circle fa-lg"></i>
+               Brown</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-orange')}">
+               <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-orange')"><i aria-hidden="true" class="color-orange fa fa-circle fa-lg"></i>
+               Orange</a>
+            </div>
+            dd
+            <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-cyan')}">
+                  <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-cyan')"><i aria-hidden="true" class="color-cyan fa fa-circle fa-lg"></i>
+                  Cyan</a>
+               </div>
+         </div>
+         <div class="color-header clearfix">
+            <span class="mb-2 d-block"><strong>Header Color</strong></span>
+            <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-default')}">
+               <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-default')"><i aria-hidden="true" class="color-default fa fa-circle fa-lg def"></i>
+               Default</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-green')}">
+               <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-green')"><i aria-hidden="true" class="color-green fa fa-circle fa-lg"></i>
+               Green</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-red')}">
+               <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-red')"><i aria-hidden="true" class="color-red fa fa-circle fa-lg"></i>
+               Red</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-purple')}">
+               <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-purple')"><i aria-hidden="true" class="color-purple fa fa-circle fa-lg"></i>
+               Purple</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-pink')}">
+               <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-pink')"><i aria-hidden="true" class="color-pink fa fa-circle fa-lg"></i>
+               Pink</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-blue')}">
+               <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-blue')"><i aria-hidden="true" class="color-blue fa fa-circle fa-lg"></i>
+               Blue</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-green-deep')}">
+               <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-green-deep')"><i aria-hidden="true" class="color-green-deep fa fa-circle fa-lg"></i>
+               Green Deep</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-brown')}">
+               <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-brown')"><i aria-hidden="true" class="color-brown fa fa-circle fa-lg"></i>
+               Brown</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-orange')}">
+               <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-orange')"><i aria-hidden="true" class="color-orange fa fa-circle fa-lg"></i>
+               Orange</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-cyan')}">
+                  <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-cyan')"><i aria-hidden="true" class="color-cyan fa fa-circle fa-lg"></i>
+                  Cyan</a>
+               </div>
+         </div>
          <div class="pb-1">
-            <mat-checkbox [(ngModel)]="sidebarBg">Sidebar Image</mat-checkbox>
+           <mat-checkbox (change)="changeMenuLayout($event.checked)">Horizontal Menu</mat-checkbox>
+        </div>
+         <div class="pb-1">
+            <mat-checkbox [(ngModel)]="collapseSidebar" (change)="compactSidebar = false">Collapsed Sidebar</mat-checkbox>
          </div>
-         <span class="mb-2 d-block"><strong>Sidebar Color</strong></span>
-         <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-default')}">
-            <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-default')"><i aria-hidden="true" class="color-default fa fa-circle fa-lg def"></i>
-            Default</a>
+         <div class="pb-1">
+            <mat-checkbox [(ngModel)]="compactSidebar" (change)="collapseSidebar = false">Compact Sidebar</mat-checkbox>
          </div>
-         <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-green')}">
-            <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-green')"><i aria-hidden="true" class="color-green fa fa-circle fa-lg"></i>
-            Green</a>
+         <div class="pb-1">
+            <mat-checkbox [(ngModel)]="boxed">Boxed Layout</mat-checkbox>
          </div>
-         <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-red')}">
-            <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-red')"><i aria-hidden="true" class="color-red fa fa-circle fa-lg"></i>
-            Red</a>
+         <div class="pb-1">
+            <mat-checkbox [(ngModel)]="dark" >Dark Mode</mat-checkbox>
          </div>
-         <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-purple')}">
-            <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-purple')"><i aria-hidden="true" class="color-purple fa fa-circle fa-lg"></i>
-            Purple</a>
+         <div class="pb-1">
+            <mat-checkbox (change)="layoutDir = (layoutDir == 'rtl' ? 'ltr' : 'rtl')" >RTL</mat-checkbox>
          </div>
-         <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-pink')}">
-            <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-pink')"><i aria-hidden="true" class="color-pink fa fa-circle fa-lg"></i>
-            Pink</a>
+         <div class="pb-3">
+            <mat-form-field>
+               <mat-select placeholder="Language" class="mt-1" [(ngModel)]="currentLang" #langSelect="ngModel" (ngModelChange)="translate.use(currentLang)">
+               <mat-option *ngFor="let lang of translate.getLangs()" [value]="lang">{{ lang }}</mat-option>
+               </mat-select>
+            </mat-form-field>
          </div>
-         <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-blue')}">
-            <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-blue')"><i aria-hidden="true" class="color-blue fa fa-circle fa-lg"></i>
-            Blue</a>
-         </div>
-         <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-green-deep')}">
-            <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-green-deep')"><i aria-hidden="true" class="color-green-deep fa fa-circle fa-lg"></i>
-            Green Deep</a>
-         </div>
-         <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-brown')}">
-            <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-brown')"><i aria-hidden="true" class="color-brown fa fa-circle fa-lg"></i>
-            Brown</a>
-         </div>
-         <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-orange')}">
-            <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-orange')"><i aria-hidden="true" class="color-orange fa fa-circle fa-lg"></i>
-            Orange</a>
-         </div>
-         dd
-         <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-cyan')}">
-               <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-cyan')"><i aria-hidden="true" class="color-cyan fa fa-circle fa-lg"></i>
-               Cyan</a>
-            </div>
-      </div>
-      <div class="color-header clearfix">
-         <span class="mb-2 d-block"><strong>Header Color</strong></span>
-         <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-default')}">
-            <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-default')"><i aria-hidden="true" class="color-default fa fa-circle fa-lg def"></i>
-            Default</a>
-         </div>
-         <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-green')}">
-            <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-green')"><i aria-hidden="true" class="color-green fa fa-circle fa-lg"></i>
-            Green</a>
-         </div>
-         <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-red')}">
-            <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-red')"><i aria-hidden="true" class="color-red fa fa-circle fa-lg"></i>
-            Red</a>
-         </div>
-         <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-purple')}">
-            <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-purple')"><i aria-hidden="true" class="color-purple fa fa-circle fa-lg"></i>
-            Purple</a>
-         </div>
-         <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-pink')}">
-            <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-pink')"><i aria-hidden="true" class="color-pink fa fa-circle fa-lg"></i>
-            Pink</a>
-         </div>
-         <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-blue')}">
-            <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-blue')"><i aria-hidden="true" class="color-blue fa fa-circle fa-lg"></i>
-            Blue</a>
-         </div>
-         <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-green-deep')}">
-            <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-green-deep')"><i aria-hidden="true" class="color-green-deep fa fa-circle fa-lg"></i>
-            Green Deep</a>
-         </div>
-         <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-brown')}">
-            <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-brown')"><i aria-hidden="true" class="color-brown fa fa-circle fa-lg"></i>
-            Brown</a>
-         </div>
-         <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-orange')}">
-            <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-orange')"><i aria-hidden="true" class="color-orange fa fa-circle fa-lg"></i>
-            Orange</a>
-         </div>
-         <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-cyan')}">
-               <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-cyan')"><i aria-hidden="true" class="color-cyan fa fa-circle fa-lg"></i>
-               Cyan</a>
-            </div>
-      </div>
-      <div class="pb-1">
-        <mat-checkbox (change)="changeMenuLayout($event.checked)">Horizontal Menu</mat-checkbox>
-     </div>
-      <div class="pb-1">
-         <mat-checkbox [(ngModel)]="collapseSidebar" (change)="compactSidebar = false">Collapsed Sidebar</mat-checkbox>
-      </div>
-      <div class="pb-1">
-         <mat-checkbox [(ngModel)]="compactSidebar" (change)="collapseSidebar = false">Compact Sidebar</mat-checkbox>
-      </div>
-      <div class="pb-1">
-         <mat-checkbox [(ngModel)]="boxed">Boxed Layout</mat-checkbox>
-      </div>
-      <div class="pb-1">
-         <mat-checkbox [(ngModel)]="dark" >Dark Mode</mat-checkbox>
-      </div>
-      <div class="pb-1">
-         <mat-checkbox (change)="layoutDir = (layoutDir == 'rtl' ? 'ltr' : 'rtl')" >RTL</mat-checkbox>
-      </div>
-      <div class="pb-3">
-         <mat-form-field>
-            <mat-select placeholder="Language" class="mt-1" [(ngModel)]="currentLang" #langSelect="ngModel" (ngModelChange)="translate.use(currentLang)">
-            <mat-option *ngFor="let lang of translate.getLangs()" [value]="lang">{{ lang }}</mat-option>
-            </mat-select>
-         </mat-form-field>
-      </div>
-   </mat-card-content>
-</mat-card> -->
-<!-- /Demo Purposes Only -->
-
-</div>
-
-<!-- <app-footer style="overflow: hidden;"></app-footer> -->
-<!-- <footer class="footer">
-      <h5>&#9400; TN Schools, All rights reserved</h5>
-     </footer> -->
+      </mat-card-content>
+   </mat-card> -->
+   <!-- /Demo Purposes Only -->
+   
+   </div>
+   
+   <!-- <app-footer style="overflow: hidden;"></app-footer> -->
+   <!-- <footer class="footer">
+         <h5>&#9400; TN Schools, All rights reserved</h5>
+        </footer> -->
+   
\ No newline at end of file
diff --git a/ng8-seed/src/app/layouts/admin/admin-layout.component.ts b/ng8-seed/src/app/layouts/admin/admin-layout.component.ts
index fa483c2..816b336 100644
--- a/ng8-seed/src/app/layouts/admin/admin-layout.component.ts
+++ b/ng8-seed/src/app/layouts/admin/admin-layout.component.ts
@@ -237,7 +237,7 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
   // [routerLink]="['/'+menuitem.state]"
   navRedirection(menuitem){
     console.log(menuitem,this.user_name)
-    if(menuitem.state == 'authentication'){
+    if(menuitem.state == 'login'){
       if(this.user_name != ''){
         // return
         this.router.navigateByUrl('/user-profile')
@@ -287,4 +287,12 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
     this.router.navigateByUrl('/'+menuitem.state)
     }
   }
+  SubMenu(childitem){
+    if(childitem.name == 'Log Out'){
+     this.signOut()
+    }
+    else{
+    this.router.navigateByUrl('/'+childitem.state)
+    }
+  }
 }
diff --git a/ng8-seed/src/app/shared/menu-items/horizontal-menu-items.ts b/ng8-seed/src/app/shared/menu-items/horizontal-menu-items.ts
index 04fc82e..20d8978 100644
--- a/ng8-seed/src/app/shared/menu-items/horizontal-menu-items.ts
+++ b/ng8-seed/src/app/shared/menu-items/horizontal-menu-items.ts
@@ -61,12 +61,22 @@ const HORIZONTALMENUITEMS = [
 
   {
     state: '',
-    name: 'General Guidelines',
+    name: 'Guidelines',
     type: 'link',
     icon: 'lock'
   },
   {
-    state: 'authentication',
+    state: '',
+    name: 'My Account',
+    type: 'sub',
+    icon: 'lock',
+    children: [
+          {state: 'user-profile', name: 'My Account'},
+          {state: '', name: 'Log Out'}
+        ]
+  },
+  {
+    state: 'login',
     name: 'Login',
     type: 'link',
     icon: 'lock'
diff --git a/ng8-seed/src/assets/images/csr-img/TN_client_logo/13.png b/ng8-seed/src/assets/images/csr-img/TN_client_logo/13.png
new file mode 100644
index 0000000..4c5459d
Binary files /dev/null and b/ng8-seed/src/assets/images/csr-img/TN_client_logo/13.png differ