diff --git a/src/app/demo/view/tabledemo.component.html b/src/app/demo/view/tabledemo.component.html
index fff7c05..7bf7af3 100644
--- a/src/app/demo/view/tabledemo.component.html
+++ b/src/app/demo/view/tabledemo.component.html
@@ -8,7 +8,7 @@
 						<button pButton label="Clear" class="p-button-outlined mb-2" icon="pi pi-filter-slash" (click)="clear(dt1)"></button>
 						<span class="p-input-icon-left mb-2">
 							<i class="pi pi-search"></i>
-							<input pInputText type="text" #filter (input)="dt1.filterGlobal($event.target.value, 'contains')" placeholder="Search keyword" class="w-full"/>
+							<input pInputText type="text" #filter (input)="dt1.filterGlobal($event.target.value, 'contains')" placeholder="Search Keyword" class="w-full"/>
 						</span>
 					</div>
 				</ng-template>
@@ -17,13 +17,13 @@
 						<th>
 							<div class="flex justify-content-between align-items-center">
 								Name
-								<p-columnFilter type="text" field="name" display="menu"></p-columnFilter>
+								<p-columnFilter type="text" field="name" display="menu" placeholder="Search by name"></p-columnFilter>
 							</div>
 						</th>
 						<th>
 							<div class="flex justify-content-between align-items-center">
 								Country
-								<p-columnFilter type="text" field="country.name" display="menu"></p-columnFilter>
+								<p-columnFilter type="text" field="country.name" display="menu" placeholder="Search by country"></p-columnFilter>
 							</div>
 						</th>
 						<th>
@@ -36,11 +36,11 @@
 										</div>
 									</ng-template>
 									<ng-template pTemplate="filter" let-value let-filter="filterCallback">
-										<p-multiSelect [ngModel]="value" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name">
+										<p-multiSelect [ngModel]="value" [style]="{'min-width': '12rem'}" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name">
 											<ng-template let-option pTemplate="item">
 												<div class="p-multiselect-representative-option">
-													<img [alt]="option.label" src="assets/showcase/images/demo/avatar/{{option.image}}" width="32" style="vertical-align: middle" />
-													<span class="ml-1">{{option.name}}</span>
+													<img [alt]="option.label" src="assets/demo/images/avatar/{{option.image}}" width="32" style="vertical-align: middle" />
+													<span class="ml-2">{{option.name}}</span>
 												</div>
 											</ng-template>
 										</p-multiSelect>
@@ -51,7 +51,7 @@
 						<th>
 							<div class="flex justify-content-between align-items-center">
 								Date
-								<p-columnFilter type="date" field="date" display="menu"></p-columnFilter>
+								<p-columnFilter type="date" field="date" display="menu" placeholder="mm/dd/yyyy"></p-columnFilter>
 							</div>
 						</th>
 						<th>
@@ -98,30 +98,30 @@
 				</ng-template>
 				<ng-template pTemplate="body" let-customer>
 					<tr>
-						<td style="min-width: 200px;">
+						<td style="min-width: 12rem;">
 							{{customer.name}}
 						</td>
-						<td style="min-width: 200px;">
+						<td style="min-width: 12rem;">
 							<img src="assets/demo/flags/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
 							<span class="image-text ml-2">{{customer.country.name}}</span>
 						</td>
-						<td style="min-width: 200px;">
+						<td style="min-width: 14rem;">
 							<img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle"/>
 							<span class="image-text ml-2">{{customer.representative.name}}</span>
 						</td>
-						<td style="min-width: 200px;">
+						<td style="min-width: 10rem;">
 							{{customer.date | date: 'MM/dd/yyyy'}}
 						</td>
-						<td style="min-width: 200px;">
+						<td style="min-width: 10rem;">
 							{{customer.balance | currency:'USD':'symbol'}}
 						</td>
-						<td style="min-width: 200px;">
+						<td style="min-width: 12rem;">
 							<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
 						</td>
-						<td style="min-width: 200px;">
+						<td style="min-width: 12rem;">
 							<p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
 						</td>
-						<td class="text-center" style="min-width: 50px;">
+						<td class="text-center" style="min-width: 8rem;">
 							<i class="pi" [ngClass]="{'true-icon pi-check-circle text-green-500': customer.verified, 'false-icon pi-times-circle text-pink-500 ': !customer.verified}"></i>
 						</td>
 					</tr>
@@ -131,6 +131,11 @@
 						<td colspan="7">No customers found.</td>
 					</tr>
 				</ng-template>
+				<ng-template pTemplate="loadingbody">
+					<tr>
+						<td colspan="7">Loading customers data. Please wait.</td>
+					</tr>
+				</ng-template>
     		</p-table>
 		</div>
 
@@ -176,7 +181,7 @@
 		<div class="card">
 			<h5>Row Expand</h5>
 			<p-toast></p-toast>
-			<p-table [value]="products" dataKey="name" [expandedRowKeys]="expandedRows" styleClass="p-datatable-customers p-datatable-selectable rowexpand-table" responsiveLayout="scroll">
+			<p-table [value]="products" dataKey="name" [expandedRowKeys]="expandedRows" responsiveLayout="scroll">
 				<ng-template pTemplate="caption">
 					<button pButton icon="pi pi-fw {{isExpanded ? 'pi-minus' : 'pi-plus'}}" label="{{isExpanded ? 'Collapse All' : 'Expand All'}}" (click)="expandAll()"></button>
 					<div class="flex table-header">
@@ -198,19 +203,19 @@
 						<td>
 							<button type="button" pButton pRipple [pRowToggler]="product" class="p-button-text p-button-rounded p-button-plain" [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
 						</td>
-						<td><span class="p-column-title">Name</span>{{product.name}}</td>
-						<td><span class="p-column-title">Image</span><img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" class="shadow-4" /></td>
-						<td><span class="p-column-title">Price</span>{{product.price | currency:'USD'}}</td>
-						<td><span class="p-column-title">Category</span>{{product.category}}</td>
-						<td><span class="p-column-title">Reviews</span><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td>
-						<td><span class="p-column-title">Status</span><span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span></td>
+						<td>{{product.name}}</td>
+						<td><img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" class="shadow-4" /></td>
+						<td>{{product.price | currency:'USD'}}</td>
+						<td>{{product.category}}</td>
+						<td><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td>
+						<td><span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span></td>
 					</tr>
 				</ng-template>
 				<ng-template pTemplate="rowexpansion" let-product>
 					<tr>
 						<td colspan="7">
 							<div class="p-3">
-								<p-table [value]="product.orders" dataKey="id">
+								<p-table [value]="product.orders" dataKey="id" responsiveLayout="scroll">
 									<ng-template pTemplate="header">
 					<tr>
 						<th pSortableColumn="id">Id <p-sortIcon field="price"></p-sortIcon></th>
@@ -223,11 +228,11 @@
 				</ng-template>
 				<ng-template pTemplate="body" let-order>
 					<tr>
-						<td><span class="p-column-title">Id</span>{{order.id}}</td>
-						<td><span class="p-column-title">Customer</span>{{order.customer}}</td>
-						<td><span class="p-column-title">Date</span>{{order.date}}</td>
-						<td><span class="p-column-title">Amount</span>{{order.amount | currency:'USD'}}</td>
-						<td><span class="p-column-title">Status</span><span [class]="'order-badge order-' + order.status.toLowerCase()">{{order.status}}</span></td>
+						<td>{{order.id}}</td>
+						<td>{{order.customer}}</td>
+						<td>{{order.date}}</td>
+						<td>{{order.amount | currency:'USD'}}</td>
+						<td><span [class]="'order-badge order-' + order.status.toLowerCase()">{{order.status}}</span></td>
 						<td><p-button type="button" icon="pi pi-search"></p-button></td>
 					</tr>
 				</ng-template>
@@ -248,8 +253,7 @@
 	<div class="col-12">
 		<div class="card">
 			<h5>Subheader Grouping</h5>
-			<p-table [value]="customers3" rowGroupMode="subheader" groupRowsBy="representative.name" sortField="representative.name" sortMode="single" (onSort)="onSort()" responsiveLayout="scroll" [scrollable]="true" scrollHeight="600px"
-					styleClass="p-datatable-customers">
+			<p-table [value]="customers3" rowGroupMode="subheader" groupRowsBy="representative.name" sortField="representative.name" sortMode="single" (onSort)="onSort()" responsiveLayout="scroll" [scrollable]="true" scrollHeight="400px">
 				<ng-template pTemplate="header">
 					<tr>
 						<th>Name</th>
@@ -267,20 +271,20 @@
 						</td>
 					</tr>
 					<tr>
-						<td style="min-width: 220px;"><span class="p-column-title">Name</span>
+						<td style="min-width: 220px;">
 							{{customer.name}}
 						</td>
-						<td style="min-width: 220px;"><span class="p-column-title">Country</span>
+						<td style="min-width: 220px;">
 							<img src="assets/demo/flags/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
 							<span class="image-text" style="margin-left: .5em">{{customer.country.name}}</span>
 						</td>
-						<td style="min-width: 300px;"><span class="p-column-title">Company</span>
+						<td style="min-width: 300px;">
 							{{customer.company}}
 						</td>
-						<td style="min-width: 220px;"><span class="p-column-title">Status</span>
+						<td style="min-width: 220px;">
 							<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
 						</td>
-						<td style="min-width: 220px;"><span class="p-column-title">Date</span>
+						<td style="min-width: 220px;">
 							{{customer.date}}
 						</td>
 					</tr>
diff --git a/src/app/demo/view/tabledemo.component.ts b/src/app/demo/view/tabledemo.component.ts
index 3626351..901e679 100644
--- a/src/app/demo/view/tabledemo.component.ts
+++ b/src/app/demo/view/tabledemo.component.ts
@@ -9,19 +9,6 @@ import { MessageService, ConfirmationService } from 'primeng/api'
 
 @Component({
     templateUrl: './tabledemo.component.html',
-    styleUrls: ['./tabledemo.scss'],
-    styles: [`
-        :host ::ng-deep .p-datatable-gridlines p-progressBar {
-            width: 100%;
-        }
-
-        @media screen and (max-width: 960px) {
-            :host ::ng-deep .p-datatable.p-datatable-customers.rowexpand-table .p-datatable-tbody > tr > td:nth-child(6) {
-                display: flex;
-            }
-        }
-
-    `],
     providers: [MessageService, ConfirmationService]
 })
 export class TableDemoComponent implements OnInit {
@@ -123,11 +110,11 @@ export class TableDemoComponent implements OnInit {
             }
         }
     }
-   
+
     expandAll() {
         if(!this.isExpanded){
           this.products.forEach(product => this.expandedRows[product.name] = true);
-          
+
         } else {
           this.expandedRows={};
         }
diff --git a/src/app/demo/view/tabledemo.scss b/src/app/demo/view/tabledemo.scss
index 712d7ac..139597f 100644
--- a/src/app/demo/view/tabledemo.scss
+++ b/src/app/demo/view/tabledemo.scss
@@ -1,200 +1,2 @@
-:host ::ng-deep {
 
-	.p-progressbar {
-		height: .5rem;
-		background-color: #D8DADC;
-		min-width:100px;
 
-		.p-progressbar-value {
-			background-color: #607D8B;
-		}
-	}
-
-	.table-header {
-		display: flex;
-		justify-content: space-between;
-	}
-
-	.p-calendar .p-datepicker {
-		min-width: 25rem;
-
-		td {
-			font-weight: 400;
-		}
-	}
-
-	.p-datatable.p-datatable-customers {
-		.p-datatable-header {
-			padding: 1rem;
-			text-align: left;
-			font-size: 1.5rem;
-		}
-
-		.p-paginator {
-			padding: 1rem;
-		}
-
-		.p-datatable-thead > tr > th {
-			text-align: left;
-		}
-
-		.p-dropdown-label:not(.p-placeholder) {
-			text-transform: uppercase;
-		}
-	}
-
-	.p-datatable.p-datatable-customers:not(.p-datatable-gridlines) {
-		.p-datatable-tbody > tr > td {
-			cursor: auto;
-		}
-	}
-
-	/* Responsive */
-	.p-datatable-customers .p-datatable-tbody > tr > td .p-column-title {
-		display: none;
-	}
-}
-
-.customer-badge {
-	border-radius: 2px;
-	padding: .25em .5rem;
-	text-transform: uppercase;
-	font-weight: 700;
-	font-size: 12px;
-	letter-spacing: .3px;
-
-	&.status-qualified {
-		background: #C8E6C9;
-		color: #256029;
-	}
-
-	&.status-unqualified {
-		background: #FFCDD2;
-		color: #C63737;
-	}
-
-	&.status-negotiation {
-		background: #FEEDAF;
-		color: #8A5340;
-	}
-
-	&.status-new {
-		background: #B3E5FC;
-		color: #23547B;
-	}
-
-	&.status-renewal {
-		background: #ECCFFF;
-		color: #694382;
-	}
-
-	&.status-proposal {
-		background: #FFD8B2;
-		color: #805B36;
-	}
-}
-
-.product-badge {
-	border-radius: 2px;
-	padding: .25em .5rem;
-	text-transform: uppercase;
-	font-weight: 700;
-	font-size: 12px;
-	letter-spacing: .3px;
-
-	&.status-instock {
-		background: #C8E6C9;
-		color: #256029;
-	}
-
-	&.status-outofstock {
-		background: #FFCDD2;
-		color: #C63737;
-	}
-
-	&.status-lowstock {
-		background: #FEEDAF;
-		color: #8A5340;
-	}
-}
-
-.order-badge {
-	border-radius: 2px;
-	padding: .25em .5rem;
-	text-transform: uppercase;
-	font-weight: 700;
-	font-size: 12px;
-	letter-spacing: .3px;
-
-	&.order-delivered {
-		background: #C8E6C9;
-		color: #256029;
-	}
-
-	&.order-cancelled {
-		background: #FFCDD2;
-		color: #C63737;
-	}
-
-	&.order-pending {
-		background: #FEEDAF;
-		color: #8A5340;
-	}
-
-	&.order-returned {
-		background: #ECCFFF;
-		color: #694382;
-	}
-}
-
-@media screen and (max-width: 960px) {
-	:host ::ng-deep {
-		.p-datatable {
-			&.p-datatable-customers {
-				.p-datatable-thead > tr > th,
-				.p-datatable-tfoot > tr > td {
-					display: none !important;
-				}
-
-				.p-datatable-tbody > tr {
-					border-bottom: 1px solid var(--surface-d);
-
-					> td {
-						text-align: left;
-						display: block;
-						border: 0 none !important;
-						width: 100% !important;
-						float: left;
-						clear: left;
-						border: 0 none;
-
-						.p-column-title {
-							padding: .4rem;
-							min-width: 30%;
-							display: inline-block;
-							margin: -.4rem 1rem -.4rem -.4rem;
-							font-weight: bold;
-						}
-
-						.p-progressbar {
-							margin-top: .5rem;
-						}
-					}
-				}
-
-				&.p-datatable-selectable{
-					.p-datatable-tbody>tr{
-						>td{
-							display:flex !important;
-							justify-content: space-between;
-						}
-
-					}
-				}
-			}
-		}
-		
-	}
-	
-
-}
diff --git a/src/app/pages/app.crud.component.html b/src/app/pages/app.crud.component.html
index 5c1314c..2ce2640 100644
--- a/src/app/pages/app.crud.component.html
+++ b/src/app/pages/app.crud.component.html
@@ -13,8 +13,8 @@
                     <button pButton pRipple label="Export" icon="pi pi-upload" class="p-button-help mb-2" (click)="dt.exportCSV()"></button>
                 </ng-template>
             </p-toolbar>
-            
-            <p-table #dt [value]="products" [columns]="cols" [rows]="10" [globalFilterFields]="['name','country.name','representative.name','status']" [rows]="10" [paginator]="true" [rowsPerPageOptions]="[10,20,30]" [showCurrentPageReport]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [(selection)]="selectedProducts" [rowHover]="true" dataKey="id" styleClass="p-datatable-customers" class="p-datatable-responsive">
+
+            <p-table #dt [value]="products" [columns]="cols" responsiveLayout="scroll" [rows]="10" [globalFilterFields]="['name','country.name','representative.name','status']" [rows]="10" [paginator]="true" [rowsPerPageOptions]="[10,20,30]" [showCurrentPageReport]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [(selection)]="selectedProducts" [rowHover]="true" dataKey="id" styleClass="p-datatable-customers" class="p-datatable-responsive">
                 <ng-template pTemplate="caption">
                     <div class="flex flex-md-row justify-content-md-between table-header">
                         <h5 class="m-0">Manage Products</h5>
diff --git a/src/app/pages/app.crud.component.ts b/src/app/pages/app.crud.component.ts
index 54e82bb..c0e55c0 100644
--- a/src/app/pages/app.crud.component.ts
+++ b/src/app/pages/app.crud.component.ts
@@ -5,30 +5,6 @@ import {ConfirmationService, MessageService} from 'primeng/api';
 
 @Component({
     templateUrl: './app.crud.component.html',
-    styleUrls: ['../demo/view/tabledemo.scss'],
-    styles: [`
-        :host ::ng-deep .p-dialog .product-image {
-            width: 150px;
-            margin: 0 auto 2rem auto;
-            display: block;
-        }
-
-        @media screen and (max-width: 960px) {
-            :host ::ng-deep .p-datatable.p-datatable-customers .p-datatable-tbody > tr > td:last-child {
-                text-align: center;
-            }
-
-            :host ::ng-deep .p-datatable.p-datatable-customers .p-datatable-tbody > tr > td:nth-child(6) {
-                display: flex;
-            }
-        }
-        @media (max-width: 1024px){
-            :host ::ng-deep .p-dialog{
-                margin: 0 20px;
-            }
-        }
-
-    `],
     providers: [MessageService, ConfirmationService]
 })
 export class AppCrudComponent implements OnInit {