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 1a1c65a..8c61be5 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,67 +40,69 @@
                           <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-2">
-                        <div fxFlex.sm="24.33" fxFlex.xs="100" fxFlex.md="24.33" fxFlex.lg="24.33" fxFlex.xl="24.33" class="m-gap p-gap align-self-center">
+                    <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>
-                        <div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" class="m-gap p-gap">
-                                <div class="sun d-flex">
-                                    <!-- <i class="fa fa-shopping-bag fa-2x align-self-center"></i> -->
-                                    <div class="temp align-self-center">{{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>
+                        <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>
+                        </div>                         
+                    </div>  
                     <div fxLayout fxLayout="row"  fxLayout.xs="column"  fxLayoutGap.xs="0">
-                            <div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" class="m-gap p-gap align-self-center">
+                            <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
                                     <h5 class="mt-0">Students</h5>
                             </div>
-                            <div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" class="m-gap p-gap">
+                        </div>
+                            <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;&nbsp;{{schoolInfo.total}}</div>
+                                        <div class="temp align-self-center">&nbsp;{{schoolInfo.total}}</div>
                                     </div>
                             </div>
-                            <div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" class="m-gap p-gap">
+                            <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;&nbsp;{{schoolInfo.total_b}}</div>
+                                        <div class="temp align-self-center">&nbsp;{{schoolInfo.total_b}}</div>
                                     </div>
                             </div>
-                            <div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" class="m-gap p-gap">
+                            <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;&nbsp;{{schoolInfo.total_g}}</div>
+                                        <div class="temp align-self-center">&nbsp;{{schoolInfo.total_g}}</div>
                                     </div>
                             </div>
                             
                         </div> 
-                        <div fxLayout fxLayout="row"  fxLayout.xs="column"  fxLayoutGap.xs="0">
-                                <div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" class="m-gap p-gap align-self-center">
-                                        <h5 class="mt-0">Staff</h5>
-                                </div>
-                                <div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" class="m-gap p-gap">
-                                        <div class="sun d-flex"> 
-                                            <!-- <<i class="fa fa-shopping-bag fa-2x align-self-center"></i>> -->
-                                            <div class="temp align-self-center">&nbsp;&nbsp;{{schoolInfo.totstaff}}</div>
-                                        </div>
-                                </div>
-                                <div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" class="m-gap p-gap">
-                                        <div class="sun d-flex"> 
-                                            <div class="temp align-self-center">&nbsp;&nbsp;{{schoolInfo.teach_tot}}</div>                                           
-                                        </div>
-                                        <p class="mt-0 mb-0" style="font-size:10px;">Teaching</p>
-                                </div>
-                                <div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" class="m-gap p-gap">
-                                        <div class="sun d-flex">
-                                            <div class="temp align-self-center">&nbsp;&nbsp;{{schoolInfo.nonteach_tot}}</div>                                            
-                                        </div>
-                                        <p class="mt-0 mb-0" style="font-size:10px;">Non-Teaching</p>
-                                </div>
-                                
-                            </div>  
-                          
+                    <div 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">
+                                    <h5 class="mt-0">Staff</h5>
+                            </div>
+                        </div>
+                            <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>
+                            </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>                                    
+                            </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>                                    
+                            </div>
+                            
+                        </div> 
+                                                 
    
                             <div 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">
@@ -166,7 +168,7 @@
                 <mat-tab class="tab-group">
                     <ng-template mat-tab-label>Requirement Details</ng-template>
                     <mat-card-content>
-                     <table style="padding:20px;">
+                     <table style="padding:20px;width: 100% !important;">
                          <tr>
                              <!-- <th>Details</th> -->
                              <th>Material Name</th>
@@ -181,8 +183,8 @@
                              <td>{{item.cost_per_unit}}</td> 
                              <td>{{item.qty}}</td>
                          </tr> 
-                         </table>
-                         <div fxLayout fxLayout="row"  fxLayout.xs="column"  fxLayoutGap.xs="0">
+                         </table> 
+                         <div class="mt-1" 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="end center" class="m-gap p-gap">
                                 <button mat-raised-button (click)="navigate(schoolInfo.school_id)" class="button-cyan">Contribute</button> 
                             </div>