diff --git a/src/packages/core/rpc/protocol/json/RPCClientJSONCodec.ts b/src/packages/core/rpc/protocol/json/RPCClientJSONCodec.ts
index 5d8f4a7..1ea9cab 100644
--- a/src/packages/core/rpc/protocol/json/RPCClientJSONCodec.ts
+++ b/src/packages/core/rpc/protocol/json/RPCClientJSONCodec.ts
@@ -35,8 +35,8 @@ export class RPCClientJSONCodec extends RPCClientCodec {
     const _res: ClientResponse = {
       id: res.id,
       jsonrpc: res.jsonrpc,
-      result: undefined !== res.result ? JSON.parse(res.result) : undefined,
-      error: undefined !== res.error ? JSON.parse(res.error) : undefined,
+      result: res.result,
+      error: res.error,
     };
     return new RPCClientJSONResponseCodec(_res);
   }
diff --git a/src/packages/notification/component/notification/notification.component.html b/src/packages/notification/component/notification/notification.component.html
index d1612e2..2b07363 100644
--- a/src/packages/notification/component/notification/notification.component.html
+++ b/src/packages/notification/component/notification/notification.component.html
@@ -1 +1,29 @@
-<div>list</div>
\ No newline at end of file
+<div class="example-container mat-elevation-z8">
+  <mat-table #table [dataSource]="dataSource" matSort>
+
+    <ng-container matColumnDef="id">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.id}} </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="title">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Title </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.title}} </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="message">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Message </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.message}} </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="member">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Member </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.member.name}} </mat-cell>
+    </ng-container>
+
+    <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="handleRowClick(row)"></mat-row>
+  </mat-table>
+
+  <mat-paginator [length]="length" [pageIndex]="0" [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 25, 100]">
+  </mat-paginator>
+</div>
\ No newline at end of file
diff --git a/src/packages/notification/component/notification/notification.component.ts b/src/packages/notification/component/notification/notification.component.ts
index 99bc5b1..218e833 100644
--- a/src/packages/notification/component/notification/notification.component.ts
+++ b/src/packages/notification/component/notification/notification.component.ts
@@ -1,18 +1,62 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, ViewChild, AfterContentInit } from '@angular/core';
+import { MatTableDataSource, MatSort } from '@angular/material';
 import { Router } from '@angular/router';
+import { Store, select } from '@ngrx/store';
+import { RPCError } from 'packages/core/rpc/error';
+import { Notification } from '../../model';
+import * as NotificationStore from '../../store/notification';
+import { ReadAllByMemberSelector } from '../../store';
+import { AuthSelector } from 'packages/member/store';
+import { Member } from '../../../member/model';
 
 @Component({
   selector: 'of-notification',
   templateUrl: './notification.component.html',
   styleUrls: ['./notification.component.scss']
 })
-export class NotificationComponent implements OnInit {
+export class NotificationComponent implements OnInit, AfterContentInit {
+
+  notification$ = this.store.pipe(select(ReadAllByMemberSelector.select('notifications')));
+
+  displayedColumns = ['id', 'title', 'message', 'member' ];
+  dataSource: MatTableDataSource<Notification>;
+  @ViewChild(MatSort) sort: MatSort;
 
   constructor(
-    private router: Router
+    private router: Router,
+    private store: Store<NotificationStore.State>
   ) { }
 
   ngOnInit() {
+    this.notification$.subscribe(
+      (notifications: Notification[]) => {
+        console.log('#########');
+        console.log(notifications);
+        console.log('#########');
+        this.dataSource = new MatTableDataSource(notifications);
+        this.dataSource.sort = this.sort;
+      },
+      (error: RPCError) => {
+        console.log(error.message);
+      }
+    );
+  }
+
+  ngAfterContentInit() {
+    this.store.select(AuthSelector.select('member')).subscribe(
+      (member: Member) => {
+        console.log(member);
+        this.store.dispatch(new NotificationStore.ReadAllByMember(member));
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+  }
+
+  handleRowClick(n: Notification) {
+    this.router.navigate([n.url]);
   }
 
 }
diff --git a/src/packages/notification/service/notification.service.ts b/src/packages/notification/service/notification.service.ts
index f8adf75..8d48e07 100644
--- a/src/packages/notification/service/notification.service.ts
+++ b/src/packages/notification/service/notification.service.ts
@@ -18,9 +18,6 @@ export class NotificationService {
   }
 
   public readAllByMember(member: Member): Observable<Notification[]> {
-    const body = {
-        member: member,
-    };
 
     return this.rpcClient.call('NotificationService.readAllByMember', member);
   }
diff --git a/src/packages/notification/store/index.ts b/src/packages/notification/store/index.ts
index d0971c6..252b180 100644
--- a/src/packages/notification/store/index.ts
+++ b/src/packages/notification/store/index.ts
@@ -8,23 +8,23 @@ import {
 
   import { MODULE } from '../notification.constant';
 
-  import * as ReadAllByMemberStore from './readallbymember';
+  import * as NotificationStore from './notification';
 
   export interface State {
-    readallbymember: ReadAllByMemberStore.State;
+    notifications: NotificationStore.State;
   }
 
   export const REDUCERS = {
-    readallbymember: ReadAllByMemberStore.reducer,
+    notifications: NotificationStore.reducer,
   };
 
   export const EFFECTS = [
-    ReadAllByMemberStore.Effects,
+    NotificationStore.Effects,
   ];
 
   export const selectNotificationState = createFeatureSelector<State>(MODULE.name);
 
-  export const ReadAllByMemberSelector = new StateSelector<ReadAllByMemberStore.State>(createSelector(
+  export const ReadAllByMemberSelector = new StateSelector<NotificationStore.State>(createSelector(
     selectNotificationState,
-    (state: State) => state.readallbymember
+    (state: State) => state.notifications
   ));
diff --git a/src/packages/notification/store/notification/index.ts b/src/packages/notification/store/notification/index.ts
new file mode 100644
index 0000000..c7467b0
--- /dev/null
+++ b/src/packages/notification/store/notification/index.ts
@@ -0,0 +1,4 @@
+export * from './notification.action';
+export * from './notification.effect';
+export * from './notification.reducer';
+export * from './notification.state';
diff --git a/src/packages/notification/store/readallbymember/readallbymember.action.ts b/src/packages/notification/store/notification/notification.action.ts
similarity index 75%
rename from src/packages/notification/store/readallbymember/readallbymember.action.ts
rename to src/packages/notification/store/notification/notification.action.ts
index 40e312b..5bfbd1f 100644
--- a/src/packages/notification/store/readallbymember/readallbymember.action.ts
+++ b/src/packages/notification/store/notification/notification.action.ts
@@ -6,9 +6,9 @@ import { Notification } from '../../model';
 import { Member } from '../../../member/model';
 
 export enum ActionType {
-  ReadAllByMember = '[Notification.ReadAllByMember] ReadAllByMember',
-  ReadAllByMemberSuccess = '[Notification.ReadAllByMemberSuccess] ReadAllByMemberSuccess',
-  ReadAllByMemberFailure = '[Notification.ReadAllByMemberFailure] ReadAllByMemberFailure',
+  ReadAllByMember = '[Notification.notification] ReadAllByMember',
+  ReadAllByMemberSuccess = '[Notification.notification] ReadAllByMemberSuccess',
+  ReadAllByMemberFailure = '[Notification.notification] ReadAllByMemberFailure',
 }
 
 export class ReadAllByMember implements Action {
diff --git a/src/packages/notification/store/readallbymember/readallbymember.effect.spec.ts b/src/packages/notification/store/notification/notification.effect.spec.ts
similarity index 73%
rename from src/packages/notification/store/readallbymember/readallbymember.effect.spec.ts
rename to src/packages/notification/store/notification/notification.effect.spec.ts
index 2ace0e6..4bbc6cf 100644
--- a/src/packages/notification/store/readallbymember/readallbymember.effect.spec.ts
+++ b/src/packages/notification/store/notification/notification.effect.spec.ts
@@ -1,8 +1,8 @@
 import { TestBed, inject } from '@angular/core/testing';
 
-import { Effects } from './readallbymember.effect';
+import { Effects } from './notification.effect';
 
-describe('ReadAllByMember.Effects', () => {
+describe('Notification.Effects', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       providers: [Effects]
diff --git a/src/packages/notification/store/readallbymember/readallbymember.effect.ts b/src/packages/notification/store/notification/notification.effect.ts
similarity index 61%
rename from src/packages/notification/store/readallbymember/readallbymember.effect.ts
rename to src/packages/notification/store/notification/notification.effect.ts
index 6a7208d..ac0c9f8 100644
--- a/src/packages/notification/store/readallbymember/readallbymember.effect.ts
+++ b/src/packages/notification/store/notification/notification.effect.ts
@@ -23,7 +23,7 @@ import {
   ReadAllByMemberSuccess,
   ReadAllByMemberFailure,
   ActionType,
-} from './readallbymember.action';
+} from './notification.action';
 
 @Injectable()
 export class Effects {
@@ -36,13 +36,22 @@ export class Effects {
 
   @Effect()
   readAllByMember$: Observable<Action> = this.actions$
+    // .ofType(ActionType.ReadAllByMember)
+    // .map((action: ReadAllByMember) => action.payload)
+    // .exhaustMap(member =>
+    //   this.notificationService
+    //   .readAllByMember(member)
+    //     .map(notificationList => new ReadAllByMemberSuccess(notificationList))
+    //     .catch(error => of(new ReadAllByMemberFailure(error)))
+    // );
     .ofType(ActionType.ReadAllByMember)
     .map((action: ReadAllByMember) => action.payload)
-    .exhaustMap(member =>
-      this.notificationService
-      .readAllByMember(member)
-        .map(notificationList => new ReadAllByMemberSuccess(notificationList))
-        .catch(error => of(new ReadAllByMemberFailure(error)))
-    );
+    .switchMap(payload => this.notificationService.readAllByMember(payload))
+    .map(notifications => {
+      return new ReadAllByMemberSuccess(notifications);
+    })
+    .catch((error: RPCError) => {
+      return of(new ReadAllByMemberFailure(error));
+    });
 
 }
diff --git a/src/packages/notification/store/readallbymember/readallbymember.reducer.ts b/src/packages/notification/store/notification/notification.reducer.ts
similarity index 83%
rename from src/packages/notification/store/readallbymember/readallbymember.reducer.ts
rename to src/packages/notification/store/notification/notification.reducer.ts
index 81a76ab..271b4dc 100644
--- a/src/packages/notification/store/readallbymember/readallbymember.reducer.ts
+++ b/src/packages/notification/store/notification/notification.reducer.ts
@@ -1,12 +1,12 @@
 import {
     Actions,
     ActionType,
-  } from './readallbymember.action';
+  } from './notification.action';
 
   import {
     State,
     initialState,
-  } from './readallbymember.state';
+  } from './notification.state';
 
   import { Notification } from '../../model';
 
@@ -25,7 +25,7 @@ import {
           ...state,
           error: null,
           pending: false,
-          notificationList: action.payload,
+          notifications: action.payload,
         };
       }
 
@@ -34,7 +34,7 @@ import {
           ...state,
           error: action.payload,
           pending: false,
-          notificationList: null,
+          notifications: null,
         };
       }
 
diff --git a/src/packages/notification/store/readallbymember/readallbymember.state.ts b/src/packages/notification/store/notification/notification.state.ts
similarity index 78%
rename from src/packages/notification/store/readallbymember/readallbymember.state.ts
rename to src/packages/notification/store/notification/notification.state.ts
index 0e9d097..ed4a56e 100644
--- a/src/packages/notification/store/readallbymember/readallbymember.state.ts
+++ b/src/packages/notification/store/notification/notification.state.ts
@@ -5,11 +5,11 @@ import { Notification } from '../../model';
 export interface State {
   error: RPCError | null;
   pending: boolean;
-  notificationList: Notification[] | null;
+  notifications: Notification[] | null;
 }
 
 export const initialState: State = {
   error: null,
   pending: false,
-  notificationList: null,
+  notifications: null,
 };
diff --git a/src/packages/notification/store/readallbymember/index.ts b/src/packages/notification/store/readallbymember/index.ts
deleted file mode 100644
index ca4ece9..0000000
--- a/src/packages/notification/store/readallbymember/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './readallbymember.action';
-export * from './readallbymember.effect';
-export * from './readallbymember.reducer';
-export * from './readallbymember.state';