diff --git a/package.json b/package.json
index ebfe1c25..661a44bc 100644
--- a/package.json
+++ b/package.json
@@ -1,69 +1,70 @@
 {
-  "name": "fuse2",
-  "version": "1.0.2",
-  "license": "",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e"
-  },
-  "private": true,
-  "dependencies": {
-    "@angular/animations": "4.3.6",
-    "@angular/cdk": "2.0.0-beta.10",
-    "@angular/common": "4.3.6",
-    "@angular/compiler": "4.3.6",
-    "@angular/core": "4.3.6",
-    "@angular/flex-layout": "2.0.0-beta.9",
-    "@angular/forms": "4.3.6",
-    "@angular/http": "4.3.6",
-    "@angular/material": "2.0.0-beta.10",
-    "@angular/platform-browser": "4.3.6",
-    "@angular/platform-browser-dynamic": "4.3.6",
-    "@angular/router": "4.3.6",
-    "@swimlane/ngx-charts": "6.0.2",
-    "@swimlane/ngx-datatable": "9.3.1",
-    "@swimlane/ngx-dnd": "3.0.0",
-    "angular-calendar": "0.19.0",
-    "angular-in-memory-web-api": "0.3.2",
-    "classlist.js": "1.1.20150312",
-    "core-js": "2.5.0",
-    "d3": "4.10.0",
-    "hammerjs": "2.0.8",
-    "highlight.js": "9.12.0",
-    "intl": "1.2.5",
-    "moment": "2.18.1",
-    "ngx-color-picker": "4.3.1",
-    "ngx-cookie-service": "1.0.7",
-    "ngx-perfect-scrollbar": "4.5.6",
-    "rxjs": "5.4.3",
-    "web-animations-js": "2.3.1",
-    "zone.js": "0.8.17"
-  },
-  "devDependencies": {
-    "@angular/cli": "^1.3.2",
-    "@angular/compiler-cli": "4.3.6",
-    "@angular/language-service": "4.3.6",
-    "@ngtools/webpack": "^1.6.2",
-    "@types/jasmine": "^2.5.54",
-    "@types/jasminewd2": "^2.0.2",
-    "@types/node": "^6.0.88",
-    "codelyzer": "~3.0.1",
-    "jasmine-core": "~2.6.2",
-    "jasmine-spec-reporter": "~4.1.0",
-    "karma": "~1.7.0",
-    "karma-chrome-launcher": "~2.1.1",
-    "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^1.2.1",
-    "karma-jasmine": "~1.1.0",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "node-sass": "^4.5.3",
-    "protractor": "~5.1.2",
-    "ts-node": "~3.0.4",
-    "tslint": "~5.3.2",
-    "typescript": "~2.3.3"
-  }
+    "name": "fuse2",
+    "version": "1.0.2",
+    "license": "",
+    "scripts": {
+        "ng": "ng",
+        "start": "ng serve",
+        "build": "ng build",
+        "test": "ng test",
+        "lint": "ng lint",
+        "e2e": "ng e2e"
+    },
+    "private": true,
+    "dependencies": {
+        "@angular/animations": "4.3.6",
+        "@angular/cdk": "2.0.0-beta.10",
+        "@angular/common": "4.3.6",
+        "@angular/compiler": "4.3.6",
+        "@angular/core": "4.3.6",
+        "@angular/flex-layout": "2.0.0-beta.9",
+        "@angular/forms": "4.3.6",
+        "@angular/http": "4.3.6",
+        "@angular/material": "2.0.0-beta.10",
+        "@angular/platform-browser": "4.3.6",
+        "@angular/platform-browser-dynamic": "4.3.6",
+        "@angular/router": "4.3.6",
+        "@swimlane/ngx-charts": "6.0.2",
+        "@swimlane/ngx-datatable": "9.3.1",
+        "@swimlane/ngx-dnd": "3.0.0",
+        "angular-calendar": "0.19.0",
+        "angular-in-memory-web-api": "0.3.2",
+        "classlist.js": "1.1.20150312",
+        "core-js": "2.5.0",
+        "d3": "4.10.0",
+        "hammerjs": "2.0.8",
+        "highlight.js": "9.12.0",
+        "intl": "1.2.5",
+        "md2": "0.0.28",
+        "moment": "2.18.1",
+        "ngx-color-picker": "4.3.1",
+        "ngx-cookie-service": "1.0.7",
+        "ngx-perfect-scrollbar": "4.5.6",
+        "rxjs": "5.4.3",
+        "web-animations-js": "2.3.1",
+        "zone.js": "0.8.17"
+    },
+    "devDependencies": {
+        "@angular/cli": "^1.3.2",
+        "@angular/compiler-cli": "4.3.6",
+        "@angular/language-service": "4.3.6",
+        "@ngtools/webpack": "^1.6.2",
+        "@types/jasmine": "^2.5.54",
+        "@types/jasminewd2": "^2.0.2",
+        "@types/node": "^6.0.88",
+        "codelyzer": "~3.0.1",
+        "jasmine-core": "~2.6.2",
+        "jasmine-spec-reporter": "~4.1.0",
+        "karma": "~1.7.0",
+        "karma-chrome-launcher": "~2.1.1",
+        "karma-cli": "~1.0.1",
+        "karma-coverage-istanbul-reporter": "^1.2.1",
+        "karma-jasmine": "~1.1.0",
+        "karma-jasmine-html-reporter": "^0.2.2",
+        "node-sass": "^4.5.3",
+        "protractor": "~5.1.2",
+        "ts-node": "~3.0.4",
+        "tslint": "~5.3.2",
+        "typescript": "~2.3.3"
+    }
 }
diff --git a/src/app/main/content/apps/scrumboard/board/add-list/add-list.component.ts b/src/app/main/content/apps/scrumboard/board/add-list/add-list.component.ts
index f0265579..0d7f6713 100644
--- a/src/app/main/content/apps/scrumboard/board/add-list/add-list.component.ts
+++ b/src/app/main/content/apps/scrumboard/board/add-list/add-list.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewChildren } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output, ViewChild} from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({
@@ -11,7 +11,7 @@ export class FuseScrumboardBoardAddListComponent implements OnInit
     formActive = false;
     form: FormGroup;
     @Output() onlistAdd = new EventEmitter();
-    @ViewChildren('nameInput') nameInputField;
+    @ViewChild('nameInput') nameInputField;
 
     constructor(
         private formBuilder: FormBuilder
@@ -41,7 +41,7 @@ export class FuseScrumboardBoardAddListComponent implements OnInit
     focusNameField()
     {
         setTimeout(() => {
-            this.nameInputField.first.nativeElement.focus();
+            this.nameInputField.nativeElement.focus();
         });
     }
 
diff --git a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html
index 857cb539..ed1dc068 100644
--- a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html
+++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html
@@ -74,8 +74,8 @@
                     <form class="px-16 py-8" #newChecklistForm="ngForm" (submit)="addChecklist(newChecklistForm)" (click)="$event.stopPropagation()"
                           fxLayout="column" fxLayoutAlign="start end">
 
-                        <md-input-container floatPlaceholder="never" (click)="$event.stopPropagation()" fxFlex #newCheckListTitleField>
-                            <input mdInput ngModel #checklistTitle="ngModel" name="checklistTitle" placeholder="Checklist title" required>
+                        <md-input-container floatPlaceholder="never" (click)="$event.stopPropagation()" fxFlex >
+                            <input #newCheckListTitleField mdInput ngModel #checklistTitle="ngModel" name="checklistTitle" placeholder="Checklist title" required>
                         </md-input-container>
 
                         <button md-raised-button class="mat-accent" aria-label="Add Checklist" [disabled]="!newChecklistForm.valid">Add Checklist</button>
diff --git a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.ts b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.ts
index 73d8b3eb..050e6403 100644
--- a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.ts
+++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.ts
@@ -213,7 +213,7 @@ export class FuseScrumboardCardDialogComponent implements OnInit, OnDestroy
     onChecklistMenuOpen()
     {
         setTimeout(() => {
-            this.newCheckListTitleField._mdInputChild.focus();
+            this.newCheckListTitleField.nativeElement.focus();
         });
     }
 
diff --git a/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts b/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts
index ddcbf583..d35face2 100644
--- a/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts
+++ b/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewChildren } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({
@@ -12,7 +12,7 @@ export class FuseScrumboardEditBoardNameComponent implements OnInit
     form: FormGroup;
     @Input() board;
     @Output() onNameChanged = new EventEmitter();
-    @ViewChildren('nameInput') nameInputField;
+    @ViewChild('nameInput') nameInputField;
 
     constructor(
         private formBuilder: FormBuilder
@@ -42,7 +42,7 @@ export class FuseScrumboardEditBoardNameComponent implements OnInit
     focusNameField()
     {
         setTimeout(() => {
-            this.nameInputField.first.nativeElement.focus();
+            this.nameInputField.nativeElement.focus();
         });
     }
 
diff --git a/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.html b/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.html
index 74a65988..82c4bdbd 100644
--- a/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.html
+++ b/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.html
@@ -11,8 +11,8 @@
 
     <form [formGroup]="form" (submit)="onFormSubmit()" class="add-card-form" fxLayout="column">
 
-        <md-input-container fxFlex floatPlaceholder="never" #nameInput>
-            <input mdInput formControlName="name" placeholder="Card title" autocomplete="off" required>
+        <md-input-container fxFlex floatPlaceholder="never" >
+            <input #nameInput mdInput formControlName="name" placeholder="Card title" autocomplete="off" required>
         </md-input-container>
 
         <div class="pl-8" fxLayout="row" fxLayoutAlign="space-between center">
diff --git a/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.ts b/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.ts
index 977f1fd3..053b80bc 100644
--- a/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.ts
+++ b/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.ts
@@ -1,4 +1,4 @@
-import { Component, ContentChildren, EventEmitter, Input, OnInit, Output, ViewChildren } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({
@@ -11,7 +11,7 @@ export class FuseScrumboardBoardAddCardComponent implements OnInit
     formActive = false;
     form: FormGroup;
     @Output() onCardAdd = new EventEmitter();
-    @ViewChildren('nameInput') nameInputField;
+    @ViewChild('nameInput') nameInputField;
 
     constructor(
         private formBuilder: FormBuilder
@@ -40,7 +40,7 @@ export class FuseScrumboardBoardAddCardComponent implements OnInit
     focusNameField()
     {
         setTimeout(() => {
-            this.nameInputField.first._mdInputChild.focus();
+            this.nameInputField.nativeElement.focus();
         });
     }
 
diff --git a/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts b/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts
index bb2cc7b2..f480c7cd 100644
--- a/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts
+++ b/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewChildren } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({
@@ -12,7 +12,7 @@ export class FuseScrumboardBoardEditListNameComponent implements OnInit
     form: FormGroup;
     @Input() list;
     @Output() onNameChanged = new EventEmitter();
-    @ViewChildren('nameInput') nameInputField;
+    @ViewChild('nameInput') nameInputField;
 
     constructor(
         private formBuilder: FormBuilder
@@ -42,7 +42,7 @@ export class FuseScrumboardBoardEditListNameComponent implements OnInit
     focusNameField()
     {
         setTimeout(() => {
-            this.nameInputField.first.nativeElement.focus();
+            this.nameInputField.nativeElement.focus();
         });
     }
 
diff --git a/src/app/main/content/apps/scrumboard/board/list/list.component.html b/src/app/main/content/apps/scrumboard/board/list/list.component.html
index ae544bd8..910a01cc 100644
--- a/src/app/main/content/apps/scrumboard/board/list/list.component.html
+++ b/src/app/main/content/apps/scrumboard/board/list/list.component.html
@@ -40,7 +40,6 @@
     <div class="list-footer">
         <fuse-scrumboard-board-add-card (onCardAdd)="onCardAdd($event)">
         </fuse-scrumboard-board-add-card>
-        <!--<ms-sb-add-card ms-list-id="list.id"></ms-sb-add-card>-->
     </div>
     <!-- / NEW CARD BUTTON-->
 
diff --git a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.html b/src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.html
index 07c277d7..678dbf0d 100644
--- a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.html
+++ b/src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.html
@@ -1,3 +1,15 @@
-<p>
-  board-color-selector works!
-</p>
+<md-list class="colors">
+    <!-- COLORS -->
+    <md-list-item class="color m-8 mat-elevation-z1"
+                  [ngClass]="'md-'+color.key+'-bg'"
+                  *ngFor="let color of (colors | keys)"
+                  (click)="setColor(color.key)"
+                  md-ripple>
+        <p fxFlex>{{color.key}}</p>
+        <md-icon class="s-16" *ngIf="color.key === board.settings.color">check</md-icon>
+        <button md-icon-button *ngIf="color.key === board.settings.color"  (click)="$event.stopPropagation();setColor('')">
+            <md-icon class="s-16">delete</md-icon>
+        </button>
+    </md-list-item>
+    <!-- / COLORS -->
+</md-list>
diff --git a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.scss b/src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.scss
index e69de29b..d6b3d042 100644
--- a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.scss
+++ b/src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.scss
@@ -0,0 +1,10 @@
+:host {
+
+    .colors {
+
+        .color {
+            position: relative;
+            cursor: pointer;
+        }
+    }
+}
diff --git a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.ts b/src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.ts
index bf9ff816..c4a4195d 100644
--- a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.ts
+++ b/src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.ts
@@ -1,15 +1,43 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { MatColors } from '../../../../../../../../core/matColors';
+import { ScrumboardService } from '../../../../scrumboard.service';
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
-  selector: 'app-board-color-selector',
-  templateUrl: './board-color-selector.component.html',
-  styleUrls: ['./board-color-selector.component.scss']
+    selector   : 'fuse-scrumboard-board-color-selector',
+    templateUrl: './board-color-selector.component.html',
+    styleUrls  : ['./board-color-selector.component.scss']
 })
-export class BoardColorSelectorComponent implements OnInit {
+export class FuseScrumboardBoardColorSelectorComponent implements OnInit, OnDestroy
+{
+    colors: any;
+    board: any;
+    onBoardChanged: Subscription;
 
-  constructor() { }
+    constructor(
+        private scrumboardService: ScrumboardService
+    )
+    {
+        this.colors = MatColors.all;
+    }
 
-  ngOnInit() {
-  }
+    ngOnInit()
+    {
+        this.onBoardChanged =
+            this.scrumboardService.onBoardChanged
+                .subscribe(board => {
+                    this.board = board;
+                });
+    }
 
+    setColor(color)
+    {
+        this.board.settings.color = color;
+        this.scrumboardService.updateBoard();
+    }
+
+    ngOnDestroy()
+    {
+        this.onBoardChanged.unsubscribe();
+    }
 }
diff --git a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.html b/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.html
index 47485e4b..df4304e2 100644
--- a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.html
+++ b/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.html
@@ -1,52 +1,76 @@
-<!-- SIDENAV HEADER -->
-<div class="header p-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="column" fxLayoutAlign="center center">
-    <div>Settings</div>
-</div>
-<!-- / SIDENAV HEADER -->
+<div [ngSwitch]="view" class="views" (click)="$event.stopPropagation()">
 
-<!-- SIDENAV CONTENT -->
-<div class="content py-16" perfect-scrollbar>
+    <div class="view" *ngSwitchCase="'main'" [@slideInLeft]>
 
-    <div class="nav">
+        <!-- SIDENAV HEADER -->
+        <div class="header md-accent-bg p-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="column" fxLayoutAlign="center center">
+            <div>Settings</div>
+        </div>
+        <!-- / SIDENAV HEADER -->
 
-        <div class="nav-item">
-            <div class="nav-link" md-ripple>
-                <md-icon class="nav-link-icon">format_color_fill</md-icon>
-                <p class="title">Board Color</p>
+        <!-- SIDENAV CONTENT -->
+        <div class="content py-16" perfect-scrollbar>
+
+            <div class="nav">
+                <div class="nav-item">
+                    <div class="nav-link" md-ripple (click)="view = 'board-color'">
+                        <md-icon class="nav-link-icon">format_color_fill</md-icon>
+                        <p class="title">Board Color</p>
+                    </div>
+                </div>
+
+                <div class="nav-item">
+                    <div class="nav-link" md-ripple (click)="toggleCardCover()">
+                        <md-icon class="nav-link-icon">photo</md-icon>
+                        <p fxFlex class="title">Card Cover Images</p>
+                        <md-icon *ngIf="board.settings.cardCoverImages" class="s-18">check</md-icon>
+                    </div>
+                </div>
+
+                <div class="nav-item">
+                    <div class="nav-link" md-ripple (click)="toggleSubcription()">
+                        <md-icon class="nav-link-icon">remove_red_eye</md-icon>
+                        <p fxFlex class="title">Subscribe</p>
+                        <md-icon *ngIf="board.settings.subscribed" class="s-18">check</md-icon>
+                    </div>
+                </div>
+
+                <div class="nav-item">
+                    <div class="nav-link" md-ripple>
+                        <md-icon class="nav-link-icon">content_copy</md-icon>
+                        <p class="title">Copy Board</p>
+                    </div>
+                </div>
+
+                <div class="nav-item">
+                    <div class="nav-link" md-ripple>
+                        <md-icon class="nav-link-icon">delete</md-icon>
+                        <p class="title">Delete Board</p>
+                    </div>
+                </div>
+
+                <md-divider></md-divider>
             </div>
         </div>
+        <!-- / SIDENAV CONTENT -->
+    </div>
 
-        <div class="nav-item">
-            <div class="nav-link" md-ripple (click)="toggleCardCover()">
-                <md-icon class="nav-link-icon">photo</md-icon>
-                <p fxFlex class="title">Card Cover Images</p>
-                <md-icon *ngIf="board.settings.cardCoverImages" class="s-18">check</md-icon>
-            </div>
+    <div class="view" *ngSwitchCase="'board-color'" [@slideInRight]>
+
+        <!-- SIDENAV HEADER -->
+        <div class="header md-accent-bg p-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="row" fxLayoutAlign="space-between center">
+            <div>Background Color</div>
+            <button md-icon-button (click)="view ='main'">
+                <md-icon class="s-16">arrow_back</md-icon>
+            </button>
         </div>
+        <!-- / SIDENAV HEADER -->
 
-        <div class="nav-item">
-            <div class="nav-link" md-ripple (click)="toggleSubcription()">
-                <md-icon class="nav-link-icon">remove_red_eye</md-icon>
-                <p fxFlex class="title">Subscribe</p>
-                <md-icon *ngIf="board.settings.subscribed" class="s-18">check</md-icon>
-            </div>
+        <!-- SIDENAV CONTENT -->
+        <div class="content p-8" perfect-scrollbar>
+            <fuse-scrumboard-board-color-selector></fuse-scrumboard-board-color-selector>
         </div>
+        <!-- / SIDENAV CONTENT -->
 
-        <div class="nav-item">
-            <div class="nav-link" md-ripple>
-                <md-icon class="nav-link-icon">content_copy</md-icon>
-                <p class="title">Copy Board</p>
-            </div>
-        </div>
-
-        <div class="nav-item">
-            <div class="nav-link" md-ripple>
-                <md-icon class="nav-link-icon">delete</md-icon>
-                <p class="title">Delete Board</p>
-            </div>
-        </div>
-
-        <md-divider></md-divider>
     </div>
 </div>
-<!-- / SIDENAV CONTENT -->
diff --git a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.scss b/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.scss
index 678b3c81..f9e5a8ea 100644
--- a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.scss
+++ b/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.scss
@@ -4,8 +4,33 @@
     flex: 1 0 auto;
     height: 100%;
 
-    > .header {
-        flex: 0 1 auto;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    .views {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        overflow: hidden;
+        height: 100%;
+
+        .view {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            top: 0;
+            display: flex;
+            flex-direction: column;
+
+            > .header {
+                flex: 0 1 auto;
+                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+            }
+
+            > .content {
+                flex: 1 1 auto;
+                overflow-y: auto;
+            }
+        }
     }
 }
diff --git a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.ts b/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.ts
index 0e539149..b23eb83c 100644
--- a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.ts
+++ b/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.ts
@@ -1,15 +1,18 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
 import { ScrumboardService } from '../../../scrumboard.service';
+import { Animations } from '../../../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-scrumboard-board-settings',
     templateUrl: './settings.component.html',
-    styleUrls  : ['./settings.component.scss']
+    styleUrls  : ['./settings.component.scss'],
+    animations : [Animations.slideInLeft, Animations.slideInRight]
 })
-export class FuseScrumboardBoardSettingsSidenavComponent implements OnInit
+export class FuseScrumboardBoardSettingsSidenavComponent implements OnInit, OnDestroy
 {
     board: any;
+    view = 'main';
     onBoardChanged: Subscription;
 
     constructor(
@@ -31,19 +34,17 @@ export class FuseScrumboardBoardSettingsSidenavComponent implements OnInit
     toggleCardCover()
     {
         this.board.settings.cardCoverImages = !this.board.settings.cardCoverImages;
-        this.updateBoard();
+        this.scrumboardService.updateBoard();
     }
 
     toggleSubcription()
     {
         this.board.settings.subscribed = !this.board.settings.subscribed;
-        this.updateBoard();
-    }
-
-    updateBoard()
-    {
-        this.scrumboardService.onBoardChanged.next(this.board);
         this.scrumboardService.updateBoard();
     }
 
+    ngOnDestroy()
+    {
+        this.onBoardChanged.unsubscribe();
+    }
 }
diff --git a/src/app/main/content/apps/scrumboard/scrumboard.module.ts b/src/app/main/content/apps/scrumboard/scrumboard.module.ts
index 1ea08217..8601f55e 100644
--- a/src/app/main/content/apps/scrumboard/scrumboard.module.ts
+++ b/src/app/main/content/apps/scrumboard/scrumboard.module.ts
@@ -13,6 +13,7 @@ import { FuseScrumboardCardDialogComponent } from './board/dialogs/card/card.com
 import { FuseScrumboardLabelSelectorComponent } from './board/dialogs/card/label-selector/label-selector.component';
 import { FuseScrumboardEditBoardNameComponent } from './board/edit-board-name/edit-board-name.component';
 import { FuseScrumboardBoardSettingsSidenavComponent } from './board/sidenavs/settings/settings.component';
+import { FuseScrumboardBoardColorSelectorComponent } from './board/sidenavs/settings/board-color-selector/board-color-selector.component';
 
 const routes: Routes = [
     {
@@ -47,7 +48,8 @@ const routes: Routes = [
         FuseScrumboardCardDialogComponent,
         FuseScrumboardLabelSelectorComponent,
         FuseScrumboardEditBoardNameComponent,
-        FuseScrumboardBoardSettingsSidenavComponent
+        FuseScrumboardBoardSettingsSidenavComponent,
+        FuseScrumboardBoardColorSelectorComponent
     ],
     imports        : [
         SharedModule,
diff --git a/src/app/main/content/apps/todo/todo-details/todo-details.component.ts b/src/app/main/content/apps/todo/todo-details/todo-details.component.ts
index 9d9666b8..dc736847 100644
--- a/src/app/main/content/apps/todo/todo-details/todo-details.component.ts
+++ b/src/app/main/content/apps/todo/todo-details/todo-details.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, ViewChildren } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { TodoService } from '../todo.service';
 import { Todo } from '../todo.model';
 import { Subscription } from 'rxjs/Subscription';
@@ -16,7 +16,7 @@ export class FuseTodoDetailsComponent implements OnInit, OnDestroy
     tags: any[];
     formType: string;
     todoForm: FormGroup;
-    @ViewChildren('titleInput') titleInputField;
+    @ViewChild('titleInput') titleInputField;
 
     onFormChange: any;
     onCurrentTodoChanged: Subscription;
@@ -77,7 +77,7 @@ export class FuseTodoDetailsComponent implements OnInit, OnDestroy
     focusTitleField()
     {
         setTimeout(() => {
-            this.titleInputField.first.nativeElement.focus();
+            this.titleInputField.nativeElement.focus();
         });
     }