diff --git a/dev-server/Phone.js b/dev-server/Phone.js
index 817a8be865..cabec8c009 100644
--- a/dev-server/Phone.js
+++ b/dev-server/Phone.js
@@ -53,6 +53,7 @@ import ActivityMatcher from 'ringcentral-integration/modules/ActivityMatcher';
 import CallLogger from 'ringcentral-integration/modules/CallLogger';
 import ConversationMatcher from 'ringcentral-integration/modules/ConversationMatcher';
 import ConversationLogger from 'ringcentral-integration/modules/ConversationLogger';
+import RecentMessages from 'ringcentral-integration/modules/RecentMessages';
 
 import RouterInteraction from '../src/modules/RouterInteraction';
 
@@ -563,6 +564,13 @@ export default class Phone extends RcModule {
       getState: () => this.state.messages,
     }));
     reducers.messages = this.messages.reducer;
+    this.addModule('recentMessages', new RecentMessages({
+      ...options,
+      client: this.client,
+      messageStore: this.messageStore,
+      getState: () => this.state.recentMessages
+    }));
+    reducers.recentMessages = this.recentMessages.reducer;
     this._reducer = combineReducers({
       ...reducers,
       app: (state = {
diff --git a/dev-server/containers/App/index.js b/dev-server/containers/App/index.js
index 46267ca4ba..3cef1b8b36 100644
--- a/dev-server/containers/App/index.js
+++ b/dev-server/containers/App/index.js
@@ -19,11 +19,10 @@ import CallHistoryPage from '../../../src/containers/CallHistoryPage';
 import IncomingCallPage from '../../../src/containers/IncomingCallPage';
 import CallCtrlPage from '../../../src/containers/CallCtrlPage';
 import CallBadgeContainer from '../../../src/containers/CallBadgeContainer';
-
+import RecentActivityContainer from '../../../src/containers/RecentActivityContainer';
 import MainView from '../MainView';
 import AppView from '../AppView';
 
-
 export default function App({
   phone,
 }) {
@@ -73,6 +72,14 @@ export default function App({
                   callingSettingsUrl="/settings/calling"
                   regionSettingsUrl="/settings/region"
                 />
+                <RecentActivityContainer
+                  locale={phone.locale}
+                  router={phone.router}
+                  dateTimeFormat={phone.dateTimeFormat}
+                  webphone={phone.webphone}
+                  contactMatcher={phone.contactMatcher}
+                  recentMessages={phone.recentMessages}
+                />
               </IncomingCallPage>
             </AppView>
           )} >
@@ -126,7 +133,8 @@ export default function App({
                   regionSettingsUrl="/settings/region"
                   callingSettingsUrl="/settings/calling"
                 />
-              )} />
+              )}
+            />
             <Route
               path="/settings/region"
               component={() => (
@@ -187,7 +195,16 @@ export default function App({
                       return avatarUrl;
                     }
                   }
-                />
+                >
+                  <RecentActivityContainer
+                    locale={phone.locale}
+                    router={phone.router}
+                    dateTimeFormat={phone.dateTimeFormat}
+                    webphone={phone.webphone}
+                    contactMatcher={phone.contactMatcher}
+                    recentMessages={phone.recentMessages}
+                  />
+                </CallCtrlPage>
               )} />
             <Route
               path="/history"
diff --git a/docs/src/app/pages/Components/NavigationBar/Demo.js b/docs/src/app/pages/Components/NavigationBar/Demo.js
index 46cd0243c0..ad59db26dc 100644
--- a/docs/src/app/pages/Components/NavigationBar/Demo.js
+++ b/docs/src/app/pages/Components/NavigationBar/Demo.js
@@ -1,6 +1,7 @@
 import React from 'react';
 // eslint-disable-next-line
 import NavigationBar from 'ringcentral-widget/components/NavigationBar';
+import TabNavigationButton from 'ringcentral-widget/components/TabNavigationButton';
 import dynamicsFont from 'ringcentral-widget/assets/DynamicsFont/DynamicsFont.scss';
 
 const props = {};
@@ -60,6 +61,7 @@ props.tabs = [
 props.goTo = (path) => alert(`go to ${path}`)
 const NavigationBarDemo = () => (
   <NavigationBar
+    button={TabNavigationButton}
     {...props}
   />
 );
diff --git a/package.json b/package.json
index 04f1c3c7c7..128a1ed64c 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "react-router-redux": "^4.0.7",
     "ringcentral": "3.1.1",
     "ringcentral-client": "^1.0.0-rc1",
-    "ringcentral-integration": "^0.7.0-rc8",
+    "ringcentral-integration": "^0.7.0-rc14",
     "whatwg-fetch": "^2.0.1"
   },
   "devDependencies": {
@@ -84,7 +84,7 @@
     "redux-thunk": "^2.1.0",
     "ringcentral": "^3.1.1",
     "ringcentral-client": "^1.0.0-rc1",
-    "ringcentral-integration": "^0.7.0-rc13",
+    "ringcentral-integration": "^0.7.0-rc14",
     "sass-loader": "^6.0.5",
     "source-map-loader": "^0.2.1",
     "style-loader": "^0.18.2",
diff --git a/src/components/NavigationBar/index.js b/src/components/NavigationBar/index.js
index 50d0e9688d..1617f42813 100644
--- a/src/components/NavigationBar/index.js
+++ b/src/components/NavigationBar/index.js
@@ -3,67 +3,11 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import styles from './styles.scss';
 
-
-function NavigationButton({
-  active,
-  activeIcon,
-  icon,
-  label,
-  noticeCounts,
-  onClick,
-  width,
-}) {
-  let notice = null;
-  if (noticeCounts && noticeCounts > 0) {
-    if (noticeCounts > 99) {
-      notice = <div className={styles.notices}>99+</div>;
-    } else {
-      notice = <div className={styles.notice}>{noticeCounts}</div>;
-    }
-  }
-  return (
-    <div
-      onClick={onClick}
-      className={classnames(
-        styles.navigationButton,
-        active && styles.active,
-      )}
-      style={{
-        width,
-      }}
-    >
-      <div className={styles.iconHolder} title={label}>
-        <div className={styles.icon}>
-          {active ? activeIcon : icon }
-        </div>
-        {notice}
-      </div>
-    </div>
-  );
-}
-NavigationButton.propTypes = {
-  icon: PropTypes.node.isRequired,
-  activeIcon: PropTypes.node.isRequired,
-  active: PropTypes.bool,
-  label: PropTypes.string,
-  noticeCounts: PropTypes.number,
-  width: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.string,
-  ]).isRequired,
-  onClick: PropTypes.func,
-};
-NavigationButton.defaultProps = {
-  active: false,
-  label: undefined,
-  noticeCounts: undefined,
-  onClick: undefined,
-};
-
 function NavigationBar(props) {
   const tabWidth = props.tabs.length > 0 ?
     `${(1 / props.tabs.length) * 100}%` :
     0;
+  const NavigationButton = props.button;
   return (
     <nav className={classnames(styles.root, props.className)}>
       {
@@ -87,9 +31,13 @@ function NavigationBar(props) {
 }
 NavigationBar.propTypes = {
   className: PropTypes.string,
+  button: PropTypes.oneOfType([
+    PropTypes.func.isRequired,
+    PropTypes.element.isRequired
+  ]).isRequired,
   tabs: PropTypes.arrayOf(PropTypes.shape({
     icon: PropTypes.node.isRequired,
-    activeIcon: PropTypes.node.isRequired,
+    activeIcon: PropTypes.node,
     label: PropTypes.string,
     path: PropTypes.string.isRequired,
     isActive: PropTypes.func,
diff --git a/src/components/NavigationBar/styles.scss b/src/components/NavigationBar/styles.scss
index 9178c0b470..0fd8f59411 100644
--- a/src/components/NavigationBar/styles.scss
+++ b/src/components/NavigationBar/styles.scss
@@ -1,6 +1,4 @@
-@import '../../lib/commonStyles/vertical-align';
 @import '../../lib/commonStyles/full-size';
-@import '../../lib/commonStyles/no-select';
 @import '../../lib/commonStyles/colors';
 @import '../../lib/commonStyles/layout';
 
@@ -10,93 +8,3 @@
   box-sizing: border-box;
   background-color: $primary-color;
 }
-
-.tab {
-  display: inline-block;
-  box-sizing: border-box;
-  height: 100%;
-  border-style: solid;
-  border-color: $border-color;
-  vertical-align: top;
-  z-index: 10;
-}
-
-.navigationButton {
-  @include full-size;
-  @include no-select;
-  outline: 0;
-  display: inline-block;
-  text-align: center;
-  vertical-align: top;
-  height: 100%;
-  text-decoration: none;
-  cursor: pointer;
-  opacity: 0.8;
-  transition: all 0.1s ease;
-  color: #fff !important;
-  font-size: 16px;
-  text-decoration: none !important;
-}
-/*.navigationButton:hover {
-  background-color: $lightergray;
-}*/
-.navigationButton:hover,
-.navigationButton:focus {
-  outline: 0;
-  opacity: 0.9;
-}
-.navigationButton.active {
-  opacity: 1;
-}
-.iconHolder {
-  @include full-size;
-}
-.icon {
-  @include full-size;
- -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-size: 1.3em;
-  line-height: $navigation-bar-height;
-}
-.labelHolder {
-  @include full-size;
-  height: 35%;
-  position: relative;
-}
-
-.label {
-  @include full-size;
-  @include vertical-align(top);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-size: 0.7em;
-}
-
-.notice {
-  position: absolute;
-  bottom: 1.9em;
-  right: calc(50% - 1.6em);
-  width: 1.4em;
-  height: 1.4em;
-  border-radius: 100%;
-  line-height: 1.4em;
-  font-family: Lato;
-  text-align: center;
-  font-size: 0.7em;
-  background-color: #f65d60;
-  overflow: hidden;
-}
-.notices {
-  position: absolute;
-  bottom: 2em;
-  right: calc(50% - 2em);
-  width: 2.1em;
-  height: 1.5em;
-  border-radius: 3em;
-  line-height: 1.5em;
-  font-family: Lato;
-  text-align: center;
-  font-size: 0.6em;
-  background-color: #f65d60;
-  overflow: hidden;
-}
diff --git a/src/components/RecentActivityMessages/i18n/en-US.js b/src/components/RecentActivityMessages/i18n/en-US.js
new file mode 100644
index 0000000000..fcbc4c1570
--- /dev/null
+++ b/src/components/RecentActivityMessages/i18n/en-US.js
@@ -0,0 +1,3 @@
+export default {
+  noRecords: 'No recent records found.',
+};
diff --git a/src/components/RecentActivityMessages/i18n/index.js b/src/components/RecentActivityMessages/i18n/index.js
new file mode 100644
index 0000000000..25458f23b1
--- /dev/null
+++ b/src/components/RecentActivityMessages/i18n/index.js
@@ -0,0 +1,4 @@
+import I18n from 'ringcentral-integration/lib/I18n';
+import loadLocale from './loadLocale';
+
+export default new I18n(loadLocale);
diff --git a/src/components/RecentActivityMessages/i18n/loadLocale.js b/src/components/RecentActivityMessages/i18n/loadLocale.js
new file mode 100644
index 0000000000..12b11cfa2e
--- /dev/null
+++ b/src/components/RecentActivityMessages/i18n/loadLocale.js
@@ -0,0 +1 @@
+/* loadLocale */
diff --git a/src/components/RecentActivityMessages/index.js b/src/components/RecentActivityMessages/index.js
new file mode 100644
index 0000000000..ec5d96937a
--- /dev/null
+++ b/src/components/RecentActivityMessages/index.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+import Spinner from '../Spinner';
+import styles from './styles.scss';
+import i18n from './i18n';
+
+const cx = classNames.bind(styles);
+function MessageItem({ message, navigateTo, dateTimeFormatter }) {
+  const { subject, lastModifiedTime, readStatus, conversationId } = message;
+  const isUnread = readStatus !== 'Read';
+  const time = dateTimeFormatter({ utcTimestamp: lastModifiedTime });
+  return (
+    <div
+      className={cx('messageItem', { localMessageItem: !message.fromRemote })}
+      onClick={() => !message.fromRemote && navigateTo(`conversations/${conversationId}`)}
+    >
+      <dl className={styles.dl}>
+        <dt className={cx('messageSubject', { unread: isUnread })} title={subject}>{subject}</dt>
+        <dd className={cx('messageTime', { unread: isUnread })} title={time}>{time}</dd>
+      </dl>
+    </div>
+  );
+}
+
+MessageItem.propTypes = {
+  message: PropTypes.object.isRequired,
+  navigateTo: PropTypes.func.isRequired,
+  dateTimeFormatter: PropTypes.func.isRequired
+};
+
+export default function RecentActivityMessages({
+  currentLocale,
+  messages,
+  isMessagesLoaded,
+  navigateTo,
+  dateTimeFormatter
+}) {
+  let messageListView = null;
+  if (!isMessagesLoaded) {
+    messageListView = (<Spinner className={styles.spinner} ringWidth={4} />);
+  } else if (messages.length > 0) {
+    messageListView = messages.map(message => (
+      <MessageItem
+        key={message.id}
+        message={message}
+        navigateTo={navigateTo}
+        dateTimeFormatter={dateTimeFormatter}
+      />
+    ));
+  } else {
+    messageListView = (<p className={styles.noRecords}>{i18n.getString('noRecords', currentLocale)}</p>);
+  }
+  return (
+    <div className={styles.messages}>
+      { messageListView }
+    </div>
+  );
+}
+
+RecentActivityMessages.propTypes = {
+  currentLocale: PropTypes.string.isRequired,
+  messages: PropTypes.array.isRequired,
+  isMessagesLoaded: PropTypes.bool.isRequired,
+  navigateTo: PropTypes.func.isRequired,
+  dateTimeFormatter: PropTypes.func.isRequired
+};
diff --git a/src/components/RecentActivityMessages/styles.scss b/src/components/RecentActivityMessages/styles.scss
new file mode 100644
index 0000000000..79c975bea3
--- /dev/null
+++ b/src/components/RecentActivityMessages/styles.scss
@@ -0,0 +1,65 @@
+@import '../../lib/commonStyles/fonts.scss';
+@import '../../lib/commonStyles/colors.scss';
+
+// TODO: since it's commonly-used, maybe we can move it to utility lib?
+@mixin truncate-text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.messages {
+  height: calc(100% - 85px);
+  padding-top: 15px;
+  overflow-y: auto;
+  @include secondary-font;
+}
+
+.messageItem {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 15px;
+}
+
+.localMessageItem {
+  cursor: pointer;
+}
+
+.localMessageItem:hover {
+  background: #fafafa;
+}
+
+.dl {
+  margin: 0;
+}
+
+.messageSubject {
+  float: left;
+  width: 78%;
+  margin-right: 2%;
+  color: $lightblack;
+  text-align: left;
+  @include truncate-text;
+}
+
+.messageTime {
+  width: 20%;
+  text-align: right;
+  color: $darkergray;
+  @include truncate-text;
+}
+
+.unread {
+  color: $rc-blue;
+}
+.noRecords {
+  color: $darkgray;
+  font-size: 14px;
+  text-align: center;
+  margin-top: 30px;
+}
+.spinner {
+  width: 43px;
+  height: 43px;
+  margin: 30px auto;
+}
diff --git a/src/components/RecentActivityNavigationButton/index.js b/src/components/RecentActivityNavigationButton/index.js
new file mode 100644
index 0000000000..8e7aed5652
--- /dev/null
+++ b/src/components/RecentActivityNavigationButton/index.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import styles from './styles.scss';
+
+export default function NavigationButton({
+  active,
+  icon,
+  label,
+  noticeCounts,
+  onClick,
+  width,
+}) {
+  let notice = null;
+  if (noticeCounts && noticeCounts > 0) {
+    if (noticeCounts > 99) {
+      notice = <div className={styles.notices}>99+</div>;
+    } else {
+      notice = <div className={styles.notice}>{noticeCounts}</div>;
+    }
+  }
+  return (
+    <div
+      onClick={onClick}
+      className={classnames(
+        styles.navigationButton,
+        active && styles.active
+      )}
+      style={{
+        width,
+      }}
+    >
+      <div className={styles.iconHolder} title={label}>
+        <div className={styles.icon}>
+          {icon}
+        </div>
+        {notice}
+      </div>
+    </div>
+  );
+}
+NavigationButton.propTypes = {
+  icon: PropTypes.node.isRequired,
+  active: PropTypes.bool,
+  label: PropTypes.string,
+  noticeCounts: PropTypes.number,
+  width: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string,
+  ]).isRequired,
+  onClick: PropTypes.func,
+};
+NavigationButton.defaultProps = {
+  active: false,
+  label: undefined,
+  noticeCounts: undefined,
+  onClick: undefined,
+};
diff --git a/src/components/RecentActivityNavigationButton/styles.scss b/src/components/RecentActivityNavigationButton/styles.scss
new file mode 100644
index 0000000000..7cae9db13e
--- /dev/null
+++ b/src/components/RecentActivityNavigationButton/styles.scss
@@ -0,0 +1,93 @@
+@import '../../lib/commonStyles/vertical-align';
+@import '../../lib/commonStyles/full-size';
+@import '../../lib/commonStyles/no-select';
+@import '../../lib/commonStyles/colors';
+@import '../../lib/commonStyles/layout';
+
+.navigationButton {
+  @include full-size;
+  @include no-select;
+  outline: 0;
+  display: inline-block;
+  text-align: center;
+  vertical-align: top;
+  height: 100%;
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.1s ease;
+  color: $darkergray !important;
+  font-size: 16px;
+  text-decoration: none !important;
+  box-sizing: border-box;
+  border-bottom: 1px solid #e3e3e3;
+}
+/*.navigationButton:hover {
+  background-color: $lightergray;
+}*/
+.navigationButton:hover,
+.navigationButton:focus {
+  span {
+    color: $rc-blue;
+  }
+
+}
+.navigationButton.active {
+  border-bottom: 1px solid $rc-blue;
+  span {
+    color: $rc-blue;
+  }
+}
+.iconHolder {
+  @include full-size;
+}
+.icon {
+  @include full-size;
+ -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: 1.3em;
+  line-height: $navigation-bar-height;
+}
+.labelHolder {
+  @include full-size;
+  height: 35%;
+  position: relative;
+}
+
+.label {
+  @include full-size;
+  @include vertical-align(top);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: 0.7em;
+}
+
+.notice {
+  position: absolute;
+  bottom: 1.9em;
+  right: calc(50% - 1.6em);
+  width: 1.4em;
+  height: 1.4em;
+  border-radius: 100%;
+  line-height: 1.4em;
+  font-family: Lato;
+  text-align: center;
+  font-size: 0.7em;
+  background-color: #f65d60;
+  overflow: hidden;
+  color: #fff;
+}
+.notices {
+  position: absolute;
+  bottom: 2em;
+  right: calc(50% - 2em);
+  width: 2.1em;
+  height: 1.5em;
+  border-radius: 3em;
+  line-height: 1.5em;
+  font-family: Lato;
+  text-align: center;
+  font-size: 0.6em;
+  background-color: #f65d60;
+  overflow: hidden;
+  color: #fff;
+}
diff --git a/src/components/RecentActivityPanel/expandable.js b/src/components/RecentActivityPanel/expandable.js
new file mode 100644
index 0000000000..78312c05b7
--- /dev/null
+++ b/src/components/RecentActivityPanel/expandable.js
@@ -0,0 +1,38 @@
+import React, { PureComponent } from 'react';
+
+export default function expandable({ styles = {}, className = null }) {
+  return WrappedComponent =>
+    class Expandable extends PureComponent {
+      constructor(props) {
+        super(props);
+        this.state = {
+          expanded: false
+        };
+      }
+
+      togglePanel = (event) => {
+        // In case it's fired twice
+        event.stopPropagation();
+        this.setState(prevState => ({ expanded: !prevState.expanded }));
+      };
+
+      render() {
+        const { expanded } = this.state;
+        const _styles = Object.assign({}, styles, {
+          height: expanded ? styles.height : styles.offset
+        });
+        return (
+          <div
+            style={_styles}
+            className={className}
+          >
+            <WrappedComponent
+              onPanelToggle={this.togglePanel}
+              expanded={expanded}
+              {...this.props}
+            />
+          </div>
+        );
+      }
+    };
+}
diff --git a/src/components/RecentActivityPanel/index.js b/src/components/RecentActivityPanel/index.js
new file mode 100644
index 0000000000..829b7cba11
--- /dev/null
+++ b/src/components/RecentActivityPanel/index.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import classNames from 'classnames/bind';
+import Header from '../Header';
+import styles from './styles.scss';
+import expandable from './expandable';
+import dynamicsFont from '../../assets/DynamicsFont/DynamicsFont.scss';
+import RecentActivityView from '../RecentActivityView';
+
+const cx = classNames.bind(styles);
+const ToggleIcon = ({ expanded }) => (
+  <i className={classnames(dynamicsFont.arrow, cx('arrowIcon', { foldArrowIcon: !expanded }))} />
+);
+
+ToggleIcon.propTypes = {
+  expanded: PropTypes.bool.isRequired
+};
+
+/**
+ * RecentActivityPanel component provides a animated slide-out panel.
+ */
+function RecentActivityPanel(props) {
+  const { title, expanded, onPanelToggle } = props;
+  const toggleButton = {
+    label: <ToggleIcon expanded={expanded} />,
+    onClick: onPanelToggle,
+    placement: 'right'
+  };
+  return (
+    <div className={styles.container}>
+      <div className={styles.header} onClick={onPanelToggle}>
+        <Header buttons={[toggleButton]} className={styles.header}>{title}</Header>
+      </div>
+      <RecentActivityView {...props} />
+    </div>
+  );
+}
+
+RecentActivityPanel.propTypes = {
+  title: PropTypes.string.isRequired,
+  onPanelToggle: PropTypes.func.isRequired,
+  expanded: PropTypes.bool.isRequired
+};
+
+export default expandable({
+  styles: {
+    height: '50%',
+    offset: '40px'
+  },
+  className: styles.expandable
+})(RecentActivityPanel);
diff --git a/src/components/RecentActivityPanel/styles.scss b/src/components/RecentActivityPanel/styles.scss
new file mode 100644
index 0000000000..bdf7042b06
--- /dev/null
+++ b/src/components/RecentActivityPanel/styles.scss
@@ -0,0 +1,33 @@
+@import '../../lib/commonStyles/fonts.scss';
+
+.container {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  box-shadow: 0 -2px 2px 0 rgba(0, 0, 0, 0.1);
+}
+.header {
+  cursor: pointer;
+  border-color: #e3e3e3;
+}
+.headerTitle {
+  @include primary-font;
+}
+.arrowIcon {
+  position: relative;
+  margin-right: 15px;
+}
+.foldArrowIcon {
+  display: inline-block;
+  transform: rotate(180deg);
+}
+.expandable {
+  position: fixed;
+  box-sizing: border-box;
+  z-index: 99;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  transition: height 0.2s 0s ease-in-out;
+  transform: translateZ(0);
+}
diff --git a/src/components/RecentActivityView/index.js b/src/components/RecentActivityView/index.js
new file mode 100644
index 0000000000..a8d423b417
--- /dev/null
+++ b/src/components/RecentActivityView/index.js
@@ -0,0 +1,88 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import styles from './styles.scss';
+import NavigationBar from '../NavigationBar';
+import SpinnerOverlay from '../SpinnerOverlay';
+import RecentActivityNavigationButton from '../RecentActivityNavigationButton';
+import RecentActivityMessages from '../RecentActivityMessages';
+
+export default class RecentActivityView extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentTab: 'recentMessages'
+    };
+  }
+
+  componentDidMount() {
+    this.onTabChanged();
+  }
+
+  componentWillUnmount() {
+    this.props.cleanUpMessages();
+  }
+
+  onTabChanged = (tabName = 'recentMessages') => {
+    if (tabName === 'recentMessages') {
+      this.props.getRecentMessages();
+    }
+    this.setState({
+      currentTab: tabName
+    });
+  }
+
+  getCurrentTabPanel() {
+    const {
+      navigateTo,
+      dateTimeFormatter,
+      messages,
+      currentLocale,
+      isMessagesLoaded
+    } = this.props;
+    const currentTab = this.state.currentTab;
+    if (currentTab === 'recentMessages') {
+      return (
+        <RecentActivityMessages
+          messages={messages}
+          navigateTo={navigateTo}
+          dateTimeFormatter={dateTimeFormatter}
+          currentLocale={currentLocale}
+          isMessagesLoaded={isMessagesLoaded}
+        />
+      );
+    }
+    return null;
+  }
+
+  render() {
+    const { showSpinner, tabs } = this.props;
+    if (showSpinner) return <SpinnerOverlay />;
+    const props = {
+      currentPath: this.state.currentTab,
+      goTo: this.onTabChanged,
+      tabs
+    };
+    return (
+      <div>
+        <NavigationBar
+          button={RecentActivityNavigationButton}
+          className={styles.navigationBar}
+          {...props}
+        />
+        {this.getCurrentTabPanel()}
+      </div>
+    );
+  }
+}
+
+RecentActivityView.propTypes = {
+  currentLocale: PropTypes.string.isRequired,
+  showSpinner: PropTypes.bool.isRequired,
+  isMessagesLoaded: PropTypes.bool.isRequired,
+  tabs: PropTypes.array.isRequired,
+  navigateTo: PropTypes.func.isRequired,
+  dateTimeFormatter: PropTypes.func.isRequired,
+  messages: PropTypes.array.isRequired,
+  getRecentMessages: PropTypes.func.isRequired,
+  cleanUpMessages: PropTypes.func.isRequired
+};
diff --git a/src/components/RecentActivityView/styles.scss b/src/components/RecentActivityView/styles.scss
new file mode 100644
index 0000000000..cb496827c8
--- /dev/null
+++ b/src/components/RecentActivityView/styles.scss
@@ -0,0 +1,3 @@
+.navigationBar {
+  background: #fff !important;
+}
diff --git a/src/components/TabNavigationButton/index.js b/src/components/TabNavigationButton/index.js
new file mode 100644
index 0000000000..ef634eb8cf
--- /dev/null
+++ b/src/components/TabNavigationButton/index.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import styles from './styles.scss';
+
+export default function NavigationButton({
+  active,
+  activeIcon,
+  icon,
+  label,
+  noticeCounts,
+  onClick,
+  width,
+}) {
+  let notice = null;
+  if (noticeCounts && noticeCounts > 0) {
+    if (noticeCounts > 99) {
+      notice = <div className={styles.notices}>99+</div>;
+    } else {
+      notice = <div className={styles.notice}>{noticeCounts}</div>;
+    }
+  }
+  return (
+    <div
+      onClick={onClick}
+      className={classnames(
+        styles.navigationButton,
+        active && styles.active
+      )}
+      style={{
+        width,
+      }}
+    >
+      <div className={styles.iconHolder} title={label}>
+        <div className={styles.icon}>
+          {active ? activeIcon : icon }
+        </div>
+        {notice}
+      </div>
+    </div>
+  );
+}
+NavigationButton.propTypes = {
+  icon: PropTypes.node.isRequired,
+  activeIcon: PropTypes.node.isRequired,
+  active: PropTypes.bool,
+  label: PropTypes.string,
+  noticeCounts: PropTypes.number,
+  width: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string,
+  ]).isRequired,
+  onClick: PropTypes.func,
+};
+NavigationButton.defaultProps = {
+  active: false,
+  label: undefined,
+  noticeCounts: undefined,
+  onClick: undefined,
+};
diff --git a/src/components/TabNavigationButton/styles.scss b/src/components/TabNavigationButton/styles.scss
new file mode 100644
index 0000000000..5ffd03e4ed
--- /dev/null
+++ b/src/components/TabNavigationButton/styles.scss
@@ -0,0 +1,95 @@
+@import '../../lib/commonStyles/vertical-align';
+@import '../../lib/commonStyles/full-size';
+@import '../../lib/commonStyles/no-select';
+@import '../../lib/commonStyles/colors';
+@import '../../lib/commonStyles/layout';
+
+.tab {
+  display: inline-block;
+  box-sizing: border-box;
+  height: 100%;
+  border-style: solid;
+  border-color: $border-color;
+  vertical-align: top;
+  z-index: 10;
+}
+
+.navigationButton {
+  @include full-size;
+  @include no-select;
+  outline: 0;
+  display: inline-block;
+  text-align: center;
+  vertical-align: top;
+  height: 100%;
+  text-decoration: none;
+  cursor: pointer;
+  opacity: 0.8;
+  transition: all 0.1s ease;
+  color: #fff !important;
+  font-size: 16px;
+  text-decoration: none !important;
+}
+/*.navigationButton:hover {
+  background-color: $lightergray;
+}*/
+.navigationButton:hover,
+.navigationButton:focus {
+  outline: 0;
+  opacity: 0.9;
+}
+.navigationButton.active {
+  opacity: 1;
+}
+.iconHolder {
+  @include full-size;
+}
+.icon {
+  @include full-size;
+ -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: 1.3em;
+  line-height: $navigation-bar-height;
+}
+.labelHolder {
+  @include full-size;
+  height: 35%;
+  position: relative;
+}
+
+.label {
+  @include full-size;
+  @include vertical-align(top);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: 0.7em;
+}
+
+.notice {
+  position: absolute;
+  bottom: 1.9em;
+  right: calc(50% - 1.6em);
+  width: 1.4em;
+  height: 1.4em;
+  border-radius: 100%;
+  line-height: 1.4em;
+  font-family: Lato;
+  text-align: center;
+  font-size: 0.7em;
+  background-color: #f65d60;
+  overflow: hidden;
+}
+.notices {
+  position: absolute;
+  bottom: 2em;
+  right: calc(50% - 2em);
+  width: 2.1em;
+  height: 1.5em;
+  border-radius: 3em;
+  line-height: 1.5em;
+  font-family: Lato;
+  text-align: center;
+  font-size: 0.6em;
+  background-color: #f65d60;
+  overflow: hidden;
+}
diff --git a/src/components/TabNavigationView/index.js b/src/components/TabNavigationView/index.js
index 061b5fd256..6d6512e916 100644
--- a/src/components/TabNavigationView/index.js
+++ b/src/components/TabNavigationView/index.js
@@ -3,10 +3,12 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import styles from './styles.scss';
 import NavigationBar from '../NavigationBar';
+import TabNavigationButton from '../TabNavigationButton';
 
 function TabNavigationView(props) {
   const navBar = (
     <NavigationBar
+      button={TabNavigationButton}
       tabs={props.tabs}
       goTo={props.goTo}
       currentPath={props.currentPath}
diff --git a/src/containers/CallCtrlPage/index.js b/src/containers/CallCtrlPage/index.js
index c708b112c0..727233ef08 100644
--- a/src/containers/CallCtrlPage/index.js
+++ b/src/containers/CallCtrlPage/index.js
@@ -232,6 +232,7 @@ CallCtrlContainer.propTypes = {
   getAvatarUrl: PropTypes.func.isRequired,
   onBackButtonClick: PropTypes.func.isRequired,
   onAdd: PropTypes.func.isRequired,
+  children: PropTypes.node
 };
 
 export default CallCtrlContainer;
diff --git a/src/containers/RecentActivityContainer/i18n/en-US.js b/src/containers/RecentActivityContainer/i18n/en-US.js
new file mode 100644
index 0000000000..3a87ad7659
--- /dev/null
+++ b/src/containers/RecentActivityContainer/i18n/en-US.js
@@ -0,0 +1,3 @@
+export default {
+  recentActivities: 'Recent Activities',
+};
diff --git a/src/containers/RecentActivityContainer/i18n/index.js b/src/containers/RecentActivityContainer/i18n/index.js
new file mode 100644
index 0000000000..25458f23b1
--- /dev/null
+++ b/src/containers/RecentActivityContainer/i18n/index.js
@@ -0,0 +1,4 @@
+import I18n from 'ringcentral-integration/lib/I18n';
+import loadLocale from './loadLocale';
+
+export default new I18n(loadLocale);
diff --git a/src/containers/RecentActivityContainer/i18n/loadLocale.js b/src/containers/RecentActivityContainer/i18n/loadLocale.js
new file mode 100644
index 0000000000..12b11cfa2e
--- /dev/null
+++ b/src/containers/RecentActivityContainer/i18n/loadLocale.js
@@ -0,0 +1 @@
+/* loadLocale */
diff --git a/src/containers/RecentActivityContainer/index.js b/src/containers/RecentActivityContainer/index.js
new file mode 100644
index 0000000000..8bc6c7901b
--- /dev/null
+++ b/src/containers/RecentActivityContainer/index.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import callDirections from 'ringcentral-integration/enums/callDirections';
+import RecentActivityPanel from '../../components/RecentActivityPanel';
+import dynamicsFont from '../../assets/DynamicsFont/DynamicsFont.scss';
+import i18n from './i18n';
+
+function getTabs({ unreadCounts }) {
+  return [
+    {
+      icon: <span className={dynamicsFont.active} />,
+      label: 'Calls',
+      path: 'recentCalls',
+      isActive: path => path === 'recentCalls'
+    },
+    {
+      icon: <span className={dynamicsFont.composeText} />,
+      label: 'Messages',
+      path: 'recentMessages',
+      noticeCounts: unreadCounts,
+      isActive: path => path === 'recentMessages'
+    }
+  ];
+}
+
+function mapToProps(_, {
+  locale,
+  currentLocale = locale.currentLocale,
+  dateTimeFormat,
+  recentMessages,
+  contactMatcher
+}) {
+  const unreadCounts = recentMessages.unreadMessageCounts || 0;
+  return {
+    currentLocale,
+    title: i18n.getString('recentActivities', locale.currentLocale),
+    showSpinner: !(
+      dateTimeFormat.ready &&
+      locale.ready &&
+      contactMatcher.ready &&
+      recentMessages.ready
+    ),
+    isMessagesLoaded: recentMessages.isMessagesLoaded,
+    messages: recentMessages.messages || [],
+    tabs: getTabs({ unreadCounts })
+  };
+}
+
+function mapToFunctions(_, {
+  router,
+  dateTimeFormat,
+  dateTimeFormatter = (...args) => dateTimeFormat.formatDateTime(...args),
+  recentMessages,
+  webphone,
+  contactMatcher
+}) {
+  const currentSession = webphone.currentSession || {};
+  const contactMapping = contactMatcher && contactMatcher.dataMapping;
+  const phoneNumber = currentSession.direction === callDirections.outbound ?
+      currentSession.to : currentSession.from;
+  let currentContact = contactMapping && contactMapping[phoneNumber];
+  if (currentContact && currentContact.length >= 1) {
+    currentContact = currentContact[0];
+  }
+  return {
+    dateTimeFormatter,
+    navigateTo(path) {
+      webphone.toggleMinimized();
+      router.push(path);
+    },
+    getRecentMessages: async () => recentMessages.getMessages(currentContact),
+    cleanUpMessages: () => (
+      !webphone.currentSession
+        ? recentMessages.cleanUpMessages()
+        : () => {}
+    )
+  };
+}
+
+export default connect(mapToProps, mapToFunctions)(RecentActivityPanel);
diff --git a/yarn.lock b/yarn.lock
index 62fe0e278e..d30dff53fe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6047,9 +6047,9 @@ ringcentral-client@^1.0.0-rc1:
     form-data "^2.1.2"
     isomorphic-fetch "^2.2.1"
 
-ringcentral-integration@^0.7.0-rc13:
-  version "0.7.0-rc13"
-  resolved "https://registry.yarnpkg.com/ringcentral-integration/-/ringcentral-integration-0.7.0-rc13.tgz#5b32203faa072bf6a29ae6549905e4fa0d3a23d6"
+ringcentral-integration@^0.7.0-rc14:
+  version "0.7.0-rc14"
+  resolved "https://registry.yarnpkg.com/ringcentral-integration/-/ringcentral-integration-0.7.0-rc14.tgz#770282b5a4c4b8287d798ff76fb97168abc0b531"
   dependencies:
     file-loader "^0.11.2"
     json-mask "^0.3.8"