diff --git a/src/ts/@overflow/app/views/layout/LogoBar.tsx b/src/ts/@overflow/app/views/layout/LogoBar.tsx
index 3f7ffd3..3b4ad35 100644
--- a/src/ts/@overflow/app/views/layout/LogoBar.tsx
+++ b/src/ts/@overflow/app/views/layout/LogoBar.tsx
@@ -7,6 +7,7 @@ import {
   Image,
   Label,
   Button,
+  Icon,
 } from 'semantic-ui-react';
 import Notification from '@overflow/notification/react/Notification';
 
@@ -25,13 +26,17 @@ export class LogoBar extends React.Component<any, any> {
 
   public render(): JSX.Element {
     let icon =
-      <Button
-        color='red'
-        content='Notifications'
-        icon='bell'
-        floated='right'
-        label={{ basic: true, color: 'red', pointing: 'left', content: '3' }}
-      />;
+      // <Button
+      //   color='red'
+      //   content='Notifications'
+      //   icon='bell'
+      //   floated='right'
+      //   label={{ basic: true, color: 'red', pointing: 'left', content: '3' }}
+      // />;
+        <Menu.Item position='right'>
+          <Icon name='bell'/>
+          <Label color='red'>10</Label>
+        </Menu.Item>;
 
     return (
       <Container fluid style={{ background: '#f8f8f8', 'paddingRight': '7px' }}>
@@ -40,6 +45,9 @@ export class LogoBar extends React.Component<any, any> {
             {/*<Image src='../asset/image/overFlow_CI_blue_180.png'
             style={{width:'120px'}} onClick={this.handleLogoClick} /> */}
           </Menu.Item>
+
+
+
           <Popup trigger={icon} on='click' wide >
             <Notification />
           </Popup>
diff --git a/src/ts/@overflow/notification/react/components/NotificationList.tsx b/src/ts/@overflow/notification/react/components/NotificationList.tsx
index d4c2861..1cfdb6c 100644
--- a/src/ts/@overflow/notification/react/components/NotificationList.tsx
+++ b/src/ts/@overflow/notification/react/components/NotificationList.tsx
@@ -44,8 +44,8 @@ export class NotificationList extends React.Component<Props, State> {
             id: 1,
         };
         const pageParams: PageParams = {
-            sortCol: 'id',
-            sortDirection: 'descending',
+            sortCol: this.sortCol,
+            sortDirection: this.sortDirection,
             countPerPage: String(this.countPerPage),
             pageNo: String(this.pageNo),
         };
@@ -57,10 +57,10 @@ 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}>
-                <Table.Cell textAlign={'center'}>{noti.id}</Table.Cell>
-                <Table.Cell textAlign={'center'}>{noti.createDate}</Table.Cell>
-                <Table.Cell textAlign={'center'}>{noti.title}</Table.Cell>
+            <Table.Row key={index} active={this.checkRead(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>
                 <Table.Cell textAlign={'center'}>{noti.message}</Table.Cell>
             </Table.Row>
         ));
@@ -75,7 +75,7 @@ export class NotificationList extends React.Component<Props, State> {
 
         return (
             <Container fluid>
-                <Table celled striped sortable>
+                <Table  sortable>
                     <Table.Header>
                         <SortTableHeaderRow columnMap={colsmap} onHeaderColumnClick={this.handleSort} />
                     </Table.Header>
@@ -107,4 +107,10 @@ export class NotificationList extends React.Component<Props, State> {
         this.pageNo = pageNo;
         this.getData();
     }
+    private checkRead = (noti: Notification): boolean => {
+        if (noti.confirmDate === null) {
+            return true;
+        }
+        return false;
+    }
 }