diff --git a/src/app/commons/component/layout/menu/app.menu.component.ts b/src/app/commons/component/layout/menu/app.menu.component.ts
index fa7c7a2..01c60a9 100644
--- a/src/app/commons/component/layout/menu/app.menu.component.ts
+++ b/src/app/commons/component/layout/menu/app.menu.component.ts
@@ -39,11 +39,4 @@ export class AppMenuComponent implements OnInit {
         ];
     }
 
-    changeTheme(theme) {
-        const themeLink: HTMLLinkElement = <HTMLLinkElement>document.getElementById('theme-css');
-        const layoutLink: HTMLLinkElement = <HTMLLinkElement>document.getElementById('layout-css');
-
-        themeLink.href = 'assets/theme/theme-' + theme + '.css';
-        layoutLink.href = 'assets/layout/css/layout-' + theme + '.css';
-    }
 }
diff --git a/src/app/commons/component/layout/topbar/app.topbar.component.html b/src/app/commons/component/layout/topbar/app.topbar.component.html
index 4d22119..18cf8a0 100644
--- a/src/app/commons/component/layout/topbar/app.topbar.component.html
+++ b/src/app/commons/component/layout/topbar/app.topbar.component.html
@@ -17,8 +17,7 @@
         </a>
 
         <ul class="topbar-items animated fadeInDown" [ngClass]="{'topbar-items-visible': app.topbarMenuActive}">
-            <li #profile class="profile-item" *ngIf="app.profileMode==='top'||app.isHorizontal()"
-                [ngClass]="{'active-top-menu':app.activeTopbarItem === profile}">
+            <li #profile class="profile-item" *ngIf="app.profileMode==='top'||app.isHorizontal()" [ngClass]="{'active-top-menu':app.activeTopbarItem === profile}">
 
                 <a href="#" (click)="app.onTopbarItemClick($event,profile)">
                     <img class="profile-image" src="assets/layout/images/avatar.png" />
@@ -58,28 +57,71 @@
                     <span class="topbar-item-name">Settings</span>
                 </a>
                 <ul class="ultima-menu animated fadeInDown">
+
                     <li role="menuitem">
-                        <a href="#">
+                        <a href="#" (click)="app.changeTheme('indigo')">
                             <i class="material-icons">palette</i>
-                            <span>Change Theme</span>
+                            <span>indigo</span>
                         </a>
                     </li>
                     <li role="menuitem">
-                        <a href="#">
-                            <i class="material-icons">favorite_border</i>
-                            <span>Favorites</span>
+                        <a href="#" (click)="app.changeTheme('brown')">
+                            <i class="material-icons">palette</i>
+                            <span>brown</span>
                         </a>
                     </li>
                     <li role="menuitem">
-                        <a href="#">
-                            <i class="material-icons">lock</i>
-                            <span>Lock Screen</span>
+                        <a href="#" (click)="app.changeTheme('blue')">
+                            <i class="material-icons">palette</i>
+                            <span>blue</span>
                         </a>
                     </li>
                     <li role="menuitem">
-                        <a href="#">
-                            <i class="material-icons">wallpaper</i>
-                            <span>Wallpaper</span>
+                        <a href="#" (click)="app.changeTheme('blue-grey')">
+                            <i class="material-icons">palette</i>
+                            <span>blue-grey</span>
+                        </a>
+                    </li>
+                    <li role="menuitem">
+                        <a href="#" (click)="app.changeTheme('dark-blue')">
+                            <i class="material-icons">palette</i>
+                            <span>dark-blue</span>
+                        </a>
+                    </li>
+                    <li role="menuitem">
+                        <a href="#" (click)="app.changeTheme('dark-green')">
+                            <i class="material-icons">palette</i>
+                            <span>dark-green</span>
+                        </a>
+                    </li>
+                    <li role="menuitem">
+                        <a href="#" (click)="app.changeTheme('purple-cyan')">
+                            <i class="material-icons">palette</i>
+                            <span>purple-cyan</span>
+                        </a>
+                    </li>
+                    <li role="menuitem">
+                        <a href="#" (click)="app.changeTheme('purple-cyan')">
+                            <i class="material-icons">palette</i>
+                            <span>purple-cyan</span>
+                        </a>
+                    </li>
+                    <li role="menuitem">
+                        <a href="#" (click)="app.changeTheme('teal')">
+                            <i class="material-icons">palette</i>
+                            <span>teal</span>
+                        </a>
+                    </li>
+                    <li role="menuitem">
+                        <a href="#" (click)="app.changeTheme('cyan')">
+                            <i class="material-icons">palette</i>
+                            <span>cyan</span>
+                        </a>
+                    </li>
+                    <li role="menuitem">
+                        <a href="#" (click)="app.changeTheme('grey')">
+                            <i class="material-icons">palette</i>
+                            <span>grey</span>
                         </a>
                     </li>
                 </ul>
@@ -93,31 +135,31 @@
                 <ul class="ultima-menu animated fadeInDown">
                     <li role="menuitem">
                         <a href="#" class="topbar-message">
-                            <img src="assets/layout/images/avatar1.png" width="35"/>
+                            <img src="assets/layout/images/avatar1.png" width="35" />
                             <span>Give me a call</span>
                         </a>
                     </li>
                     <li role="menuitem">
                         <a href="#" class="topbar-message">
-                            <img src="assets/layout/images/avatar2.png" width="35"/>
+                            <img src="assets/layout/images/avatar2.png" width="35" />
                             <span>Sales reports attached</span>
                         </a>
                     </li>
                     <li role="menuitem">
                         <a href="#" class="topbar-message">
-                            <img src="assets/layout/images/avatar3.png" width="35"/>
+                            <img src="assets/layout/images/avatar3.png" width="35" />
                             <span>About your invoice</span>
                         </a>
                     </li>
                     <li role="menuitem">
                         <a href="#" class="topbar-message">
-                            <img src="assets/layout/images/avatar2.png" width="35"/>
+                            <img src="assets/layout/images/avatar2.png" width="35" />
                             <span>Meeting today at 10pm</span>
                         </a>
                     </li>
                     <li role="menuitem">
                         <a href="#" class="topbar-message">
-                            <img src="assets/layout/images/avatar4.png" width="35"/>
+                            <img src="assets/layout/images/avatar4.png" width="35" />
                             <span>Out of office</span>
                         </a>
                     </li>
@@ -156,8 +198,7 @@
                     </li>
                 </ul>
             </li>
-            <li #search class="search-item" [ngClass]="{'active-top-menu':app.activeTopbarItem === search}"
-                (click)="app.onTopbarItemClick($event,search)">
+            <li #search class="search-item" [ngClass]="{'active-top-menu':app.activeTopbarItem === search}" (click)="app.onTopbarItemClick($event,search)">
                 <span class="md-inputfield">
                     <input type="text" pInputText>
                     <label>Search</label>
diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts
index 4d41ed3..95c2f20 100644
--- a/src/app/pages/pages.component.ts
+++ b/src/app/pages/pages.component.ts
@@ -316,4 +316,13 @@ export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
   isAuthRouteActivated() {
     return this.router.url.indexOf('/auth') > -1;
   }
+
+  changeTheme(theme) {
+    const themeLink: HTMLLinkElement = <HTMLLinkElement>document.getElementById('theme-css');
+    const layoutLink: HTMLLinkElement = <HTMLLinkElement>document.getElementById('layout-css');
+
+    themeLink.href = 'assets/theme/theme-' + theme + '.css';
+    layoutLink.href = 'assets/layout/css/layout-' + theme + '.css';
+}
+
 }