diff --git a/src/common/pages/App/index.js b/src/common/pages/App/index.js
index 824151f..3236cc7 100644
--- a/src/common/pages/App/index.js
+++ b/src/common/pages/App/index.js
@@ -316,57 +316,59 @@ export default class App extends React.Component {
     // const applicationIcon = (this.settingStore.isIconEmpty) ? "/assets/images/logo_ikan.png" : this.http.appendImagePath(this.settingStore.setting.icon);
     const applicationIcon = "/assets/images/logo_ikan.png";
 
-    let onNotifRowClick = (record)=>{
+    let onNotifRowClick = (record) => {
       // if(record.notification.type == 'order_seller' && _.get(record,'notification.additional_data.user_order_store_id',false) != false){
       //   return `${LINKS.ORDER}/${record.notification.additional_data.user_order_store_id}`;
       // }
       // else if(record.notification.type == 'order_seller' && _.get(record,'notification.additional_data.user_order_store_id',false) == false){
       //   return `${LINKS.ORDER}`;
       // }
-        return `${LINKS.ORDER}`;
+      return `${LINKS.ORDER}`;
     }
     return (
       <PrintProvider>
         <NoPrint>
-      <div className="app-container">
-        <Helmet>
-          <meta charSet="utf-8"/>
-          <title>Marketplace</title>
-          <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-          <link rel="icon" type="image/png" href={applicationIcon} sizes="96x96"/>
-        </Helmet>
+          <div className="app-container">
+            <Helmet>
+              <meta charSet="utf-8"/>
+              <title>Marketplace</title>
+              <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+              <link rel="icon" type="image/png" href={applicationIcon} sizes="96x96"/>
+            </Helmet>
 
-        <ButterToast trayPosition="bottom-right"/>
-        <Snackbar
-          open={this.globalUI.snackbarVisibility}
-          message={this.globalUI.snackbarMessage}
-          autoHideDuration={3000}/>
+            <ButterToast trayPosition="bottom-right"/>
+            <Snackbar
+              open={this.globalUI.snackbarVisibility}
+              message={this.globalUI.snackbarMessage}
+              autoHideDuration={3000}/>
 
-        <Dialog
-        style={{margin: 'auto'}}
-        open={this.globalUI.loadingVisibility}>
-        <div style={{textAlign: 'center'}}>
-        <LoadingDialog/>
-        </div>
-        </Dialog>
-        <DepositDialog/>
-        <WithdrawDialog/>
+            <Dialog
+              style={{margin: 'auto'}}
+              open={this.globalUI.loadingVisibility}>
+              <div style={{textAlign: 'center'}}>
+                <LoadingDialog/>
+              </div>
+            </Dialog>
+            <DepositDialog/>
+            <WithdrawDialog/>
 
 
-        <Toolbar className="toolbarAkunTiket">
-          <ToolbarGroup>
-            <IconButton className="hide-on-med-and-up" onClick={() => this.toggleDrawer()}><IconMenus/></IconButton>
+            <Toolbar className="toolbarAkunTiket">
+              <ToolbarGroup>
+                <IconButton className="hide-on-med-and-up" onClick={() => this.toggleDrawer()}><IconMenus/></IconButton>
 
-            {/* <ToolbarTitle className="show-on-small marketplace-toolbarTitle" style={{color: '#424770'}}
+                {/* <ToolbarTitle className="show-on-small marketplace-toolbarTitle" style={{color: '#424770'}}
                           text={"Store Admin"}/> */}
 
-            <img style={{width: 150, height: 50}} src={'http://btn-redemption-2.bangun-kreatif.com/dr6u0fppdi4xy.cloudfront.net/FilesDirectory/Albilad/ImgIconImage/logo-btn.png'} />
+                <img style={{width: 150, height: 50}}
+                     src={'http://btn-redemption-2.bangun-kreatif.com/dr6u0fppdi4xy.cloudfront.net/FilesDirectory/Albilad/ImgIconImage/logo-btn.png'}/>
 
-            <ToolbarSeparator className="hide-on-small-only" style={{marginLeft: 30, marginRight: 30}}/>
-            <IconButton className="hide-on-small-only" style={{marginRight: 10}} onClick={() => this.toggleDrawer()}>
-              <IconMenus/>
-            </IconButton>
-            {/* <Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"
+                <ToolbarSeparator className="hide-on-small-only" style={{marginLeft: 30, marginRight: 30}}/>
+                <IconButton className="hide-on-small-only" style={{marginRight: 10}}
+                            onClick={() => this.toggleDrawer()}>
+                  <IconMenus/>
+                </IconButton>
+                {/* <Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"
                     style={{marginRight: (window.innerWidth < 600) ? 2 : 10}}
                     onClick={() => this.openNotification(null, "System Information", "This is your computer locale timezone", "clock-circle")}>
               <Icon type="clock-circle"/> <span className="hide-on-small-only">{moment().format('h:mm:ss A')}</span>
@@ -378,49 +380,49 @@ export default class App extends React.Component {
               <Icon type="environment"/><span className="hide-on-small-only">{this.user.userGeolocation.ip}</span>
             </Button> */}
 
-            <Link onClick={this
-              .changeRoute
-              .bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
-              // leftIcon={<img src="/assets/images/icon/chart.png"/>}
-              className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span
-              className="menuAkun">Dashboard</span></MenuItem></Link>
+                <Link onClick={this
+                  .changeRoute
+                  .bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
+                  // leftIcon={<img src="/assets/images/icon/chart.png"/>}
+                  className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span
+                  className="menuAkun">Dashboard</span></MenuItem></Link>
 
-            <Link onClick={this
-              .changeRoute
-              .bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
-              // leftIcon={<img src="/assets/images/icon/flight.png"/>}
-              className={(this.state.selectedMenu === '/app/flight') ? "menuAkunItem active" : 'menuAkunItem'}><span
-              className="menuAkun">Flight</span></MenuItem></Link>
+                <Link onClick={this
+                  .changeRoute
+                  .bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
+                  // leftIcon={<img src="/assets/images/icon/flight.png"/>}
+                  className={(this.state.selectedMenu === '/app/flight') ? "menuAkunItem active" : 'menuAkunItem'}><span
+                  className="menuAkun">Flight</span></MenuItem></Link>
 
-            <Link onClick={this
-              .changeRoute
-              .bind(this, '/app/hotel')} to={LINKS.HOTEL}><MenuItem
-              // leftIcon={<img src="/assets/images/icon/hotel.png"/>}
-              className={(this.state.selectedMenu === '/app/hotel') ? "menuAkunItem active" : 'menuAkunItem'}><span
-              className="menuAkun">Hotel</span></MenuItem></Link>
+                <Link onClick={this
+                  .changeRoute
+                  .bind(this, '/app/hotel')} to={LINKS.HOTEL}><MenuItem
+                  // leftIcon={<img src="/assets/images/icon/hotel.png"/>}
+                  className={(this.state.selectedMenu === '/app/hotel') ? "menuAkunItem active" : 'menuAkunItem'}><span
+                  className="menuAkun">Hotel</span></MenuItem></Link>
 
-            <Link onClick={this
-              .changeRoute
-              .bind(this, '/app/car')} to={LINKS.CAR}><MenuItem
-              // leftIcon={<img src="/assets/images/icon/car.png"/>}
-              className={(this.state.selectedMenu === '/app/car') ? "menuAkunItem active" : 'menuAkunItem'}><span
-              className="menuAkun">Car</span></MenuItem></Link>
+                <Link onClick={this
+                  .changeRoute
+                  .bind(this, '/app/car')} to={LINKS.CAR}><MenuItem
+                  // leftIcon={<img src="/assets/images/icon/car.png"/>}
+                  className={(this.state.selectedMenu === '/app/car') ? "menuAkunItem active" : 'menuAkunItem'}><span
+                  className="menuAkun">Car</span></MenuItem></Link>
 
-            <Link onClick={this
-              .changeRoute
-              .bind(this, '/app/shop')} to={LINKS.ITEMS}><MenuItem
-              // leftIcon={<img src="/assets/images/icon/product.png"/>}
-              className={(this.state.selectedMenu === '/app/shop') ? "menuAkunItem active" : 'menuAkunItem'}><span
-              className="menuAkun">Shop</span></MenuItem></Link>
+                <Link onClick={this
+                  .changeRoute
+                  .bind(this, '/app/shop')} to={LINKS.ITEMS}><MenuItem
+                  // leftIcon={<img src="/assets/images/icon/product.png"/>}
+                  className={(this.state.selectedMenu === '/app/shop') ? "menuAkunItem active" : 'menuAkunItem'}><span
+                  className="menuAkun">Shop</span></MenuItem></Link>
 
-            <Link onClick={this
-              .changeRoute
-              .bind(this, '/app/vouchers')} to={LINKS.VOUCHERS}><MenuItem
-              // leftIcon={<img src="/assets/images/icon/product.png"/>}
-              className={(this.state.selectedMenu === '/app/vouchers') ? "menuAkunItem active" : 'menuAkunItem'}><span
-              className="menuAkun">Vouchers</span></MenuItem></Link>
+                <Link onClick={this
+                  .changeRoute
+                  .bind(this, '/app/vouchers')} to={LINKS.VOUCHERS}><MenuItem
+                  // leftIcon={<img src="/assets/images/icon/product.png"/>}
+                  className={(this.state.selectedMenu === '/app/vouchers') ? "menuAkunItem active" : 'menuAkunItem'}><span
+                  className="menuAkun">Vouchers</span></MenuItem></Link>
 
-            {/* <Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"
+                {/* <Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"
                     style={{marginRight: (window.innerWidth < 600) ? 2 : 10}}
                     onClick={() => this.openNotification(null, "System Information", "This is your computer locale timezone", "calendar")}>
               <Icon type="calendar"/><span className="hide-on-small-only">{this.user.userGeolocation.time_zone}</span>
@@ -433,220 +435,242 @@ export default class App extends React.Component {
               className="hide-on-small-only">{this.user.userGeolocation.latitude}, {this.user.userGeolocation.longitude}</span>
             </Button>  */}
 
-          </ToolbarGroup>
-          <ToolbarGroup>
-          <IconMenu
-              anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}
-              targetOrigin={{vertical: 'top', horizontal: 'right'}}
-              onClick={()=>this.notificationStore.readAll()}
-              iconButtonElement={
-                <div>
-                  {userData.role === 'admin' ? (
-                    <div>
-                      {this.notificationStore.unread_notif === 0 ?
-                        <IconButton className="menuAkunItem" tooltip="Notification center"
-                                    tooltipPosition="bottom-center">
-                          <ShoppingCart/>
-                        </IconButton> :
-                        <Badge
-                          badgeContent={this.notificationStore.unread_notif}
-                          primary={true}
-                          badgeStyle={{top: 15, right: 12}}
-                        >
-                          <IconButton className="menuAkunItem" tooltip="Notification center"
-                                      tooltipPosition="bottom-center">
-                            <ShoppingCart/>
-                          </IconButton>
-                        </Badge>
-                      }
-                    </div>
-                  ) : (
-                    <div>
-                      {this.notificationStore.unread_notif === 0 ?
-                        <IconButton className="menuAkunItem" tooltip="Notification center"
-                                    tooltipPosition="bottom-center">
-                          <ShoppingCart/>
-                        </IconButton> :
-                        <Badge
-                          badgeContent={this.notificationStore.unread_notif}
-                          primary={true}
-                          badgeStyle={{top: 15, right: 12}}
-                        >
-                          <IconButton className="menuAkunItem" tooltip="Notification center"
-                                      tooltipPosition="bottom-center">
-                            <ShoppingCart/>
-                          </IconButton>
-                        </Badge>
-                      }
-                    </div>
-                  )}
-
+              </ToolbarGroup>
+              <ToolbarGroup>
+                <div className={'containerWalletBar'}>
+                  <div className={'containerVoucher'}>
+                    <p className={'titleVoucher'}>Voucher</p>
+                    <p className={'textVoucher'}>
+                      <NumberFormat value={(500000).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
+                    </p>
+                  </div>
+                  <div className={'containerPoints'}>
+                    <p className={'titlePoints'}>Points</p>
+                    <p className={'textPoints'}>
+                      <NumberFormat value={(15000)} displayType={'text'} thousandSeparator={true}/>
+                    </p>
+                  </div>
                 </div>
-              }
-            >
-              <List>
-                {
-                (this.notificationStore.list.length) ?
-                  this.notificationStore.list.slice(0, 5).map((item, index) => {
-                    return (
-                      <Link to={onNotifRowClick(item)}>
-                        <ListItem
-                          // leftAvatar={<Avatar src="images/ok-128.jpg" />}
-                          primaryText={item.notification.title}
-                          secondaryText={
-                            <div>
-                              <p>
-                                <span style={{color: darkBlack}}>{item.notification.description.substr(0,40)}{(item.notification.description.length > 40) ? '...' : ""}</span>
-                              </p>
-                                <p style={{fontSize:10,color:black}}>{moment(item.created_at).fromNow()}</p>
-                            </div>
-                          }
-                          secondaryTextLines={2}
-                        />
-                      </Link>
-                    );
-                  }) :  <EmptyComponent width="" image="default4" type="empty" header="" content="No notification yet! "/>
-              }
-                <Link to={`${LINKS.CART_DETAIL}`}>
-                    <ListItem
-                      primaryText={
-                        <div style={{textAlign:'center'}}>
-                          <p>View All</p>
-                        </div>
-                      }
-                  />
-                </Link>
-              </List>
-            </IconMenu>
 
-            <IconMenu
-              anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}
-              targetOrigin={{vertical: 'top', horizontal: 'right'}}
-              onClick={()=>this.notificationStore.readAll()}
-              iconButtonElement={
-                <div>
-                  {userData.role === 'admin' ? (
+                <IconMenu
+                  anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}
+                  targetOrigin={{vertical: 'top', horizontal: 'right'}}
+                  onClick={() => this.notificationStore.readAll()}
+                  iconButtonElement={
                     <div>
-                      {this.notificationStore.unread_notif === 0 ?
-                        <IconButton className="menuAkunItem" tooltip="Notification center"
-                                    tooltipPosition="bottom-center">
-                          <img className="img-responsive" src="/assets/images/icon/toa.png" alt=""/>
-                        </IconButton> :
-                        <Badge
-                          badgeContent={this.notificationStore.unread_notif}
-                          primary={true}
-                          badgeStyle={{top: 15, right: 12}}
-                        >
-                          <IconButton className="menuAkunItem" tooltip="Notification center"
-                                      tooltipPosition="bottom-center">
-                            <img className="img-responsive" src="/assets/images/icon/toa.png" alt=""/>
-                          </IconButton>
-                        </Badge>
-                      }
-                    </div>
-                  ) : (
-                    <div>
-                      {this.notificationStore.unread_notif === 0 ?
-                        <IconButton className="menuAkunItem" tooltip="Notification center"
-                                    tooltipPosition="bottom-center">
-                          <img className="img-responsive" src="/assets/images/icon/toa.png" alt=""/>
-                        </IconButton> :
-                        <Badge
-                          badgeContent={this.notificationStore.unread_notif}
-                          primary={true}
-                          badgeStyle={{top: 15, right: 12}}
-                        >
-                          <IconButton className="menuAkunItem" tooltip="Notification center"
-                                      tooltipPosition="bottom-center">
-                            <img className="img-responsive" src="/assets/images/icon/toa.png" alt=""/>
-                          </IconButton>
-                        </Badge>
-                      }
-                    </div>
-                  )}
-
-                </div>
-              }
-            >
-              <List>
-                {
-                (this.notificationStore.list.length) ?
-                  this.notificationStore.list.slice(0, 5).map((item, index) => {
-                    return (
-                      <Link to={onNotifRowClick(item)}>
-                        <ListItem
-                          // leftAvatar={<Avatar src="images/ok-128.jpg" />}
-                          primaryText={item.notification.title}
-                          secondaryText={
-                            <div>
-                              <p>
-                                <span style={{color: darkBlack}}>{item.notification.description.substr(0,40)}{(item.notification.description.length > 40) ? '...' : ""}</span>
-                              </p>
-                                <p style={{fontSize:10,color:black}}>{moment(item.created_at).fromNow()}</p>
-                            </div>
+                      {userData.role === 'admin' ? (
+                        <div>
+                          {this.notificationStore.unread_notif === 0 ?
+                            <IconButton className="menuAkunItem" tooltip="Notification center"
+                                        tooltipPosition="bottom-center">
+                              <ShoppingCart/>
+                            </IconButton> :
+                            <Badge
+                              badgeContent={this.notificationStore.unread_notif}
+                              primary={true}
+                              badgeStyle={{top: 15, right: 12}}
+                            >
+                              <IconButton className="menuAkunItem" tooltip="Notification center"
+                                          tooltipPosition="bottom-center">
+                                <ShoppingCart/>
+                              </IconButton>
+                            </Badge>
                           }
-                          secondaryTextLines={2}
-                        />
-                      </Link>
-                    );
-                  }) :  <EmptyComponent width="" image="default4" type="empty" header="" content="No notification yet! "/>
-              }
-                <Link to={`${LINKS.CART_DETAIL}`}>
-                    <ListItem
-                      primaryText={
-                        <div style={{textAlign:'center'}}>
-                          <p>View All</p>
                         </div>
-                      }
-                  />
-                </Link>
-              </List>
-            </IconMenu>
+                      ) : (
+                        <div>
+                          {this.notificationStore.unread_notif === 0 ?
+                            <IconButton className="menuAkunItem" tooltip="Notification center"
+                                        tooltipPosition="bottom-center">
+                              <ShoppingCart/>
+                            </IconButton> :
+                            <Badge
+                              badgeContent={this.notificationStore.unread_notif}
+                              primary={true}
+                              badgeStyle={{top: 15, right: 12}}
+                            >
+                              <IconButton className="menuAkunItem" tooltip="Notification center"
+                                          tooltipPosition="bottom-center">
+                                <ShoppingCart/>
+                              </IconButton>
+                            </Badge>
+                          }
+                        </div>
+                      )}
 
-            <IconMenu
-              anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}
-              targetOrigin={{vertical: 'top', horizontal: 'right'}}
-              iconButtonElement={
-                <IconButton style={{width: 'auto', height: 'auto'}} iconStyle={{width: 35, height: 'auto',borderRadius: '45%'}}>
-                  {!!this.profileStore.userProfile.photo?
-                    <img src={this.http.appendImagePath(this.profileStore.userProfile.photo)}/> : <IconUserCircle/>
+                    </div>
                   }
+                >
+                  <List>
+                    {
+                      (this.notificationStore.list.length) ?
+                        this.notificationStore.list.slice(0, 5).map((item, index) => {
+                          return (
+                            <Link to={onNotifRowClick(item)}>
+                              <ListItem
+                                // leftAvatar={<Avatar src="images/ok-128.jpg" />}
+                                primaryText={item.notification.title}
+                                secondaryText={
+                                  <div>
+                                    <p>
+                                      <span
+                                        style={{color: darkBlack}}>{item.notification.description.substr(0, 40)}{(item.notification.description.length > 40) ? '...' : ""}</span>
+                                    </p>
+                                    <p style={{fontSize: 10, color: black}}>{moment(item.created_at).fromNow()}</p>
+                                  </div>
+                                }
+                                secondaryTextLines={2}
+                              />
+                            </Link>
+                          );
+                        }) : <EmptyComponent width="" image="default4" type="empty" header=""
+                                             content="No notification yet! "/>
+                    }
+                    <Link to={`${LINKS.CART_DETAIL}`}>
+                      <ListItem
+                        primaryText={
+                          <div style={{textAlign: 'center'}}>
+                            <p>View All</p>
+                          </div>
+                        }
+                      />
+                    </Link>
+                  </List>
+                </IconMenu>
 
-                </IconButton>
-              }
-            ><List>
-              <ListItem
-                style={{padding: '0px 16px 0px', fontSize: 14}}
-                disabled={true}
-                primaryText={<span style={{fontWeight: 500}}>{this.authStore.userProfile.username || 'Username'}</span>}
-                secondaryText={<p style={{fontWeight: 400}}>{_.capitalize(this.authStore.userProfile.role) || 'role'}</p>}
-              />
-            </List>
-              <Divider/>
-              <Link onClick={this
-                .changeRoute
-                .bind(this, '/app/transaction')} to={LINKS.TRANSACTION}> <MenuItem style={{fontSize: 14}}
-                                                                           primaryText="Transaction"/></Link>
-              <Link onClick={this
-                .changeRoute
-                .bind(this, '/app/profile')} to={LINKS.PROFILE}> <MenuItem style={{fontSize: 14}}
-                                                                           primaryText="Profile"/></Link>
-              <MenuItem onClick={this.willLogout.bind(this)} style={{fontSize: 14}} primaryText="Sign out"/>
-            </IconMenu>
-          </ToolbarGroup>
-        </Toolbar>
+                <IconMenu
+                  anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}
+                  targetOrigin={{vertical: 'top', horizontal: 'right'}}
+                  onClick={() => this.notificationStore.readAll()}
+                  iconButtonElement={
+                    <div>
+                      {userData.role === 'admin' ? (
+                        <div>
+                          {this.notificationStore.unread_notif === 0 ?
+                            <IconButton className="menuAkunItem" tooltip="Notification center"
+                                        tooltipPosition="bottom-center">
+                              <img className="img-responsive" src="/assets/images/icon/toa.png" alt=""/>
+                            </IconButton> :
+                            <Badge
+                              badgeContent={this.notificationStore.unread_notif}
+                              primary={true}
+                              badgeStyle={{top: 15, right: 12}}
+                            >
+                              <IconButton className="menuAkunItem" tooltip="Notification center"
+                                          tooltipPosition="bottom-center">
+                                <img className="img-responsive" src="/assets/images/icon/toa.png" alt=""/>
+                              </IconButton>
+                            </Badge>
+                          }
+                        </div>
+                      ) : (
+                        <div>
+                          {this.notificationStore.unread_notif === 0 ?
+                            <IconButton className="menuAkunItem" tooltip="Notification center"
+                                        tooltipPosition="bottom-center">
+                              <img className="img-responsive" src="/assets/images/icon/toa.png" alt=""/>
+                            </IconButton> :
+                            <Badge
+                              badgeContent={this.notificationStore.unread_notif}
+                              primary={true}
+                              badgeStyle={{top: 15, right: 12}}
+                            >
+                              <IconButton className="menuAkunItem" tooltip="Notification center"
+                                          tooltipPosition="bottom-center">
+                                <img className="img-responsive" src="/assets/images/icon/toa.png" alt=""/>
+                              </IconButton>
+                            </Badge>
+                          }
+                        </div>
+                      )}
 
-        <div className="mainContent" style={{
-          // paddingLeft: (window.innerWidth < 600) ? '0px' : '50px',
-          // marginLeft: (window.innerWidth < 600) ? 'auto' : '50px',
-          // marginRight: (window.innerWidth < 600) ? '0' : '50px',
-        }}>
-          <div className="try"/>
-          <Route/>
-        </div>
+                    </div>
+                  }
+                >
+                  <List>
+                    {
+                      (this.notificationStore.list.length) ?
+                        this.notificationStore.list.slice(0, 5).map((item, index) => {
+                          return (
+                            <Link to={onNotifRowClick(item)}>
+                              <ListItem
+                                // leftAvatar={<Avatar src="images/ok-128.jpg" />}
+                                primaryText={item.notification.title}
+                                secondaryText={
+                                  <div>
+                                    <p>
+                                      <span
+                                        style={{color: darkBlack}}>{item.notification.description.substr(0, 40)}{(item.notification.description.length > 40) ? '...' : ""}</span>
+                                    </p>
+                                    <p style={{fontSize: 10, color: black}}>{moment(item.created_at).fromNow()}</p>
+                                  </div>
+                                }
+                                secondaryTextLines={2}
+                              />
+                            </Link>
+                          );
+                        }) : <EmptyComponent width="" image="default4" type="empty" header=""
+                                             content="No notification yet! "/>
+                    }
+                    <Link to={`${LINKS.CART_DETAIL}`}>
+                      <ListItem
+                        primaryText={
+                          <div style={{textAlign: 'center'}}>
+                            <p>View All</p>
+                          </div>
+                        }
+                      />
+                    </Link>
+                  </List>
+                </IconMenu>
 
-      </div>
-      </NoPrint>
+                <IconMenu
+                  anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}
+                  targetOrigin={{vertical: 'top', horizontal: 'right'}}
+                  iconButtonElement={
+                    <IconButton style={{width: 'auto', height: 'auto'}}
+                                iconStyle={{width: 35, height: 'auto', borderRadius: '45%'}}>
+                      {!!this.profileStore.userProfile.photo ?
+                        <img src={this.http.appendImagePath(this.profileStore.userProfile.photo)}/> : <IconUserCircle/>
+                      }
+
+                    </IconButton>
+                  }
+                ><List>
+                  <ListItem
+                    style={{padding: '0px 16px 0px', fontSize: 14}}
+                    disabled={true}
+                    primaryText={<span
+                      style={{fontWeight: 500}}>{this.authStore.userProfile.username || 'Username'}</span>}
+                    secondaryText={<p
+                      style={{fontWeight: 400}}>{_.capitalize(this.authStore.userProfile.role) || 'role'}</p>}
+                  />
+                </List>
+                  <Divider/>
+                  <Link onClick={this
+                    .changeRoute
+                    .bind(this, '/app/transaction')} to={LINKS.TRANSACTION}> <MenuItem style={{fontSize: 14}}
+                                                                                       primaryText="Transaction"/></Link>
+                  <Link onClick={this
+                    .changeRoute
+                    .bind(this, '/app/profile')} to={LINKS.PROFILE}> <MenuItem style={{fontSize: 14}}
+                                                                               primaryText="Profile"/></Link>
+                  <MenuItem onClick={this.willLogout.bind(this)} style={{fontSize: 14}} primaryText="Sign out"/>
+                </IconMenu>
+              </ToolbarGroup>
+            </Toolbar>
+
+            <div className="mainContent" style={{
+              // paddingLeft: (window.innerWidth < 600) ? '0px' : '50px',
+              // marginLeft: (window.innerWidth < 600) ? 'auto' : '50px',
+              // marginRight: (window.innerWidth < 600) ? '0' : '50px',
+            }}>
+              <div className="try"/>
+              <Route/>
+            </div>
+
+          </div>
+        </NoPrint>
       </PrintProvider>
     );
   }
diff --git a/src/common/pages/App/style.scss b/src/common/pages/App/style.scss
index 7170d09..3125f11 100644
--- a/src/common/pages/App/style.scss
+++ b/src/common/pages/App/style.scss
@@ -1,4 +1,43 @@
 .app-container {
+
+  .containerWalletBar{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 11vw;
+    height: 70px;
+    align-items: center;
+    margin-right: 15px;
+
+    .containerVoucher{
+
+      .titleVoucher{
+        margin-bottom: 0px;
+        font-size: 0.65rem;
+      }
+
+      .textVoucher{
+        margin-bottom: 0px;
+        font-weight: 600;
+        color: #424770;
+      }
+    }
+
+    .containerPoints{
+
+      .titlePoints{
+        margin-bottom: 0px;
+        font-size: 0.65rem;
+      }
+
+      .textPoints{
+        margin-bottom: 0px;
+        font-weight: 600;
+        color: #424770;
+      }
+    }
+  }
+
   .mainContent {
     width: calc(100vw - 14vw);
     margin-left: 2.5vw;