diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts
index 86a840b8..12a5d952 100644
--- a/src/app/pages/pages.component.ts
+++ b/src/app/pages/pages.component.ts
@@ -3,13 +3,13 @@ import {RouteConfig, Router} from 'angular2/router';
 
 import {Dashboard} from './dashboard';
 import {Ui} from './ui';
-import {PageTop, Sidebar} from '../theme';
+import {PageTop, ContentTop, Sidebar} from '../theme';
 
 @Component({
   selector: 'pages',
   encapsulation: ViewEncapsulation.None,
   styles: [],
-  directives: [PageTop, Sidebar],
+  directives: [PageTop, Sidebar, ContentTop],
   template: `
     <sidebar></sidebar>
     <page-top></page-top>
diff --git a/src/app/theme/contentTop/contentTop.component.ts b/src/app/theme/contentTop/contentTop.component.ts
new file mode 100644
index 00000000..35aee169
--- /dev/null
+++ b/src/app/theme/contentTop/contentTop.component.ts
@@ -0,0 +1,25 @@
+import {Component, ViewEncapsulation} from 'angular2/core';
+
+import {ThemeGlobal} from "../theme.global";
+import {Subscription} from "rxjs/Subscription";
+
+@Component({
+  selector: 'content-top',
+  styles: [require('./contentTop.scss')],
+  template: require('./contentTop.html'),
+})
+export class ContentTop {
+  activePageTitle = '';
+  private _themeGlobalSubscription:Subscription;
+
+  constructor(private _themeGlobal:ThemeGlobal) {
+    this._themeGlobalSubscription = this._themeGlobal.getDataStream().subscribe((data) => {
+      this.activePageTitle = data['menu.activeLink'] != null ? data['menu.activeLink'].title : this.activePageTitle;
+    });
+  }
+
+  ngOnDestroy() {
+    // prevent memory leak when component destroyed
+    this._themeGlobalSubscription.unsubscribe();
+  }
+}
diff --git a/src/app/theme/contentTop/contentTop.html b/src/app/theme/contentTop/contentTop.html
new file mode 100644
index 00000000..446334e7
--- /dev/null
+++ b/src/app/theme/contentTop/contentTop.html
@@ -0,0 +1,9 @@
+<div class="content-top clearfix">
+  <h1 class="al-title">{{ activePageTitle }}</h1>
+
+  <ul class="breadcrumb al-breadcrumb">
+    <li>
+      <a href="#/dashboard">Home</a></li>
+    <li>{{ activePageTitle }}</li>
+  </ul>
+</div>
diff --git a/src/app/theme/contentTop/contentTop.scss b/src/app/theme/contentTop/contentTop.scss
new file mode 100644
index 00000000..dfa6a48a
--- /dev/null
+++ b/src/app/theme/contentTop/contentTop.scss
@@ -0,0 +1,40 @@
+@import '../sass/conf/conf';
+
+.content-top {
+  padding-top: 13px;
+  padding-bottom: 27px;
+}
+
+h1.al-title {
+  font-weight: $font-bold;
+  color: #ffffff;
+  float: left;
+  width: auto;
+  margin: 0;
+  padding: 0;
+  font-size: 24px;
+  text-transform: uppercase;
+  opacity: 0.9;
+}
+
+.al-breadcrumb {
+  background: none;
+  color: #ffffff;
+  padding: 0;
+  margin: 0;
+  float: right;
+  padding-top: 11px;
+  li {
+    font-size: 18px;
+    font-weight: $font-light;
+  }
+}
+
+.al-look {
+  float: right;
+  margin-right: 10px;
+  padding-top: 10px;
+  > a {
+    font-size: 19px;
+  }
+}
diff --git a/src/app/theme/contentTop/index.ts b/src/app/theme/contentTop/index.ts
new file mode 100644
index 00000000..e8d5a5b3
--- /dev/null
+++ b/src/app/theme/contentTop/index.ts
@@ -0,0 +1 @@
+export * from './contentTop.component';
diff --git a/src/app/theme/index.ts b/src/app/theme/index.ts
index 91a4fc9a..e33b427f 100644
--- a/src/app/theme/index.ts
+++ b/src/app/theme/index.ts
@@ -1,3 +1,4 @@
 export * from './pageTop';
 export * from './msgCenter';
 export * from './sidebar';
+export * from './contentTop';