diff --git a/src/app/theme/components/baMsgCenter/baMsgCenter.component.ts b/src/app/theme/components/baMsgCenter/baMsgCenter.component.ts
new file mode 100644
index 00000000..9baa9a6d
--- /dev/null
+++ b/src/app/theme/components/baMsgCenter/baMsgCenter.component.ts
@@ -0,0 +1,23 @@
+import {Component} from '@angular/core';
+
+import {BaMsgCenterService} from './baMsgCenter.service';
+import {BaProfilePicturePipe} from '../../pipes';
+
+@Component({
+  selector: 'msg-center',
+  providers: [BaMsgCenterService],
+  styles: [require('./baMsgCenter.scss')],
+  template: require('./baMsgCenter.html'),
+  pipes: [BaProfilePicturePipe]
+})
+export class BaMsgCenter {
+
+  public notifications:Array<Object>;
+  public messages:Array<Object>;
+
+  constructor(private _baMsgCenterService:BaMsgCenterService) {
+    this.notifications = this._baMsgCenterService.getNotifications();
+    this.messages = this._baMsgCenterService.getMessages();
+  }
+
+}
diff --git a/src/app/theme/components/msgCenter/msgCenter.html b/src/app/theme/components/baMsgCenter/baMsgCenter.html
similarity index 100%
rename from src/app/theme/components/msgCenter/msgCenter.html
rename to src/app/theme/components/baMsgCenter/baMsgCenter.html
diff --git a/src/app/theme/components/msgCenter/msgCenter.scss b/src/app/theme/components/baMsgCenter/baMsgCenter.scss
similarity index 100%
rename from src/app/theme/components/msgCenter/msgCenter.scss
rename to src/app/theme/components/baMsgCenter/baMsgCenter.scss
diff --git a/src/app/theme/components/msgCenter/msgCenter.component.ts b/src/app/theme/components/baMsgCenter/baMsgCenter.service.ts
similarity index 85%
rename from src/app/theme/components/msgCenter/msgCenter.component.ts
rename to src/app/theme/components/baMsgCenter/baMsgCenter.service.ts
index b71a0283..25ec9d8b 100644
--- a/src/app/theme/components/msgCenter/msgCenter.component.ts
+++ b/src/app/theme/components/baMsgCenter/baMsgCenter.service.ts
@@ -1,16 +1,9 @@
-import {Component} from '@angular/core';
+import {Injectable} from '@angular/core'
 
-import {BaProfilePicturePipe} from '../../pipes';
+@Injectable()
+export class BaMsgCenterService {
 
-@Component({
-  selector: 'msg-center',
-  styles: [require('./msgCenter.scss')],
-  template: require('./msgCenter.html'),
-  pipes: [BaProfilePicturePipe]
-})
-export class MsgCenter {
-
-  notifications = [
+  private _notifications = [
     {
       name: 'Vlad',
       text: 'Vlad posted a new article.',
@@ -48,7 +41,7 @@ export class MsgCenter {
     }
   ];
 
-  messages = [
+  private _messages = [
     {
       name: 'Nasta',
       text: 'After you get up and running, you can place Font Awesome icons just about...',
@@ -85,4 +78,12 @@ export class MsgCenter {
       time: '1 week ago'
     }
   ];
+
+  public getMessages():Array<Object> {
+    return this._messages;
+  }
+
+  public getNotifications():Array<Object> {
+    return this._notifications;
+  }
 }
diff --git a/src/app/theme/components/baMsgCenter/index.ts b/src/app/theme/components/baMsgCenter/index.ts
new file mode 100644
index 00000000..f4bbf0ec
--- /dev/null
+++ b/src/app/theme/components/baMsgCenter/index.ts
@@ -0,0 +1 @@
+export * from './baMsgCenter.component.ts';
diff --git a/src/app/theme/components/index.ts b/src/app/theme/components/index.ts
index 692b5c53..e61d8d1d 100644
--- a/src/app/theme/components/index.ts
+++ b/src/app/theme/components/index.ts
@@ -1,5 +1,5 @@
 export * from './pageTop';
-export * from './msgCenter';
+export * from './baMsgCenter';
 export * from './sidebar';
 export * from './baContentTop';
 export * from './baCard';
diff --git a/src/app/theme/components/msgCenter/index.ts b/src/app/theme/components/msgCenter/index.ts
deleted file mode 100644
index d61dc6e7..00000000
--- a/src/app/theme/components/msgCenter/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './msgCenter.component.ts';
diff --git a/src/app/theme/components/pageTop/pageTop.component.ts b/src/app/theme/components/pageTop/pageTop.component.ts
index 556ab852..f7295d41 100644
--- a/src/app/theme/components/pageTop/pageTop.component.ts
+++ b/src/app/theme/components/pageTop/pageTop.component.ts
@@ -2,14 +2,14 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 import {AppState} from '../../../app.state';
 import {BaProfilePicturePipe} from '../../pipes';
-import {MsgCenter} from '../../components/msgCenter';
+import {BaMsgCenter} from '../../components/baMsgCenter';
 import {BaScrollPosition} from '../../directives';
 
 @Component({
   selector: 'page-top',
   styles: [require('./pageTop.scss')],
   template: require('./pageTop.html'),
-  directives: [MsgCenter, BaScrollPosition],
+  directives: [BaMsgCenter, BaScrollPosition],
   pipes: [BaProfilePicturePipe],
   encapsulation: ViewEncapsulation.None
 })
diff --git a/src/app/theme/components/pageTop/pageTop.scss b/src/app/theme/components/pageTop/pageTop.scss
index 96d17aec..eb7de814 100644
--- a/src/app/theme/components/pageTop/pageTop.scss
+++ b/src/app/theme/components/pageTop/pageTop.scss
@@ -1,5 +1,5 @@
 @import '../../sass/conf/conf';
-@import '../../components/msgCenter/msgCenter';
+@import '../../components/baMsgCenter/baMsgCenter';
 
 .page-top {
   background-color: $sidebar;