diff --git a/src/app/core/components/search-bar/search-bar.component.scss b/src/app/core/components/search-bar/search-bar.component.scss
index aac6fb90..7a737fcc 100644
--- a/src/app/core/components/search-bar/search-bar.component.scss
+++ b/src/app/core/components/search-bar/search-bar.component.scss
@@ -7,7 +7,7 @@
         height: 64px;
         font-size: 13px;
 
-        @include media-breakpoint-down('xs') {
+        @include media-breakpoint-down('sm') {
             height: 56px;
         }
 
@@ -20,7 +20,7 @@
             height: 64px !important;
             line-height: 64px !important;
 
-            @include media-breakpoint-down('xs') {
+            @include media-breakpoint-down('sm') {
                 height: 56px !important;
                 line-height: 56px !important;
             }
@@ -30,7 +30,7 @@
             width: 64px !important;
             height: 64px !important;
             line-height: 64px !important;
-            @include media-breakpoint-down('xs') {
+            @include media-breakpoint-down('sm') {
                 height: 56px !important;
                 line-height: 56px !important;
             }
diff --git a/src/app/main/content/apps/chat/chat-view/chat-view.component.scss b/src/app/main/content/apps/chat/chat-view/chat-view.component.scss
index 9e0e496b..bb255c29 100644
--- a/src/app/main/content/apps/chat/chat-view/chat-view.component.scss
+++ b/src/app/main/content/apps/chat/chat-view/chat-view.component.scss
@@ -3,6 +3,7 @@
     flex: 1 0 auto;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0.8));
     overflow: hidden;
+    max-width: 100%;
 
     .chat {
 
diff --git a/src/app/main/content/apps/chat/chat.component.scss b/src/app/main/content/apps/chat/chat.component.scss
index db816f66..c7b2e19f 100644
--- a/src/app/main/content/apps/chat/chat.component.scss
+++ b/src/app/main/content/apps/chat/chat.component.scss
@@ -9,8 +9,8 @@
         max-width: 1400px;
         margin: 0 auto;
 
-        @include media-breakpoint(xs) {
-            padding: 8px !important;
+        @include media-breakpoint-down(md) {
+            padding: 0 !important;
         }
 
         .content-card {
@@ -33,6 +33,10 @@
                     height: auto;
                 }
 
+                > .mat-drawer-content {
+                    max-width: 100%;
+                }
+
                 md-sidenav {
                     display: flex;
                     flex-direction: column;
diff --git a/src/app/main/content/apps/chat/sidenavs/left/user/user.component.scss b/src/app/main/content/apps/chat/sidenavs/left/user/user.component.scss
index 5b1ce733..d591906b 100644
--- a/src/app/main/content/apps/chat/sidenavs/left/user/user.component.scss
+++ b/src/app/main/content/apps/chat/sidenavs/left/user/user.component.scss
@@ -11,6 +11,10 @@
 
         .toolbar-bottom {
             height: 240px;
+
+            @include media-breakpoint-down(md) {
+                height: 180px;
+            }
         }
 
     }
diff --git a/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.scss b/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.scss
index 5b1ce733..d591906b 100644
--- a/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.scss
+++ b/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.scss
@@ -11,6 +11,10 @@
 
         .toolbar-bottom {
             height: 240px;
+
+            @include media-breakpoint-down(md) {
+                height: 180px;
+            }
         }
 
     }
diff --git a/src/app/main/content/apps/scrumboard/board/board.component.html b/src/app/main/content/apps/scrumboard/board/board.component.html
index 6283d982..de67df7d 100644
--- a/src/app/main/content/apps/scrumboard/board/board.component.html
+++ b/src/app/main/content/apps/scrumboard/board/board.component.html
@@ -3,7 +3,7 @@
     <div id="board">
 
         <!-- HEADER -->
-        <div class="header md-accent-bg p-16 p-sm-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="column">
+        <div class="header md-accent-bg p-16 p-md-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="column">
 
             <div class="header-content" fxLayout="row" fxLayoutAlign="space-between" fxFlex="1 0 auto" fxLayoutWrap>
 
@@ -20,19 +20,16 @@
                 <!-- / BOARD SELECTION BUTTON -->
 
                 <!-- BOARD NAME -->
-                <div class="header-board-name mb-8 mb-sm-0"
+                <div class="header-board-name mb-8 mb-md-0"
                      fxLayout="row" fxLayoutAlign="center center"
                      fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="center center"
                      fxFlex="1 0 100%" fxFlex.gt-xs="1 0 auto"
                      fxFlexOrder="1" fxFlexOrder.gt-xs="2">
-                    <div>
-                        <md-icon *ngIf="board.settings.subscribed" class="board-subscribe s-16">remove_red_eye</md-icon>
-                        <fuse-scrumboard-edit-board-name
-                            fxFlex="1 0 auto"
-                            [board]="board"
-                            (onNameChanged)="onBoardNameChanged($event)">
-                        </fuse-scrumboard-edit-board-name>
-                    </div>
+                    <md-icon *ngIf="board.settings.subscribed" class="board-subscribe s-16">remove_red_eye</md-icon>
+                    <fuse-scrumboard-edit-board-name
+                        [board]="board"
+                        (onNameChanged)="onBoardNameChanged($event)">
+                    </fuse-scrumboard-edit-board-name>
                 </div>
                 <!-- / BOARD NAME -->
 
@@ -53,10 +50,10 @@
         </div>
         <!-- / HEADER -->
 
-        <div fxFlex class="board-content-wrapper p-16 p-sm-24">
+        <div fxFlex class="board-content-wrapper p-16 p-md-24">
 
             <!-- BOARD -->
-            <div class="board-content ngx-dnd-container p-16 p-sm-24" [class]="board.settings.color+'-100-bg'" fxLayout="row"
+            <div class="board-content ngx-dnd-container p-16 p-md-24" [class]="board.settings.color+'-100-bg'" fxLayout="row"
                  ngxDroppable="list" [model]="board.lists" (out)="onDrop($event)">
 
                 <!-- LIST -->
diff --git a/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.html b/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.html
index e07254d1..28ca94a5 100644
--- a/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.html
+++ b/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.html
@@ -6,7 +6,7 @@
 </div>
 
 
-<form [formGroup]="form" (submit)="onFormSubmit()"
+<form [formGroup]="form" (ngSubmit)="onFormSubmit()"
       class="board-name-form" fxFlex="1 0 auto"
       *ngIf="formActive" fxFlex="row">
 
@@ -15,7 +15,7 @@
     <button md-icon-button fxFlex="0 1 auto">
         <md-icon>check</md-icon>
     </button>
-    <button md-icon-button fxFlex="0 1 auto" (click)="closeForm()">
+    <button md-icon-button fxFlex="0 1 auto" (click)="closeForm()" type="button">
         <md-icon>close</md-icon>
     </button>
 </form>
diff --git a/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.scss b/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.scss
index 36f8f043..4b15e90b 100644
--- a/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.scss
+++ b/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.scss
@@ -1,4 +1,6 @@
 :host {
+    display: block !important;
+
     .board-name {
         text-overflow: ellipsis;
         overflow: hidden;
diff --git a/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.html b/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.html
index c8218cad..9f742826 100644
--- a/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.html
+++ b/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.html
@@ -2,7 +2,7 @@
     {{list.name}}
 </div>
 
-<form [formGroup]="form" (submit)="onFormSubmit()"
+<form [formGroup]="form" (ngSubmit)="onFormSubmit()"
       class="list-header-name-form" fxFlex="1 0 auto"
       *ngIf="formActive" fxFlex="row">
 
@@ -11,7 +11,7 @@
     <button md-icon-button fxFlex="0 1 auto">
         <md-icon>check</md-icon>
     </button>
-    <button md-icon-button fxFlex="0 1 auto" (click)="closeForm()">
+    <button md-icon-button fxFlex="0 1 auto" (click)="closeForm()" type="button">
         <md-icon>close</md-icon>
     </button>
 </form>
diff --git a/src/app/main/content/apps/scrumboard/board/list/list.component.scss b/src/app/main/content/apps/scrumboard/board/list/list.component.scss
index 5c19900b..c5e713f4 100644
--- a/src/app/main/content/apps/scrumboard/board/list/list.component.scss
+++ b/src/app/main/content/apps/scrumboard/board/list/list.component.scss
@@ -20,7 +20,7 @@
             padding: 0 8px 0 16px;
             border-bottom: 1px solid rgba(0, 0, 0, 0.12);
 
-            @include media-breakpoint(xs) {
+            @include media-breakpoint-down(sm) {
                 height: 48px;
                 min-height: 48px;
             }
diff --git a/src/app/main/content/apps/scrumboard/scrumboard.component.html b/src/app/main/content/apps/scrumboard/scrumboard.component.html
index f617a2d9..8c5a97a2 100644
--- a/src/app/main/content/apps/scrumboard/scrumboard.component.html
+++ b/src/app/main/content/apps/scrumboard/scrumboard.component.html
@@ -1,36 +1,31 @@
 <!-- BOARDS -->
-<div id="boards" class="md-primary-400-bg" fxLayout="column" fxFlex>
-
-    <!-- BOARD SELECTION -->
-    <div id="board-selector" fxLayout="column" fxLayoutAlign="start center" fxFlex>
+<div id="boards" class="md-primary-400-bg" fxLayout="column" fxLayoutAlign="start center" fxFlex perfect-scrollbar>
 
+    <div class="header pt-44 pt-md-88" fxFlex="0 0 auto">
         <h1>Scrumboard App</h1>
+    </div>
 
-        <!-- BOARD LIST -->
-        <div class="board-list" fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap>
-
-            <!-- BOARD -->
-            <div class="board-list-item" *ngFor="let board of boards"
-                 [routerLink]="'/apps/scrumboard/boards/'+board.id+'/'+board.uri"
-                 fxLayout="column" fxLayoutAlign="center center">
-                <md-icon class="s-64">assessment</md-icon>
-                <div class="board-name">{{board.name}}</div>
-            </div>
-            <!-- / BOARD -->
-
-            <!-- NEW BOARD BUTTON -->
-            <div class="board-list-item add-new-board" fxLayout="column" fxLayoutAlign="center center"
-                 (click)="newBoard()">
-                <md-icon class="s-64">add_circle</md-icon>
-                <div class="board-name">Add new board</div>
-            </div>
-            <!-- / NEW BOARD BUTTON -->
+    <!-- BOARD LIST -->
+    <div class="board-list" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap>
 
+        <!-- BOARD -->
+        <div class="board-list-item" *ngFor="let board of boards"
+             [routerLink]="'/apps/scrumboard/boards/'+board.id+'/'+board.uri"
+             fxLayout="column" fxLayoutAlign="center center">
+            <md-icon class="s-64">assessment</md-icon>
+            <div class="board-name">{{board.name}}</div>
         </div>
-        <!-- / BOARD LIST -->
+        <!-- / BOARD -->
+
+        <!-- NEW BOARD BUTTON -->
+        <div class="board-list-item add-new-board" fxLayout="column" fxLayoutAlign="center center"
+             (click)="newBoard()">
+            <md-icon class="s-64">add_circle</md-icon>
+            <div class="board-name">Add new board</div>
+        </div>
+        <!-- / NEW BOARD BUTTON -->
 
     </div>
-    <!-- / BOARD SELECTION -->
-
+    <!-- / BOARD LIST -->
 </div>
 <!-- / BOARDS -->
diff --git a/src/app/main/content/apps/scrumboard/scrumboard.component.scss b/src/app/main/content/apps/scrumboard/scrumboard.component.scss
index 13eb32d4..23b5efdd 100644
--- a/src/app/main/content/apps/scrumboard/scrumboard.component.scss
+++ b/src/app/main/content/apps/scrumboard/scrumboard.component.scss
@@ -3,11 +3,12 @@
 :host {
     min-height: 100%;
 
-    #board-selector {
-        margin-top: 88px;
+    #boards {
+        width: 100%;
 
         .board-list {
             padding: 32px 0;
+            max-height: none!important;
 
             .board-list-item {
                 min-width: 210px;
@@ -31,157 +32,3 @@
     }
 }
 
-#scrumboard {
-    height: 100%;
-
-    > .header {
-        position: relative;
-        height: 96px;
-        min-height: 96px;
-        max-height: 96px;
-        background-image: none;
-        z-index: 49;
-
-        .header-content {
-
-            .header-boards-button {
-                margin: 0;
-            }
-
-            .header-board-name {
-                font-size: 16px;
-
-                .board-subscribe {
-                    margin-right: 8px;
-                }
-
-                .editable-buttons {
-
-                    md-icon {
-                        color: #FFFFFF !important;
-                    }
-                }
-            }
-
-            .right-side {
-
-                > .md-button:last-child {
-                    margin-right: 0;
-                }
-            }
-
-        }
-    }
-
-    #board-selector {
-        position: absolute;
-        top: 96px;
-        right: 0;
-        left: 0;
-        height: 192px;
-        z-index: 48;
-        padding: 24px;
-        opacity: 1;
-
-        .board-list-item {
-            width: 128px;
-            height: 192px;
-            padding: 16px;
-            cursor: pointer;
-            position: relative;
-
-            .board-name {
-                text-align: center;
-                padding: 16px 0;
-            }
-
-            .selected-icon {
-                position: absolute;
-                top: 0;
-                left: 50%;
-                width: 32px;
-                height: 32px;
-                margin-left: -16px;
-                border-radius: 50%;
-                text-align: center;
-                color: white;
-
-                i {
-                    line-height: 32px !important;
-                }
-            }
-
-            &.add-new-board {
-                opacity: 0.6;
-            }
-        }
-    }
-
-    .content {
-        padding: 0;
-        background: transparent;
-    }
-
-    .editable-click {
-        cursor: pointer;
-        text-decoration: none;
-        color: inherit;
-        border-bottom: none;
-    }
-
-    .editable-wrap {
-        display: block;
-        position: relative;
-
-        .editable-controls {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            width: 100%;
-
-            .editable-input {
-                width: inherit;
-                background-color: white;
-                padding: 8px;
-                border: 1px solid rgba(0, 0, 0, 0.12);
-            }
-
-            .editable-buttons {
-                display: inherit;
-
-                .md-button {
-                    margin: 0;
-
-                    &:first-of-type {
-                        padding-right: 0;
-                    }
-
-                    .icon-cancel {
-                        color: rgba(0, 0, 0, 0.32);
-                    }
-                }
-            }
-        }
-    }
-
-    .board-selector-backdrop {
-        z-index: 47;
-    }
-}
-
-// RESPONSIVE
-@include media-breakpoint(xs) {
-    #scrumboard {
-
-        .header {
-            height: 120px;
-            max-height: 120px;
-            min-height: 120px;
-
-        }
-
-        #board-selector {
-            top: 120px;
-        }
-    }
-}
diff --git a/src/app/main/toolbar/toolbar.component.scss b/src/app/main/toolbar/toolbar.component.scss
index a72695b5..9fa0d9b2 100644
--- a/src/app/main/toolbar/toolbar.component.scss
+++ b/src/app/main/toolbar/toolbar.component.scss
@@ -51,7 +51,7 @@
         min-width: 64px;
         height: 64px;
 
-        @include media-breakpoint-down('xs') {
+        @include media-breakpoint-down(sm) {
             height: 56px;
         }
     }
@@ -66,7 +66,7 @@
         width: 1px;
         background: rgba(0, 0, 0, .12);
 
-        @include media-breakpoint-down('xs') {
+        @include media-breakpoint-down(sm) {
             height: 56px;
         }
     }