diff --git a/src/app/demo/components/uikit/list/listdemo.component.html b/src/app/demo/components/uikit/list/listdemo.component.html
index 6fc03c7..80f2f38 100644
--- a/src/app/demo/components/uikit/list/listdemo.component.html
+++ b/src/app/demo/components/uikit/list/listdemo.component.html
@@ -4,9 +4,9 @@
 			<h5>DataView</h5>
 			<p-dataView #dv [value]="products" [paginator]="true" [rows]="9" filterBy="name" [sortField]="sortField" [sortOrder]="sortOrder" layout="grid">
 				<ng-template pTemplate="header">
-					<div class="grid grid-nogutter flex-column md:flex-row justify-content-between">
+					<div class="flex flex-column md:flex-row md:justify-content-between gap-2">
 						<p-dropdown [options]="sortOptions" placeholder="Sort By Price" (onChange)="onSortChange($event)"></p-dropdown>
-						<span class="p-input-icon-left mb-2 md:mb-0">
+						<span class="p-input-icon-left">
                             <i class="pi pi-search"></i>
                             <input type="search" pInputText placeholder="Search by Name" (input)="onFilter(dv, $event)">
                         </span>	
@@ -18,10 +18,10 @@
 					<div class="col-12">
 						<div class="flex flex-column md:flex-row align-items-center p-3 w-full">
 							<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" class="my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5"/>
-							<div class="flex-1 text-center md:text-left">
+							<div class="flex-1 flex flex-column align-items-center text-center md:text-left">
 								<div class="font-bold text-2xl">{{product.name}}</div>
 								<div class="mb-2">{{product.description}}</div>
-								<p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
+								<p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false" styleClass="mb-2"></p-rating>
 								<div class="flex align-items-center mt-2">
 									<i class="pi pi-tag mr-2"></i>
 									<span class="font-semibold">{{product.category}}</span>
@@ -29,7 +29,7 @@
 							</div>
 							<div class="flex flex-row md:flex-column justify-content-between w-full md:w-auto align-items-center md:align-items-end mt-5 md:mt-0">
 								<span class="text-2xl font-semibold mb-2 align-self-center md:align-self-end">${{product.price}}</span>
-								<p-button icon="pi pi-shopping-cart" label="Add to Cart" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'" class="mb-2"></p-button>
+								<p-button icon="pi pi-shopping-cart" label="Add to Cart" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'" styleClass="mb-2 p-button-sm"></p-button>
 								<span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
 							</div>
 						</div>
@@ -39,14 +39,14 @@
 				<ng-template let-product pTemplate="gridItem">
 					<div class="col-12 md:col-4">
 						<div class="card m-3 border-1 surface-border">
-							<div class="flex align-items-center justify-content-between mb-2">
+							<div class="flex flex-wrap gap-2 align-items-center justify-content-between mb-2">
 								<div class="flex align-items-center">
 									<i class="pi pi-tag mr-2"></i>
 									<span class="font-semibold">{{product.category}}</span>
 								</div>
-								<span [class]="'sm:ml-2 product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
+								<span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
 							</div>
-							<div class="text-center mb-3">
+							<div class="flex flex-column align-items-center text-center mb-3">
 								<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" class="w-9 shadow-2 my-3 mx-0"/>
 								<div class="text-2xl font-bold">{{product.name}}</div>
 								<div class="mb-3">{{product.description}}</div>
@@ -63,7 +63,7 @@
 		</div>
 	</div>
 
-	<div class="col-12 lg:col-8">
+	<div class="col-12 xl:col-8">
 		<div class="card">
 			<h5>PickList</h5>
 			<p-pickList [source]="sourceCities" [target]="targetCities" sourceHeader="From" targetHeader="To" [dragdrop]="true"
@@ -75,7 +75,7 @@
 		</div>
 	</div>
 
-	<div class="col-12 lg:col-4">
+	<div class="col-12 xl:col-4">
 		<div class="card">
 			<h5>OrderList</h5>
 			<p-orderList [value]="orderCities" header="Cities" [dragdrop]="true" [listStyle]="{'height':'250px'}">
diff --git a/src/app/demo/components/uikit/overlays/overlaysdemo.component.html b/src/app/demo/components/uikit/overlays/overlaysdemo.component.html
index 92b0ec4..f4f0f5b 100755
--- a/src/app/demo/components/uikit/overlays/overlaysdemo.component.html
+++ b/src/app/demo/components/uikit/overlays/overlaysdemo.component.html
@@ -1,7 +1,7 @@
 <div class="grid">
     <p-toast></p-toast>
     <div class="col-12 lg:col-6">
-        <div class="card p-fluid">
+        <div class="card">
             <h5>Dialog</h5>
             <p-dialog header="Dialog" [(visible)]="display" [modal]="true" showEffect="fade" [style]="{width: '30vw'}" [breakpoints]="{'960px': '75vw'}">
                 <p class="line-height-3 m-0">
@@ -16,7 +16,7 @@
             </p-dialog>
             <div class="grid">
                 <div class="col-12">
-                    <button (click)="display=true" pButton icon="pi pi-external-link" label="Show" style="width:auto;"></button>
+                    <button (click)="display=true" pButton icon="pi pi-external-link" label="Show"></button>
                 </div>
             </div>
         </div>
diff --git a/src/app/demo/components/uikit/panels/panelsdemo.component.html b/src/app/demo/components/uikit/panels/panelsdemo.component.html
index 89403fb..f122747 100755
--- a/src/app/demo/components/uikit/panels/panelsdemo.component.html
+++ b/src/app/demo/components/uikit/panels/panelsdemo.component.html
@@ -192,41 +192,23 @@
     <div class="col-12">
         <div class="card">
             <h5>Splitter</h5>
-            <p-splitter [style]="{'height': '300px'}" [panelSizes]="[5,0]" styleClass="mb-5" [panelStyle]="{'overflow': 'scroll'}">
+            <p-splitter [style]="{'height': '300px'}" [panelSizes]="[30,70]">
                 <ng-template pTemplate>
-                    <p class="col m-3">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-                        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
-                        in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
-                        id est laborum.
-                    </p>
+                    <div class="col flex align-items-center justify-content-center">
+                        Panel 1
+                    </div>
                 </ng-template>
                 <ng-template pTemplate>
-                    <p-splitter layout="vertical" [panelSizes]="[30,70]" [minSizes]="[10,10]" [style]="{'overflow':'scroll'}">
+                    <p-splitter layout="vertical" [panelSizes]="[50,50]" [minSizes]="[10,10]">
                         <ng-template pTemplate>
-                            <p class="col m-3">
-                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
-                                doloremque
-                                laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
-                                architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
-                                voluptas
-                                sit
-                                aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
-                                voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius
-                                modi.
-                            </p>
+                            <div class="col flex align-items-center justify-content-center">
+                                Panel 2
+                            </div>
                         </ng-template>
                         <ng-template pTemplate>
-                            <p class="col m-3">
-                                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
-                                praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
-                                excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
-                                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
-                                rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
-                                eligendi optio cumque nihil impedit quo minus.
-                            </p>
+                            <div class="col flex align-items-center justify-content-center">
+                                Panel 3
+                            </div>
                         </ng-template>
                     </p-splitter>
                 </ng-template>
diff --git a/src/app/demo/components/uikit/table/tabledemo.component.html b/src/app/demo/components/uikit/table/tabledemo.component.html
index 0f18f2b..c377be0 100644
--- a/src/app/demo/components/uikit/table/tabledemo.component.html
+++ b/src/app/demo/components/uikit/table/tabledemo.component.html
@@ -128,12 +128,12 @@
 				</ng-template>
 				<ng-template pTemplate="emptymessage">
 					<tr>
-						<td colspan="7">No customers found.</td>
+						<td colspan="8">No customers found.</td>
 					</tr>
 				</ng-template>
 				<ng-template pTemplate="loadingbody">
 					<tr>
-						<td colspan="7">Loading customers data. Please wait.</td>
+						<td colspan="8">Loading customers data. Please wait.</td>
 					</tr>
 				</ng-template>
     		</p-table>