diff --git a/src/app/core/components/theme-options/theme-options.component.ts b/src/app/core/components/theme-options/theme-options.component.ts
index 15c6fbc7..b84260ef 100644
--- a/src/app/core/components/theme-options/theme-options.component.ts
+++ b/src/app/core/components/theme-options/theme-options.component.ts
@@ -3,6 +3,7 @@ import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/anim
 import { Subscription } from 'rxjs/Subscription';
 import { FuseConfigService } from '../../services/config.service';
 import { fuseAnimations } from '../../animations';
+import { FuseNavigationService } from '../navigation/navigation.service';
 
 @Component({
     selector   : 'fuse-theme-options',
@@ -26,6 +27,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
     constructor(
         private animationBuilder: AnimationBuilder,
         private fuseConfig: FuseConfigService,
+        private navigationService: FuseNavigationService,
         private renderer: Renderer2
     )
     {
@@ -38,6 +40,27 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                         this.fuseSettings = newSettings;
                     }
                 );
+
+        // Get the nav model and add customize nav item
+        // that opens the bar programmatically
+        const navModel = this.navigationService.getNavigationModel();
+
+        navModel.push({
+            'id'      : 'custom-function',
+            'title'   : 'Custom Function',
+            'type'    : 'group',
+            'children': [
+                {
+                    'id'      : 'customize',
+                    'title'   : 'Customize',
+                    'type'    : 'item',
+                    'icon'    : 'settings',
+                    'function': () => {
+                        this.openBar();
+                    }
+                }
+            ]
+        });
     }
 
     ngOnInit()
diff --git a/src/app/main/content/components/navigation/navigation.component.html b/src/app/main/content/components/navigation/navigation.component.html
index 1b4f66df..cbb42e13 100644
--- a/src/app/main/content/components/navigation/navigation.component.html
+++ b/src/app/main/content/components/navigation/navigation.component.html
@@ -48,15 +48,15 @@
                 <fuse-hljs lang="json" class="source-code">
                     <textarea #source hidden="hidden">
                         {
-                        'title': 'COMPONENTS',
-                        'type' : 'group',
-                        'children': [
-                        {
-                        'title': 'ngx-datatable',
-                        'type' : 'item',
-                        'url' : '/components/datatables/ngx-datatable'
-                        }
-                        ]
+                            'title': 'COMPONENTS',
+                            'type' : 'group',
+                            'children': [
+                                {
+                                    'title': 'ngx-datatable',
+                                    'type' : 'item',
+                                    'url' : '/components/datatables/ngx-datatable'
+                                }
+                            ]
                         },
                     </textarea>
                 </fuse-hljs>
@@ -69,16 +69,16 @@
                 <fuse-hljs lang="json" class="source-code">
                     <textarea #source hidden="hidden">
                         {
-                        'title' : 'Datatables',
-                        'type' : 'collapse',
-                        'icon' : 'border_all',
-                        'children': [
-                        {
-                        'title': 'ngx-datatable',
-                        'type' : 'nav-item',
-                        'url' : '/components/datatables/ngx-datatable'
-                        }
-                        ]
+                            'title' : 'Datatables',
+                            'type' : 'collapse',
+                            'icon' : 'border_all',
+                            'children': [
+                                {
+                                    'title': 'ngx-datatable',
+                                    'type' : 'nav-item',
+                                    'url' : '/components/datatables/ngx-datatable'
+                                }
+                            ]
                         },
                     </textarea>
                 </fuse-hljs>
@@ -91,10 +91,10 @@
                 <fuse-hljs lang="json" class="source-code">
                     <textarea #source hidden="hidden">
                         {
-                        'title': 'Countdown',
-                        'type' : 'item',
-                        'icon' : 'settings_input_component',
-                        'url' : '/components/countdown'
+                            'title': 'Countdown',
+                            'type' : 'item',
+                            'icon' : 'settings_input_component',
+                            'url' : '/components/countdown'
                         },
                     </textarea>
                 </fuse-hljs>
diff --git a/src/app/main/content/ui/colors/colors.component.html b/src/app/main/content/ui/colors/colors.component.html
index 98cdeb81..ba0d558c 100644
--- a/src/app/main/content/ui/colors/colors.component.html
+++ b/src/app/main/content/ui/colors/colors.component.html
@@ -39,12 +39,6 @@
                 </ng-template>
             </mat-tab>
 
-            <mat-tab *ngFor="let color of ['white', 'black']" label="{{color}}">
-                <ng-template mat-tab-label>
-                    <span class="text-capitalize">{{color}}</span>
-                </ng-template>
-            </mat-tab>
-
         </mat-tab-group>
 
         <div class="color-tabs-content p-24" fxLayout="column">