diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html
index b50289b..64732bc 100644
--- a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html
@@ -1,7 +1,7 @@
 <ng-container *ngIf="loading" [ngTemplateOutlet]="loadingTemplate"></ng-container> 
 
 <table [ngClass]="tableClasses" style="min-height: 300px;">
-  <thead>
+  <thead [ngClass]="headerClasses">
     <tr *ngFor="let header of gridHeaders" >
       <th [attr.colspan]="columns.length">
         <ng-container [ngTemplateOutlet]="header.template"></ng-container>
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/directives/list-view-footer.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/directives/list-view-footer.directive.ts
new file mode 100644
index 0000000..3bdb23a
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/directives/list-view-footer.directive.ts
@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[psListViewFooter]'
+})
+export class ListViewFooterDirective {
+
+  constructor(public template: TemplateRef<any>) { }
+
+}
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/directives/list-view-header.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/directives/list-view-header.directive.ts
new file mode 100644
index 0000000..c9e9fc0
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/directives/list-view-header.directive.ts
@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[psListViewHeader]'
+})
+export class ListViewHeaderDirective {
+
+  constructor(public template: TemplateRef<any>) { }
+
+}
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/directives/list-view-item.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/directives/list-view-item.directive.ts
new file mode 100644
index 0000000..8f5e757
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/directives/list-view-item.directive.ts
@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[psListViewItem]'
+})
+export class ListViewItemDirective {
+
+  constructor(public template: TemplateRef<any>) { }
+
+}
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/directives/list-view-seperator.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/directives/list-view-seperator.directive.ts
new file mode 100644
index 0000000..a58151a
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/directives/list-view-seperator.directive.ts
@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[psListViewSeperator]'
+})
+export class ListViewSeperatorDirective {
+
+  constructor(public template: TemplateRef<any>) { }
+
+}
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/list-view.module.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/list-view.module.ts
index 861d768..5cfa430 100644
--- a/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/list-view.module.ts
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/list-view.module.ts
@@ -1,12 +1,25 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { ListViewComponent } from './list-view/list-view.component';
+import { ListViewItemDirective } from './directives/list-view-item.directive';
+import { ListViewHeaderDirective } from './directives/list-view-header.directive';
+import { ListViewFooterDirective } from './directives/list-view-footer.directive';
+import { ListViewSeperatorDirective } from './directives/list-view-seperator.directive';
 
 
 
 @NgModule({
-  declarations: [],
+  declarations: [ListViewComponent, ListViewItemDirective, ListViewHeaderDirective, ListViewFooterDirective, ListViewSeperatorDirective],
   imports: [
     CommonModule
+  ],
+  exports: [
+    ListViewComponent,
+    ListViewItemDirective,
+    ListViewHeaderDirective,
+    ListViewFooterDirective,
+    ListViewSeperatorDirective
+
   ]
 })
 export class ListViewModule { }
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/list-view/list-view.component.html b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/list-view/list-view.component.html
new file mode 100644
index 0000000..6de9b49
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/list-view/list-view.component.html
@@ -0,0 +1,17 @@
+
+<ng-container [ngTemplateOutlet]="getViewHeaderTemplate()"></ng-container>
+<ng-container *ngIf= "!noData else noResultTemplate">
+    <ng-container *ngFor="let item of latestResult.data">
+        <ng-container [ngTemplateOutlet]="getViewItemTemplate()"
+        [ngTemplateOutletContext]="{
+            $implicit: item
+          }">
+        </ng-container>
+    </ng-container>
+</ng-container>
+<ng-container [ngTemplateOutlet]="getViewFooterTemplate()"></ng-container>
+
+
+<ng-template #noResultTemplate>
+          <p>{{noRecords}}</p>
+</ng-template>
\ No newline at end of file
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/list-view/list-view.component.scss b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/list-view/list-view.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/list-view/list-view.component.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/list-view/list-view.component.ts
new file mode 100644
index 0000000..47b73ca
--- /dev/null
+++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/list-view/list-view/list-view.component.ts
@@ -0,0 +1,68 @@
+import { Component, OnInit, Input, OnDestroy, ContentChildren, QueryList, ContentChild } from '@angular/core';
+import { IDataSource, IQueryExecutionResult, IQueryExecutionGroupResult } from '@poweredsoft/data';
+import { Subscription } from 'rxjs';
+import { ListViewItemDirective } from '../directives/list-view-item.directive';
+import { ListViewHeaderDirective } from '../directives/list-view-header.directive';
+import { ListViewFooterDirective } from '../directives/list-view-footer.directive';
+
+@Component({
+  selector: 'ps-list-view',
+  templateUrl: './list-view.component.html',
+  styleUrls: ['./list-view.component.scss']
+})
+export class ListViewComponent implements OnInit, OnDestroy {
+
+  @Input() dataSource: IDataSource<any>;
+  @Input() noRecordsText: string;
+
+  latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any>;
+  loading:boolean;
+
+  private _dataSubscription: Subscription;
+  
+   @ContentChild(ListViewItemDirective) viewItem: ListViewItemDirective;
+   @ContentChild(ListViewHeaderDirective) viewHeader: ListViewHeaderDirective;
+   @ContentChild(ListViewFooterDirective) viewFooter: ListViewFooterDirective;
+  //@ContentChildren(ViewDataDirective) viewData: QueryList<ViewDataDirective>;
+
+  constructor() { 
+  
+  }
+
+  ngOnDestroy(): void {
+    this._dataSubscription.unsubscribe();
+  }
+
+  ngOnInit(): void {
+    this._dataSubscription = this.dataSource.data$.subscribe(newData => {      
+      this.latestResult = newData;
+    });
+  }
+
+  get noData(){
+    return !this.latestResult;
+  }
+
+  get noRecords(){
+    return this.noRecordsText || "No records...";
+  }
+
+  getViewItemTemplate(){
+    if(this.viewItem == null)
+      return null;
+    return this.viewItem.template;
+  }
+
+  getViewHeaderTemplate(){
+    if(this.viewHeader == null)
+      return null;
+    return this.viewHeader.template;
+  }
+
+
+  getViewFooterTemplate(){
+    if(this.viewFooter == null)
+      return null;
+    return this.viewFooter.template;
+  }
+}
diff --git a/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts b/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
index fc3e30d..6734524 100644
--- a/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
+++ b/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts
@@ -13,3 +13,11 @@ export * from './lib/data-grid/directives/data-grid-loader.directive';
 export * from './lib/data-grid/directives/data-grid-cell-filter.directive';
 export * from './lib/data-grid/directives/data-grid-col-sort.directive';
 
+//list view
+export * from './lib/list-view/list-view.module';
+export * from './lib/list-view/list-view/list-view.component';
+export * from './lib/list-view/directives/list-view-item.directive';
+export * from './lib/list-view/directives/list-view-header.directive';
+export * from './lib/list-view/directives/list-view-footer.directive';
+export * from './lib/list-view/directives/list-view-seperator.directive';
+
diff --git a/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.html b/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.html
index 251ed97..7343c42 100644
--- a/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.html
+++ b/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.html
@@ -1 +1,11 @@
-<p>list-view-demo-home works!</p>
+<h1>list view demo</h1>
+
+<ps-list-view [dataSource]="merchantDataSource" >
+    <div *psListViewHeader>Some Header ..</div>
+    <div *psListViewItem="let item">
+        <div>Name: {{item.name}} </div>
+        <div>Address: {{item.address}} </div>
+    </div>
+    <div *psListViewFooter>Some Footer ..</div>
+</ps-list-view>
+
diff --git a/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.spec.ts b/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.spec.ts
deleted file mode 100644
index d31cc21..0000000
--- a/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ListViewDemoHomeComponent } from './list-view-demo-home.component';
-
-describe('ListViewDemoHomeComponent', () => {
-  let component: ListViewDemoHomeComponent;
-  let fixture: ComponentFixture<ListViewDemoHomeComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ListViewDemoHomeComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ListViewDemoHomeComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.ts b/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.ts
index b00abe0..31a3b5a 100644
--- a/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.ts
+++ b/src/app/list-view-demo/list-view-demo-home/list-view-demo-home.component.ts
@@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { IMerchant } from 'src/app/data/services/IMerchant';
+import { IDataSource } from '@poweredsoft/data';
+import { MerchantService } from 'src/app/data/services/merchant.service';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'ps-list-view-demo-home',
@@ -7,9 +11,17 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ListViewDemoHomeComponent implements OnInit {
 
-  constructor() { }
+
+  merchantDataSource: IDataSource<IMerchant>;
+
+
+  constructor(private merchantService: MerchantService) {
+    this.merchantDataSource = merchantService.createDataSource(); //Assign the dataSource
+   }
 
   ngOnInit(): void {
+
+    this.merchantDataSource.refresh();
   }
 
 }
diff --git a/src/app/list-view-demo/list-view-demo.module.ts b/src/app/list-view-demo/list-view-demo.module.ts
index 65c77ac..c046301 100644
--- a/src/app/list-view-demo/list-view-demo.module.ts
+++ b/src/app/list-view-demo/list-view-demo.module.ts
@@ -3,13 +3,16 @@ import { CommonModule } from '@angular/common';
 
 import { ListViewDemoRoutingModule } from './list-view-demo-routing.module';
 import { ListViewDemoHomeComponent } from './list-view-demo-home/list-view-demo-home.component';
+import { ListViewModule } from '@poweredsoft/ngx-cdk-ui';
+
 
 
 @NgModule({
   declarations: [ListViewDemoHomeComponent],
   imports: [
     CommonModule,
-    ListViewDemoRoutingModule
+    ListViewDemoRoutingModule,
+    ListViewModule
   ]
 })
 export class ListViewDemoModule { }