diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts
index 9cfc9f38..77a5ee40 100644
--- a/src/app/pages/pages.component.ts
+++ b/src/app/pages/pages.component.ts
@@ -1,7 +1,7 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 import {RouteConfig} from '@angular/router-deprecated';
 
-import {BaPageTop, BaContentTop, Sidebar, BaBackTop} from '../theme/components';
+import {BaPageTop, BaContentTop, BaSidebar, BaBackTop} from '../theme/components';
 
 import {Dashboard} from './dashboard';
 import {Ui} from './ui';
@@ -14,9 +14,9 @@ import {Tables} from './tables';
   selector: 'pages',
   encapsulation: ViewEncapsulation.None,
   styles: [],
-  directives: [BaPageTop, Sidebar, BaContentTop, BaBackTop],
+  directives: [BaPageTop, BaSidebar, BaContentTop, BaBackTop],
   template: `
-    <sidebar></sidebar>
+    <ba-sidebar></ba-sidebar>
     <ba-page-top></ba-page-top>
     <div class="al-main">
       <div class="al-content">
diff --git a/src/app/theme/components/sidebar/sidebar.component.ts b/src/app/theme/components/baSidebar/baSidebar.component.ts
similarity index 71%
rename from src/app/theme/components/sidebar/sidebar.component.ts
rename to src/app/theme/components/baSidebar/baSidebar.component.ts
index 24eda468..b02c6c3f 100644
--- a/src/app/theme/components/sidebar/sidebar.component.ts
+++ b/src/app/theme/components/baSidebar/baSidebar.component.ts
@@ -3,52 +3,50 @@ import {Router} from '@angular/router-deprecated';
 
 import {AppState} from '../../../app.state';
 import {layoutSizes} from '../../../theme';
-import {SidebarService} from './sidebar.service';
+import {BaSidebarService} from './baSidebar.service';
 
 @Component({
-  selector: 'sidebar',
+  selector: 'ba-sidebar',
   encapsulation: ViewEncapsulation.None,
   styles: [require('./sidebar.scss')],
   template: require('./sidebar.html'),
-  providers: [SidebarService],
-  directives: [],
-  pipes: []
+  providers: [BaSidebarService]
 })
-export class Sidebar {
+export class BaSidebar {
 
-  menuItems:Array<any>;
-  menuHeight:number;
-  isMenuCollapsed:boolean;
+  public menuItems:Array<any>;
+  public menuHeight:number;
+  public isMenuCollapsed:boolean;
 
-  showHoverElem:boolean;
-  hoverElemHeight:number;
-  hoverElemTop:number;
+  public showHoverElem:boolean;
+  public hoverElemHeight:number;
+  public hoverElemTop:number;
 
-  outOfArea:number = -200;
+  public outOfArea:number = -200;
 
-  isMenuShouldCollapsed:boolean = false;
+  public isMenuShouldCollapsed:boolean = false;
 
   constructor(private _elementRef:ElementRef,
               private _router:Router,
-              private _sidebarService:SidebarService,
+              private _sidebarService:BaSidebarService,
               private _state:AppState) {
 
     this.menuItems = this._sidebarService.getMenuItems();
     this._router.root.subscribe((path) => this._selectMenuItem(path));
   }
 
-  ngOnInit() {
+  public ngOnInit():void {
     if (this._shouldMenuCollapse()) {
       this.menuCollapse();
     }
   }
 
-  ngAfterViewInit() {
+  public ngAfterViewInit():void {
     this.updateSidebarHeight();
   }
 
   @HostListener('window:resize')
-  onWindowResize() {
+  public onWindowResize():void {
 
     var isMenuShouldCollapsed = this._shouldMenuCollapse();
 
@@ -59,32 +57,32 @@ export class Sidebar {
     this.updateSidebarHeight();
   }
 
-  menuExpand() {
+  public menuExpand():void {
     this.menuCollapseStateChange(false);
   }
 
-  menuCollapse() {
+  public menuCollapse():void {
     this.menuCollapseStateChange(true);
   }
 
-  menuCollapseStateChange(isCollapsed) {
+  public menuCollapseStateChange(isCollapsed):void {
     this.isMenuCollapsed = isCollapsed;
     this._state.notifyDataChanged('menu.isCollapsed', this.isMenuCollapsed);
   }
 
-  hoverItem($event) {
+  public hoverItem($event):void {
     this.showHoverElem = true;
     this.hoverElemHeight = $event.currentTarget.clientHeight;
     // TODO: get rid of magic 66 constant
     this.hoverElemTop = $event.currentTarget.getBoundingClientRect().top - 66;
   }
 
-  updateSidebarHeight() {
+  public updateSidebarHeight():void {
     // TODO: get rid of magic 84 constant
     this.menuHeight = this._elementRef.nativeElement.childNodes[0].clientHeight - 84;
   }
 
-  toggleSubMenu($event, item) {
+  public toggleSubMenu($event, item):boolean {
     var submenu = $($event.currentTarget).next();
 
     if (this.isMenuCollapsed) {
@@ -100,11 +98,11 @@ export class Sidebar {
     return false;
   }
 
-  private _shouldMenuCollapse() {
+  private _shouldMenuCollapse():boolean {
     return window.innerWidth <= layoutSizes.resWidthCollapseSidebar;
   }
 
-  private _selectMenuItem(currentPath = null) {
+  private _selectMenuItem(currentPath = null):void {
 
     let currentMenu = this._sidebarService.setRouter(this._router).selectMenuItem(this.menuItems, currentPath);
     this._state.notifyDataChanged('menu.activeLink', currentMenu);
diff --git a/src/app/theme/components/sidebar/sidebar.html b/src/app/theme/components/baSidebar/baSidebar.html
similarity index 100%
rename from src/app/theme/components/sidebar/sidebar.html
rename to src/app/theme/components/baSidebar/baSidebar.html
diff --git a/src/app/theme/components/sidebar/sidebar.scss b/src/app/theme/components/baSidebar/baSidebar.scss
similarity index 100%
rename from src/app/theme/components/sidebar/sidebar.scss
rename to src/app/theme/components/baSidebar/baSidebar.scss
diff --git a/src/app/theme/components/sidebar/sidebar.service.ts b/src/app/theme/components/baSidebar/baSidebar.service.ts
similarity index 89%
rename from src/app/theme/components/sidebar/sidebar.service.ts
rename to src/app/theme/components/baSidebar/baSidebar.service.ts
index 6761b349..198811d8 100644
--- a/src/app/theme/components/sidebar/sidebar.service.ts
+++ b/src/app/theme/components/baSidebar/baSidebar.service.ts
@@ -2,20 +2,20 @@ import {Injectable} from '@angular/core';
 import {menuItems} from '../../../app.menu';
 
 @Injectable()
-export class SidebarService {
+export class BaSidebarService {
 
   private _router;
 
-  getMenuItems() {
+  public getMenuItems():Array<Object> {
     return menuItems;
   }
 
-  setRouter(router) {
+  public setRouter(router): BaSidebarService {
     this._router = router;
     return this;
   }
 
-  selectMenuItem(items:Array<any>, currentPath:string) {
+  public selectMenuItem(items:Array<any>, currentPath:string) {
     let currentMenu;
 
     let assignCurrent = (menu) => (menu.selected ? currentMenu = menu : null);
diff --git a/src/app/theme/components/sidebar/index.ts b/src/app/theme/components/baSidebar/index.ts
similarity index 100%
rename from src/app/theme/components/sidebar/index.ts
rename to src/app/theme/components/baSidebar/index.ts