diff --git a/Client/app/app.module.ts b/Client/app/app.module.ts
index 13f98f84..23cc9e4d 100644
--- a/Client/app/app.module.ts
+++ b/Client/app/app.module.ts
@@ -10,6 +10,11 @@ import { Ng2BootstrapModule } from 'ng2-bootstrap';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
+// ngrx store
+import { RouterStoreModule } from '@ngrx/router-store';
+import { StoreModule, Store } from '@ngrx/store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+
 import { AppComponent } from './app.component';
 import { NavMenuComponent } from './components/navmenu/navmenu.component';
 import { HomeComponent } from './containers/home/home.component';
@@ -24,6 +29,7 @@ import { UserService } from './shared/user.service';
 import { ConnectionResolver } from './shared/route.resolver';
 import { ORIGIN_URL } from './shared/constants/baseurl.constants';
 import { TransferHttpModule } from '../modules/transfer-http/transfer-http.module';
+import { reducer } from './reducers';
 
 export function createTranslateLoader(http: Http, baseHref) {
     // Temporary Azure hack
@@ -62,6 +68,11 @@ export function createTranslateLoader(http: Http, baseHref) {
             }
         }),
 
+        StoreModule.provideStore(reducer),
+        RouterStoreModule.connectRouter(),
+        StoreDevtoolsModule.instrumentOnlyWithExtension(),
+
+
         // App Routing
         RouterModule.forRoot([
             {
@@ -133,7 +144,7 @@ export function createTranslateLoader(http: Http, baseHref) {
                 }
             },
 
-            { path: 'lazy', loadChildren: './containers/+lazy/lazy.module#LazyModule'},
+            { path: 'lazy', loadChildren: './containers/+lazy/lazy.module#LazyModule' },
 
             // All else fails - go home!
             { path: '**', redirectTo: 'home' }
diff --git a/Client/app/browser-app.module.ts b/Client/app/browser-app.module.ts
index 0150d22c..01670ccc 100644
--- a/Client/app/browser-app.module.ts
+++ b/Client/app/browser-app.module.ts
@@ -23,12 +23,12 @@ export function createConfig(): SignalRConfiguration {
 }
 
 export function getOriginUrl() {
-  return window.location.origin;
+    return window.location.origin;
 }
 
 export function getRequest() {
-  // the Request object only lives on the server
-  return { cookie: document.cookie };
+    // the Request object only lives on the server
+    return { cookie: document.cookie };
 }
 
 @NgModule({
diff --git a/Client/app/containers/counter/counter.component.html b/Client/app/containers/counter/counter.component.html
index cc2bbd59..99ea4c84 100644
--- a/Client/app/containers/counter/counter.component.html
+++ b/Client/app/containers/counter/counter.component.html
@@ -2,6 +2,9 @@ <h1>Counter</h1>
 
 <p>This is a simple example of an Angular 2 component.</p>
 
-<p>Current count: <strong>{{ currentCount }}</strong></p>
+<!--<p>Current count: <strong>{{ counter.value | async }}</strong></p>-->
 
+<button (click)="decreaseCounter()">Decrease</button>
 <button (click)="incrementCounter()">Increment</button>
+
+<pre style="margin-top:10px">{{ counter | async | json }}</pre>
diff --git a/Client/app/containers/counter/counter.component.ts b/Client/app/containers/counter/counter.component.ts
index 69de17d9..f9540097 100644
--- a/Client/app/containers/counter/counter.component.ts
+++ b/Client/app/containers/counter/counter.component.ts
@@ -1,13 +1,33 @@
+// tslint:disable:no-null-keyword
+// tslint:disable:semicolon
+
 import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+import * as fromRoot from '../../reducers';
+
+import { COUNTER_INCREASE, COUNTER_DECREASE } from '../../reducers/counter.reducer';
+import { CounterState } from '../../reducers/counter.reducer';
+import { Observable } from 'rxjs/Observable';
 
 @Component({
     selector: 'counter',
     templateUrl: './counter.component.html'
 })
 export class CounterComponent {
-    public currentCount = 0;
+    // public currentCount = 0;
+    public counter: Observable<CounterState>;
+
+    constructor(private _store: Store<fromRoot.State>) {
+        this.counter = _store.select<CounterState>('counter')
+    }
 
     public incrementCounter() {
-        this.currentCount++;
+        // this.currentCount++;
+        this._store.dispatch({ type: COUNTER_INCREASE, payload: null })
+    }
+
+    public decreaseCounter() {
+        // this.currentCount++;
+        this._store.dispatch({ type: COUNTER_DECREASE, payload: null })
     }
 }
diff --git a/Client/app/reducers/counter.reducer.ts b/Client/app/reducers/counter.reducer.ts
new file mode 100644
index 00000000..de8c0953
--- /dev/null
+++ b/Client/app/reducers/counter.reducer.ts
@@ -0,0 +1,43 @@
+// tslint:disable:semicolon
+
+import { Action } from '@ngrx/store';
+
+// user actions
+export const COUNTER_INCREASE = '[COUNTER]  increase'
+export const COUNTER_DECREASE = '[COUNTER]  decrease'
+
+export class CounterState {
+    value: number
+}
+
+const initialState: CounterState = {
+    value: 0
+}
+
+export function reducer(state = initialState, action: Action): CounterState {
+
+    switch (action.type) {
+        case COUNTER_INCREASE: {
+
+            let newState = {
+                value: state.value + 1
+            }
+
+            return newState
+
+        }
+        case COUNTER_DECREASE:
+
+            let newState = {
+                value: state.value - 1
+            }
+
+            return newState
+
+        default:
+            return state
+    }
+}
+
+
+
diff --git a/Client/app/reducers/index.ts b/Client/app/reducers/index.ts
new file mode 100644
index 00000000..58aa7cd7
--- /dev/null
+++ b/Client/app/reducers/index.ts
@@ -0,0 +1,27 @@
+import { compose } from "@ngrx/core";
+import { combineReducers, ActionReducer } from "@ngrx/store";
+import { storeFreeze } from 'ngrx-store-freeze';
+
+import * as fromRouter from '@ngrx/router-store';
+import * as fromCounter from '../reducers/counter.reducer';
+
+export interface State {
+  router: fromRouter.RouterState;
+  counter: fromCounter.CounterState;
+}
+
+const reducers = {
+  router: fromRouter.routerReducer,
+  counter: fromCounter.reducer
+};
+
+const developmentReducer: ActionReducer<State> = compose(storeFreeze, combineReducers)(reducers);
+// const productionReducer: ActionReducer<State> = combineReducers(reducers);
+
+export function reducer(state: any, action: any) {
+  // if (environment.production) {
+  //   return productionReducer(state, action);
+  // } else {
+  return developmentReducer(state, action);
+  // }
+}
diff --git a/README.md b/README.md
index 1d73860f..fd44ad9e 100644
--- a/README.md
+++ b/README.md
@@ -12,6 +12,14 @@ Angular SEO in action:
   <img src="./docs/angular2-seo.png" alt="ASP.NET Core Angular2 SEO" title="ASP.NET Core Angular2 SEO">
 </p>
 
+NgRx Store with Redux DevTools:
+
+<p align="center">
+  <img src="./docs/ngrx-store.PNG" alt="NgRx store" title="NgRx Store">
+</p>
+
+https://github.com/zalmoxisus/redux-devtools-extension
+
 ### What is this repo? Live Demo here: http://aspnetcore-angular2-universal.azurewebsites.net
 
 This repository is maintained by [Angular Universal](https://github.com/angular/universal) and is meant to be an advanced starter 
diff --git a/docs/ngrx-store.PNG b/docs/ngrx-store.PNG
new file mode 100644
index 00000000..7e36f44c
Binary files /dev/null and b/docs/ngrx-store.PNG differ
diff --git a/package.json b/package.json
index 5256ae29..b5ca9e21 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,10 @@
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@angular/platform-server": "^4.0.0",
     "@angular/router": "^4.0.0",
+    "@ngrx/core": "^1.2.0",
+    "@ngrx/router-store": "^1.2.6",
+    "@ngrx/store": "^2.2.2",
+    "@ngrx/store-devtools": "^3.2.4",
     "@ngx-translate/core": "^6.0.1",
     "@ngx-translate/http-loader": "0.0.3",
     "@types/node": "^7.0.12",
@@ -56,6 +60,7 @@
     "json-loader": "^0.5.4",
     "ng2-bootstrap": "^1.6.1",
     "ng2-signalr": "^2.0.2",
+    "ngrx-store-freeze": "^0.1.9",
     "node-sass": "^4.5.2",
     "preboot": "^4.5.2",
     "raw-loader": "^0.5.1",