diff --git a/writeorpay/package-lock.json b/writeorpay/package-lock.json
diff --git a/writeorpay/package.json b/writeorpay/package.json
@@ -21,15 +21,18 @@
     "@angular/platform-browser": "^5.2.11",
     "@angular/platform-browser-dynamic": "^5.2.11",
     "@angular/router": "^5.2.11",
+    "@ngrx/store": "^6.1.0",
     "core-js": "^2.5.7",
     "moment": "^2.22.2",
     "node-sass": "^4.9.3",
     "randomcolor": "^0.5.3",
-    "rxjs": "^5.5.12",
+    "rxjs": "^6.3.3",
+    "rxjs-compat": "^6.3.3",
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
-    "@angular/cli": "^1.7.4",
+    "@angular-devkit/build-angular": "~0.10.0",
+    "@angular/cli": "^7.0.2",
     "@angular/compiler-cli": "^5.2.11",
     "@angular/language-service": "^5.2.11",
     "@types/jasmine": "~2.5.53",

diff --git a/writeorpay/src/app/action-header/action-header.component.ts b/writeorpay/src/app/action-header/action-header.component.ts
@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { State } from '../store/app.reducer';
+import * as AppActions from "../store/app.actions";
 
 @Component({
   selector: 'app-action-header',
@@ -7,9 +10,14 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ActionHeaderComponent implements OnInit {
 
-  constructor() { }
+  constructor(private _store: Store<State>) { }
 
   ngOnInit() {
   }
 
+  private collapsePanel() {
+    console.log('toggle presed');
+    this._store.dispatch(new AppActions.ToggleExpanderAction());
+  }
+
 }
diff --git a/writeorpay/src/app/app.component.html b/writeorpay/src/app/app.component.html
@@ -4,7 +4,8 @@
     </div>
     <div class="app-content-container">
         <div class="app-content">
-            <app-note-editor></app-note-editor>
+            <!-- <app-note-editor></app-note-editor> -->
+            <app-note-list></app-note-list>
         </div>
 
         <div class="sidebar-content">

diff --git a/writeorpay/src/app/app.module.ts b/writeorpay/src/app/app.module.ts
@@ -7,6 +7,8 @@ import { CountTileComponent } from './count-tile/count-tile.component';
 import { CalendarPaneComponent } from './calendar-pane/calendar-pane.component';
 import { NoteListComponent } from './note-list/note-list.component';
 import { ActionHeaderComponent } from './action-header/action-header.component';
+import { StoreModule } from '@ngrx/store';
+import { reducer } from './store/app.reducer';
 
 
 @NgModule({
@@ -20,7 +22,8 @@ import { ActionHeaderComponent } from './action-header/action-header.component';
     ActionHeaderComponent,
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    StoreModule.forRoot(reducer, {}),
   ],
   providers: [],
   bootstrap: [AppComponent]

diff --git a/...src/app/note-list/note-list.component.css → ...rc/app/note-list/note-list.component.scss b/...src/app/note-list/note-list.component.css → ...rc/app/note-list/note-list.component.scss
diff --git a/writeorpay/src/app/note-list/note-list.component.ts b/writeorpay/src/app/note-list/note-list.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-note-list',
   templateUrl: './note-list.component.html',
-  styleUrls: ['./note-list.component.css']
+  styleUrls: ['./note-list.component.scss']
 })
 export class NoteListComponent implements OnInit {
 

diff --git a/writeorpay/src/app/store/app.actions.ts b/writeorpay/src/app/store/app.actions.ts
@@ -0,0 +1,11 @@
+import { Action } from '@ngrx/store';
+
+export const TOGGLE_EXPANDER = 'TOGGLE_EXPANDER'
+
+export class ToggleExpanderAction implements Action {
+  readonly type = TOGGLE_EXPANDER;
+  constructor() { }
+}
+
+export type AppActions
+  = ToggleExpanderAction
diff --git a/writeorpay/src/app/store/app.reducer.ts b/writeorpay/src/app/store/app.reducer.ts
@@ -0,0 +1,28 @@
+import Note from '../models/note';
+import * as appActions from './app.actions';
+import { ActionReducer, Action } from '@ngrx/store';
+
+export interface State {
+    Notes: Note[],
+    contentExpanded: boolean;
+};
+
+export const initialState: State = {
+    Notes: [],
+    contentExpanded: false,
+};
+
+export const reducer : ActionReducer<State> = (state : State = initialState, action: Action) => {
+  switch(action.type) {
+
+    case appActions.TOGGLE_EXPANDER:
+    console.log('toggled');
+    return {
+        ... state,
+        contentExpanded: !state.contentExpanded
+      };
+      default:
+          return state;
+  }
+};
+
diff --git a/writeorpay/src/polyfills.ts b/writeorpay/src/polyfills.ts
@@ -43,7 +43,7 @@
 
 /** Evergreen browsers require these. **/
 // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
-import 'core-js/es7/reflect';
+
 
 
 /**

diff --git a/writeorpay/src/tsconfig.spec.json b/writeorpay/src/tsconfig.spec.json
@@ -11,7 +11,8 @@
     ]
   },
   "files": [
-    "test.ts"
+    "test.ts",
+    "polyfills.ts"
   ],
   "include": [
     "**/*.spec.ts",

diff --git a/writeorpay/tsconfig.json b/writeorpay/tsconfig.json
@@ -14,6 +14,8 @@
     "lib": [
       "es2017",
       "dom"
-    ]
+    ],
+    "module": "es2015",
+    "baseUrl": "./"
   }
-}
+}
diff --git a/writeorpay/tslint.json b/writeorpay/tslint.json
@@ -18,7 +18,6 @@
     "forin": true,
     "import-blacklist": [
       true,
-      "rxjs",
       "rxjs/Rx"
     ],
     "import-spacing": true,