diff --git a/src/ts/@overflow/notification/react/Notification.tsx b/src/ts/@overflow/notification/react/Notification.tsx
deleted file mode 100644
index f050b25..0000000
--- a/src/ts/@overflow/notification/react/Notification.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { connect, Dispatch } from 'react-redux';
-import {
-    NotificationModal,
-    StateProps as StateProps,
-    DispatchProps as DispatchProps,
-} from './components/Notification';
-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 * as readAllUnconfirmedActions from '../redux/action/read_all_unconfirmed';
-import PageParams from '@overflow/commons/api/model/PageParams';
-
-export function mapStateToProps(state: any, props: any): StateProps {
-    return {
-        notifications: state.notifications,
-    };
-}
-
-export function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
-    return {
-        onReadTop5Unconfirmed: (member: Member, pageParams: PageParams) => {
-            dispatch(asyncRequestActions.request('NotificationService', 'readAllUnconfirmedByMember',
-                                                 readAllUnconfirmedActions.REQUEST, JSON.stringify(member), JSON.stringify(pageParams)));
-        },
-        onRedirectAllNotifications: () => {
-            dispatch(routerPush('/notifications/'));
-        },
-    };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(NotificationModal);
-
diff --git a/src/ts/@overflow/notification/react/NotificationPopup.tsx b/src/ts/@overflow/notification/react/NotificationPopup.tsx
new file mode 100644
index 0000000..dc93321
--- /dev/null
+++ b/src/ts/@overflow/notification/react/NotificationPopup.tsx
@@ -0,0 +1,51 @@
+import { connect, Dispatch } from 'react-redux';
+import {
+    NotificationPopup,
+    StateProps as StateProps,
+    DispatchProps as DispatchProps,
+} from './components/NotificationPopup';
+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 * as readAllUnconfirmedActions from '../redux/action/read_all_unconfirmed';
+import * as readUnconfirmedCntActions from '../redux/action/read_unconfirmed_count';
+import PageParams from '@overflow/commons/api/model/PageParams';
+
+export function mapStateToProps(state: any, props: any): StateProps {
+    return {
+        notifications: state.notifications,
+    };
+}
+
+export function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
+    return {
+        onReadTop: (member: Member, pageParams: PageParams) => {
+            dispatch(asyncRequestActions.request('NotificationService', 'readAllByMember',
+                                                 readAllUnconfirmedActions.REQUEST, JSON.stringify(member), JSON.stringify(pageParams)));
+        },
+        onRedirectAllNotifications: () => {
+            dispatch(routerPush('/notifications/'));
+        },
+        onMarkAllAsRead: (member: Member, pageParams: PageParams) => {
+            Promise.all([
+                dispatch(asyncRequestActions.request('NotificationService', 'markAllAsRead',
+                                                     readAllUnconfirmedActions.REQUEST, JSON.stringify(member),
+                                                     JSON.stringify(pageParams))),
+                dispatch(asyncRequestActions.request('NotificationService', 'readUnconfirmedCount',
+                                                     readUnconfirmedCntActions.REQUEST, JSON.stringify(member))),
+            ]);
+        },
+        onMarkAllAsUnread: (member: Member, pageParams: PageParams) => {
+            Promise.all([
+                dispatch(asyncRequestActions.request('NotificationService', 'markAllAsUnread',
+                                                     readAllUnconfirmedActions.REQUEST, JSON.stringify(member),
+                                                     JSON.stringify(pageParams))),
+                dispatch(asyncRequestActions.request('NotificationService', 'readUnconfirmedCount',
+                                                     readUnconfirmedCntActions.REQUEST, JSON.stringify(member))),
+            ]);
+        },
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(NotificationPopup);
+
diff --git a/src/ts/@overflow/notification/react/components/NotificationBadge.tsx b/src/ts/@overflow/notification/react/components/NotificationBadge.tsx
index 1d70f97..9a0d7e5 100644
--- a/src/ts/@overflow/notification/react/components/NotificationBadge.tsx
+++ b/src/ts/@overflow/notification/react/components/NotificationBadge.tsx
@@ -7,7 +7,7 @@ import {
     Label,
 } from 'semantic-ui-react';
 import Member from '@overflow/member/api/model/Member';
-import Notification from '../Notification';
+import NotificationPopup from '../NotificationPopup';
 
 export interface StateProps {
     count: number;
@@ -20,14 +20,13 @@ export interface DispatchProps {
 export type Props = StateProps & DispatchProps;
 
 export interface State {
+    opened: boolean;
 }
 
 export class NotificationBadge extends React.Component<Props, State> {
 
     constructor(props: Props, context: State) {
         super(props, context);
-        this.state = {
-        };
     }
     public componentWillMount(): void {
         const member: Member = {
@@ -38,18 +37,23 @@ export class NotificationBadge extends React.Component<Props, State> {
 
 
     public render(): JSX.Element {
+        let badge = null;
+        if(this.props.count !== undefined && this.props.count > 0) {
+            badge = <Label color='red'>{this.props.count}</Label>;
+        }
         let icon =
             <Menu.Item position='right'>
                 <Icon name='bell' />
-                <Label color='red'>{this.props.count}</Label>
+                {badge}
             </Menu.Item>;
 
         return (
             <Container fluid>
                 <Popup trigger={icon} on='click' wide >
-                    <Notification />
+                    <NotificationPopup />
                 </Popup>
             </Container>
         );
     }
+
 }
diff --git a/src/ts/@overflow/notification/react/components/Notification.tsx b/src/ts/@overflow/notification/react/components/NotificationPopup.tsx
similarity index 59%
rename from src/ts/@overflow/notification/react/components/Notification.tsx
rename to src/ts/@overflow/notification/react/components/NotificationPopup.tsx
index 9ba7c7d..36402d4 100644
--- a/src/ts/@overflow/notification/react/components/Notification.tsx
+++ b/src/ts/@overflow/notification/react/components/NotificationPopup.tsx
@@ -3,6 +3,8 @@ import {
     Container,
     List,
     Header,
+    Button,
+    Label,
 } from 'semantic-ui-react';
 import Page from '@overflow/commons/api/model/Page';
 import Member from '@overflow/member/api/model/Member';
@@ -14,8 +16,10 @@ export interface StateProps {
 }
 
 export interface DispatchProps {
-    onReadTop5Unconfirmed(member: Member, pageParams: PageParams): void;
+    onReadTop(member: Member, pageParams: PageParams): void;
     onRedirectAllNotifications(): void;
+    onMarkAllAsRead(member: Member, pageParams: PageParams): void;
+    onMarkAllAsUnread(member: Member, pageParams: PageParams): void;
 }
 
 export type Props = StateProps & DispatchProps;
@@ -24,7 +28,7 @@ export interface State {
     show: boolean;
 }
 
-export class NotificationModal extends React.Component<Props, State> {
+export class NotificationPopup extends React.Component<Props, State> {
 
     private countPerPage: number = 5;
     constructor(props: Props, context: State) {
@@ -43,7 +47,7 @@ export class NotificationModal extends React.Component<Props, State> {
             countPerPage: String(this.countPerPage),
             pageNo: String(0),
         };
-        this.props.onReadTop5Unconfirmed(member, pageParams);
+        this.props.onReadTop(member, pageParams);
     }
 
     public renderItems(): (JSX.Element | JSX.Element[]) {
@@ -51,11 +55,11 @@ export class NotificationModal 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}>
+            <List.Item key={index} disabled={item.confirmDate !== null ? true : false} >
                 <List.Icon name='bell outline' size='large' verticalAlign='middle' />
                 <List.Content>
-                    <List.Header >{item.title}</List.Header>
-                    <List.Description >{item.message}</List.Description>
+                    <List.Header>{item.title}</List.Header>
+                    <List.Description>{item.message}</List.Description>
                 </List.Content>
             </List.Item>
         ));
@@ -68,7 +72,10 @@ export class NotificationModal extends React.Component<Props, State> {
 
         return (
             <Container fluid>
-                <Header as='h4' content='User Notifications' />
+                <Label size='large' ribbon color='red'>Notifications</Label>
+                <Label as='a' onClick={this.handleMark}>Mark all as read</Label>
+                {/* for Testing */}
+                {/* <Label as='a' onClick={this.handleUnMark}>Mark all as unread</Label> */}
                 <List divided relaxed>
                     {this.renderItems()}
                     <List.Item onClick={this.handleViewAll}>
@@ -81,6 +88,32 @@ export class NotificationModal extends React.Component<Props, State> {
         );
     }
 
+    private handleMark = (): void => {
+        const member: Member = {
+            id: 1,
+        };
+        const pageParams: PageParams = {
+            sortCol: 'id',
+            sortDirection: 'descending',
+            countPerPage: String(this.countPerPage),
+            pageNo: String(0),
+        };
+        this.props.onMarkAllAsRead(member, pageParams);
+    }
+
+    private handleUnMark = (): void => {
+        const member: Member = {
+            id: 1,
+        };
+        const pageParams: PageParams = {
+            sortCol: 'id',
+            sortDirection: 'descending',
+            countPerPage: String(this.countPerPage),
+            pageNo: String(0),
+        };
+        this.props.onMarkAllAsUnread(member, pageParams);
+    }
+
     private handleViewAll = (): void => {
         this.setState({
             show: false,