diff --git a/projects/poweredsoft/ngx-data/package.json b/projects/poweredsoft/ngx-data/package.json
index 3626e3f..bb816c1 100644
--- a/projects/poweredsoft/ngx-data/package.json
+++ b/projects/poweredsoft/ngx-data/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@poweredsoft/ngx-data",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "peerDependencies": {
     "@angular/common": "^8.2.4",
     "@angular/core": "^8.2.4",
diff --git a/projects/poweredsoft/ngx-data/src/lib/HttpDataSourceBuilder.ts b/projects/poweredsoft/ngx-data/src/lib/HttpDataSourceBuilder.ts
new file mode 100644
index 0000000..35f18cf
--- /dev/null
+++ b/projects/poweredsoft/ngx-data/src/lib/HttpDataSourceBuilder.ts
@@ -0,0 +1,167 @@
+import { HttpClient, HttpErrorResponse } from "@angular/common/http";
+import { DataSource, IDataSource, IDataSourceCommandAdapterOptions, IDataSourceError, IDataSourceErrorMessage, IDataSourceOptions, IDataSourceQueryAdapterOptions, IDataSourceTransportOptions, IDataSourceValidationError, IQueryCriteria, IQueryExecutionGroupResult, IQueryExecutionResult, IResolveCommandModelEvent } from "@poweredsoft/data";
+import { Observable, of, throwError } from "rxjs";
+import { catchError, switchMap } from "rxjs/operators";
+
+
+
+export class HttpDataSourceOptionsBuilder<TModel, TKey> {
+    
+    private _commands: { [key: string] : IDataSourceCommandAdapterOptions<any> } = {};
+    private _beforeRead: (TQuery: IQueryCriteria) => Observable<IQueryCriteria>;
+    private _keyResolver: (model: TModel) => TKey;
+    private _defaultCriteria: IQueryCriteria;
+    private _query: IDataSourceQueryAdapterOptions<TModel>;
+    private _manageNotificationMessage: boolean = false;
+
+    constructor(private http: HttpClient) {
+
+    }
+    
+    createOptions(): IDataSourceOptions<TModel> {
+        let ret: IDataSourceOptions<TModel> = {
+            resolveIdField: this._keyResolver,
+            defaultCriteria: this._defaultCriteria,
+            manageNotificationMessage: this._manageNotificationMessage,
+            transport: this.createTransport()
+        };
+        return ret;
+    }
+
+    manageNotificationMessage(shouldManage: boolean) {
+        this._manageNotificationMessage = shouldManage;
+        return this;
+    }
+
+    createDataSource() : IDataSource<TModel>{
+        return new DataSource<TModel>(this.createOptions());
+    }
+
+    protected createTransport(): IDataSourceTransportOptions<TModel> {
+        let ret: IDataSourceTransportOptions<TModel> = {
+            query: this._query,
+            commands: this._commands
+        };
+        return ret;
+    }
+
+    public keyResolver(resolver: (model: TModel) => TKey) {
+        this._keyResolver = resolver;
+        return this;
+    }
+
+    public beforeRead<TDynamicQuery extends IQueryCriteria>(beforeRead: (query: TDynamicQuery) => Observable<TDynamicQuery>)
+    {
+        this._beforeRead = beforeRead;
+        return this;
+    }
+
+    public queryUrl(url: string) {
+        this._query = {
+            adapter: {
+                handle: (query: IQueryCriteria) => {
+                    const finalBeforeRead = this._beforeRead || (t => of(query));
+                    return finalBeforeRead(query)
+                        .pipe(
+                            switchMap(finalQuery => {
+                                return this.http.post<IQueryExecutionResult<TModel> & IQueryExecutionGroupResult<TModel>>(url, finalQuery);
+                            })
+                        );
+                }
+            }
+        }
+
+        return this;
+    }
+
+    public queryHandler<TQuery extends IQueryCriteria>(queryHandler: (query: TQuery) => Observable<IQueryExecutionResult<TModel> & IQueryExecutionGroupResult<TModel>>) {
+        this._query = {
+            adapter: {
+                handle: (query: TQuery) => {
+                    const finalBeforeRead = this._beforeRead || (t => of(query));
+                    return finalBeforeRead(query)
+                        .pipe(
+                            switchMap(finalQuery => {
+                                return queryHandler(finalQuery as any);
+                            })
+                        );
+                }
+            }
+        }
+
+        return this;
+    }
+
+    private _handleErrorPipe(err: HttpErrorResponse) : Observable<IDataSourceError> {
+
+        if (err.status == 500) {
+            return throwError(<IDataSourceErrorMessage>{
+                type: 'message',
+                message: 'UNEXPECTED_ERROR_MESSAGE'
+            });
+        }
+
+        if (typeof(err.error) == "object") {
+            // if status not okay then its an exception error
+            if (err.error.hasOwnProperty('Message') && typeof(err.error['Message']) == "string") {
+                return throwError(<IDataSourceErrorMessage>{
+                    type: 'message',
+                    message: err.error['Message']
+                });
+            }
+
+            return throwError(<IDataSourceValidationError>{
+                type: 'validation',
+                errors: err.error
+            });
+        }
+
+        // general error message
+        if (typeof(err.error) == "string") {
+            return throwError(<IDataSourceErrorMessage>{
+                type: 'message',
+                message: err.error
+            });
+        }
+
+        return throwError(<IDataSourceErrorMessage>{
+            type: 'message',
+            message: 'UNEXPECTED_ERROR_MESSAGE'
+        });
+    }
+
+    public addCommandByCallback<TCommand, TCommandResult>(name: string, commandHandler: (command: TCommand) => Observable<TCommandResult>, resolveCommandModel?: (event: IResolveCommandModelEvent<TModel>) => Observable<TCommand & any>) {
+        const handleWrapper = command => {
+            return commandHandler(command).pipe(catchError(this._handleErrorPipe));
+        };
+        
+        this._commands[name] = <IDataSourceCommandAdapterOptions<TModel>> {
+            adapter: {
+                handle: handleWrapper
+            },
+            resolveCommandModel: resolveCommandModel
+        };
+
+        return this;
+    }
+
+    public addCommandByUrl<TCommand, TCommandResult>(name: string, url: string, resolveCommandModel?: (event: IResolveCommandModelEvent<TModel>) => Observable<TCommand & any>) {
+        const handleWrapper = command => {
+            return this.http.post<TCommandResult>(url, command).pipe(catchError(this._handleErrorPipe));
+        };
+        
+        this._commands[name] = <IDataSourceCommandAdapterOptions<TModel>> {
+            adapter: {
+                handle: handleWrapper
+            },
+            resolveCommandModel: resolveCommandModel
+        };
+
+        return this;
+    }
+
+    defaultCriteria(criteria: IQueryCriteria) {
+        this._defaultCriteria = criteria;
+        return this;
+    }
+}
diff --git a/projects/poweredsoft/ngx-data/src/lib/http-data-source-service.service.ts b/projects/poweredsoft/ngx-data/src/lib/http-data-source-service.service.ts
new file mode 100644
index 0000000..0970088
--- /dev/null
+++ b/projects/poweredsoft/ngx-data/src/lib/http-data-source-service.service.ts
@@ -0,0 +1,16 @@
+import { Injectable } from "@angular/core";
+import { HttpClient } from '@angular/common/http';
+import { HttpDataSourceOptionsBuilder } from "./HttpDataSourceBuilder";
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class HttpDataSourceService {
+    constructor(private http: HttpClient) {
+    }
+
+    builder<TModel, TKey>() {
+        return new HttpDataSourceOptionsBuilder<TModel, TKey>(this.http);
+    }
+}
diff --git a/projects/poweredsoft/ngx-data/src/public-api.ts b/projects/poweredsoft/ngx-data/src/public-api.ts
index a96d7ff..cf7c152 100644
--- a/projects/poweredsoft/ngx-data/src/public-api.ts
+++ b/projects/poweredsoft/ngx-data/src/public-api.ts
@@ -3,4 +3,5 @@
  */
 
 export * from './lib/ngx-data.service';
+export * from './lib/http-data-source-service.service'
 export * from './lib/ngx-data.module';
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 9e6068b..bf4b4e7 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,3 +1,13 @@
-<button class="ui button" (click)="testValidation()">
-  Test Validation
-</button>
\ No newline at end of file
+<button class="ui button" (click)="refresh()">
+  refresh
+</button>
+
+<button class="ui button" (click)="echoCommand()">
+  echo command
+</button>
+
+<h4>Latest Data</h4>
+<hr>
+<pre>
+  {{ latestData | json }}
+</pre>
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 655e336..5c25a2f 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { GenericRestDataSourceService } from 'projects/poweredsoft/ngx-data/src/public-api';
 import { of, Observable } from 'rxjs';
-import { DataSource, IResolveCommandModelEvent } from '@poweredsoft/data';
+import { DataSource, IDataSource, IResolveCommandModelEvent } from '@poweredsoft/data';
 import {  } from 'projects/poweredsoft/ngx-data-apollo/src/public-api';
 import { Apollo } from 'apollo-angular';
 import gql from 'graphql-tag';
@@ -9,28 +9,21 @@ import { map } from 'rxjs/operators';
 import { DocumentNode } from 'graphql';
 import { GraphQLDataSourceService, IGraphQLAdvanceQueryInput } from 'projects/poweredsoft/ngx-data-apollo/src/public-api';
 import { TestService, ITestModel, IValidationTestCommand } from './services/test.service';
+import { HttpDataSourceService} from '@poweredsoft/ngx-data';
 
-
-export interface IContact {
-  id: number;
-  firstName :string;
-  lastName: string;
-}
-
-export interface IContactModel {
-  id: number;
-  firstName: string;
-  lastName: string;
-}
-
-export interface IFooCommand {
-  amount: number;
-  comment: string;
-}
-
-export interface IContactDetailQuery extends IGraphQLAdvanceQueryInput<IContactModel>
+export class IContact 
 {
-  sex?: string;
+  id: number
+  displayName: string
+}
+
+export interface ICreatePerson {
+  firstName: string
+  lastName: string
+}
+
+export interface IEchoCommand {
+  message: string
 }
 
 @Component({
@@ -40,32 +33,49 @@ export interface IContactDetailQuery extends IGraphQLAdvanceQueryInput<IContactM
 })
 export class AppComponent implements OnInit {
   title = 'ngx-data';
-  dataSource: DataSource<ITestModel>;
+  dataSource: IDataSource<IContact>;
+  latestData: any;
 
-  constructor(private testService: TestService) {
-    this.dataSource = testService.generateDatasource({
-      criteria: {
+  constructor(private hdss: HttpDataSourceService) {
+    const ds = hdss
+      .builder<IContact, number>()
+      .keyResolver(m => m.id)
+      .defaultCriteria({
         page: 1,
-        pageSize: 10
-      }
-    });
+        pageSize: 5
+      })
+      .queryUrl('https://localhost:5001/api/query/contacts')
+      .addCommandByUrl<ICreatePerson, void>("createPerson", 'https://localhost:5001/api/command/createPerson', 
+        e => {
+        return of (<ICreatePerson>{
+          firstName: '',
+          lastName: ''
+        })
+      })
+      .addCommandByUrl<IEchoCommand, string>('echo', 'https://localhost:5001/api/command/echo')
+      .createDataSource();
+
+      this.dataSource = ds;
   }
 
   ngOnInit(): void {
-    this.dataSource.notifyMessage$.subscribe((notification) => {
-      console.log('notifcation', notification);
-    });
 
-    this.dataSource.validationError$.subscribe((notification) => {
-      console.log('error', notification);
+    this.dataSource.data$.subscribe(newData => {
+      this.latestData = newData;
     });
   }
 
-  testValidation() {
-    this.dataSource.executeCommandByName<IValidationTestCommand, string>('validationTest', {
-      value: 'test'
-    }).subscribe((result) => {
-      console.log(result);
-    });
+  refresh() {
+    this.dataSource.refresh();
+  }
+
+  echoCommand() {
+    const message = prompt('What message you wish to echo? ');
+    this.dataSource.executeCommandByName<IEchoCommand, string>('echo', {
+      message: message
+    }).subscribe(
+      commandResult => alert(commandResult),
+      err => console.log(err)
+      );
   }
 }