diff --git a/src/ts/@overflow/notification/api/model/Notification.ts b/src/ts/@overflow/notification/api/model/Notification.ts
index c995267..3f33237 100644
--- a/src/ts/@overflow/notification/api/model/Notification.ts
+++ b/src/ts/@overflow/notification/api/model/Notification.ts
@@ -7,6 +7,7 @@ interface Notification {
     message?: string;
     member?: Member;
     confirmDate?: Date;
+    url?: string;
 }
 
 export default Notification;
diff --git a/src/ts/@overflow/notification/react/NotificationList.tsx b/src/ts/@overflow/notification/react/NotificationList.tsx
index abbace1..4bdfc1c 100644
--- a/src/ts/@overflow/notification/react/NotificationList.tsx
+++ b/src/ts/@overflow/notification/react/NotificationList.tsx
@@ -9,6 +9,9 @@ import * as asyncRequestActions from '@overflow/commons/redux/action/asyncReques
 import Member from '@overflow/member/api/model/Member';
 import * as readAllActions from '../redux/action/read_all';
 import PageParams from '@overflow/commons/api/model/PageParams';
+import Notification from '@overflow/notification/api/model/Notification';
+import * as readUnconfirmedCntActions from '../redux/action/read_unconfirmed_count';
+import * as readActions from '../redux/action/read';
 
 export function mapStateToProps(state: any, props: any): StateProps {
     return {
@@ -22,6 +25,17 @@ export function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
             dispatch(asyncRequestActions.request('NotificationService', 'readAllByMember',
                                                  readAllActions.REQUEST, JSON.stringify(member), JSON.stringify(pageParams)));
         },
+        onRedirectByUrl: (url: string) => {
+            dispatch(routerPush(url));
+        },
+        onMarkAsRead: (noti: Notification) => {
+            Promise.all([
+                dispatch(asyncRequestActions.request('NotificationService', 'markAsRead',
+                                                     readActions.REQUEST, JSON.stringify(noti))),
+                dispatch(asyncRequestActions.request('NotificationService', 'readUnconfirmedCount',
+                                                     readUnconfirmedCntActions.REQUEST, JSON.stringify(noti.member))),
+            ]);
+        },
     };
 }
 
diff --git a/src/ts/@overflow/notification/react/NotificationPopup.tsx b/src/ts/@overflow/notification/react/NotificationPopup.tsx
index dc93321..f35c397 100644
--- a/src/ts/@overflow/notification/react/NotificationPopup.tsx
+++ b/src/ts/@overflow/notification/react/NotificationPopup.tsx
@@ -7,8 +7,10 @@ import {
 import { push as routerPush } from 'react-router-redux';
 import * as asyncRequestActions from '@overflow/commons/redux/action/asyncRequest';
 import Member from '@overflow/member/api/model/Member';
+import Notification from '@overflow/notification/api/model/Notification';
 import * as readAllUnconfirmedActions from '../redux/action/read_all_unconfirmed';
 import * as readUnconfirmedCntActions from '../redux/action/read_unconfirmed_count';
+import * as readActions from '../redux/action/read';
 import PageParams from '@overflow/commons/api/model/PageParams';
 
 export function mapStateToProps(state: any, props: any): StateProps {
@@ -44,6 +46,19 @@ export function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
                                                      readUnconfirmedCntActions.REQUEST, JSON.stringify(member))),
             ]);
         },
+        onRedirectByUrl: (url: string) => {
+            dispatch(routerPush(url));
+        },
+        onMarkAsRead: (noti: Notification) => {
+            // dispatch(asyncRequestActions.request('NotificationService', 'markAsRead',
+            //                                     readAllUnconfirmedActions.REQUEST, JSON.stringify(noti)));
+            Promise.all([
+                dispatch(asyncRequestActions.request('NotificationService', 'markAsRead',
+                                                     readActions.REQUEST, JSON.stringify(noti))),
+                dispatch(asyncRequestActions.request('NotificationService', 'readUnconfirmedCount',
+                                                     readUnconfirmedCntActions.REQUEST, JSON.stringify(noti.member))),
+            ]);
+        },
     };
 }
 
diff --git a/src/ts/@overflow/notification/react/components/NotificationList.tsx b/src/ts/@overflow/notification/react/components/NotificationList.tsx
index 1cfdb6c..7b01443 100644
--- a/src/ts/@overflow/notification/react/components/NotificationList.tsx
+++ b/src/ts/@overflow/notification/react/components/NotificationList.tsx
@@ -16,6 +16,8 @@ export interface StateProps {
 
 export interface DispatchProps {
     onReadAll(member: Member, pageParams: PageParams): void;
+    onRedirectByUrl(url: string): void;
+    onMarkAsRead(notification: Notification): void;
 }
 
 export type Props = StateProps & DispatchProps;
@@ -57,7 +59,7 @@ export class NotificationList extends React.Component<Props, State> {
             return <div>No user notifications found. </div>;
         }
         return this.props.notiPage.content.map((noti: Notification, index: number) => (
-            <Table.Row key={index} active={this.checkRead(noti)}>
+            <Table.Row key={index} active={this.checkRead(noti)} onClick={this.handleSelect.bind(this, noti)} >
                 <Table.Cell textAlign={'center'} collapsing>{noti.id}</Table.Cell>
                 <Table.Cell textAlign={'center'} collapsing>{noti.createDate}</Table.Cell>
                 <Table.Cell textAlign={'center'} collapsing>{noti.title}</Table.Cell>
@@ -75,7 +77,7 @@ export class NotificationList extends React.Component<Props, State> {
 
         return (
             <Container fluid>
-                <Table  sortable>
+                <Table sortable>
                     <Table.Header>
                         <SortTableHeaderRow columnMap={colsmap} onHeaderColumnClick={this.handleSort} />
                     </Table.Header>
@@ -84,7 +86,7 @@ export class NotificationList extends React.Component<Props, State> {
                         {this.renderItems()}
                     </Table.Body>
                     <Table.Footer>
-                        <Table.Row>
+                        <Table.Row >
                             <Table.HeaderCell colSpan='4'>
                                 <Pager page={this.props.notiPage} onPageChange={this.handlePaging} />
                             </Table.HeaderCell>
@@ -96,7 +98,8 @@ export class NotificationList extends React.Component<Props, State> {
     }
 
     private handleSelect = (selected: Notification) => {
-        console.log('handleSelect');
+        this.props.onMarkAsRead(selected);
+        this.props.onRedirectByUrl(selected.url);
     }
     private handleSort = (col: string, direction: string) => {
         this.sortCol = col;
diff --git a/src/ts/@overflow/notification/react/components/NotificationPopup.tsx b/src/ts/@overflow/notification/react/components/NotificationPopup.tsx
index 36402d4..4ec5783 100644
--- a/src/ts/@overflow/notification/react/components/NotificationPopup.tsx
+++ b/src/ts/@overflow/notification/react/components/NotificationPopup.tsx
@@ -20,6 +20,8 @@ export interface DispatchProps {
     onRedirectAllNotifications(): void;
     onMarkAllAsRead(member: Member, pageParams: PageParams): void;
     onMarkAllAsUnread(member: Member, pageParams: PageParams): void;
+    onRedirectByUrl(url: string): void;
+    onMarkAsRead(notification: Notification): void;
 }
 
 export type Props = StateProps & DispatchProps;
@@ -55,7 +57,8 @@ export class NotificationPopup extends React.Component<Props, State> {
             return <div>No user notifications found. </div>;
         }
         return this.props.notifications.content.map((item: Notification, index: number) => (
-            <List.Item key={index} disabled={item.confirmDate !== null ? true : false} >
+            <List.Item style={this.handleStyle(item)} key={index}
+            onClick={this.handleSelect.bind(this, item)}  >
                 <List.Icon name='bell outline' size='large' verticalAlign='middle' />
                 <List.Content>
                     <List.Header>{item.title}</List.Header>
@@ -65,6 +68,13 @@ export class NotificationPopup extends React.Component<Props, State> {
         ));
     }
 
+    private handleStyle(noti: Notification): any {
+        if(noti.confirmDate === null) {
+            return {'backgroundColor':'green'};
+        }
+        return null;
+    }
+
     public render(): JSX.Element {
         if(!this.state.show) {
             return null;
@@ -88,6 +98,14 @@ export class NotificationPopup extends React.Component<Props, State> {
         );
     }
 
+    private handleSelect = (noti: Notification): void => {
+        this.props.onMarkAsRead(noti);
+        this.props.onRedirectByUrl(noti.url);
+        this.setState({
+            show: false,
+        });
+    }
+
     private handleMark = (): void => {
         const member: Member = {
             id: 1,
diff --git a/src/ts/@overflow/notification/redux/action/read.ts b/src/ts/@overflow/notification/redux/action/read.ts
new file mode 100644
index 0000000..57cda57
--- /dev/null
+++ b/src/ts/@overflow/notification/redux/action/read.ts
@@ -0,0 +1,7 @@
+export type REQUEST = '@overflow/notification/read/REQUEST';
+export type REQUEST_SUCCESS = '@overflow/notification/read/REQUEST/SUCCESS';
+export type REQUEST_FAILURE = '@overflow/notification/read/REQUEST/FAILURE';
+
+export const REQUEST: REQUEST = '@overflow/notification/read/REQUEST';
+export const REQUEST_SUCCESS: REQUEST_SUCCESS = '@overflow/notification/read/REQUEST/SUCCESS';
+export const REQUEST_FAILURE: REQUEST_FAILURE = '@overflow/notification/read/REQUEST/FAILURE';
diff --git a/src/ts/@overflow/notification/redux/reducer/read.ts b/src/ts/@overflow/notification/redux/reducer/read.ts
new file mode 100644
index 0000000..6383f9b
--- /dev/null
+++ b/src/ts/@overflow/notification/redux/reducer/read.ts
@@ -0,0 +1,24 @@
+import Action from '@overflow/commons/redux/Action';
+import { ReducersMapObject } from 'redux';
+import Notification from '@overflow/notification/api/model/Notification';
+
+import * as ReadActionTypes from '../action/read';
+import ReadState, { defaultState as ReadDefaultState } from '../state/Read';
+
+const reducer: ReducersMapObject = {
+  [ReadActionTypes.REQUEST_SUCCESS]:
+  (state: ReadState = ReadDefaultState, action: Action<Notification>):
+  ReadState => {
+      return {
+      ...state,
+      notification: <Notification>action.payload,
+    };
+  },
+  [ReadActionTypes.REQUEST_FAILURE]:
+  (state: ReadState = ReadDefaultState, action: Action<Error>):
+  ReadState => {
+    return state;
+  },
+};
+
+export default reducer;
diff --git a/src/ts/@overflow/notification/redux/state/Read.ts b/src/ts/@overflow/notification/redux/state/Read.ts
new file mode 100644
index 0000000..b61d5d2
--- /dev/null
+++ b/src/ts/@overflow/notification/redux/state/Read.ts
@@ -0,0 +1,13 @@
+import Notification from '@overflow/notification/api/model/Notification';
+
+export interface State {
+  readonly notification?: Notification;
+  readonly error?: Error;
+}
+
+export const defaultState: State = {
+  notification: undefined,
+  error: undefined,
+};
+
+export default State;