diff --git a/src/app/core/components/theme-options/theme-options.component.html b/src/app/core/components/theme-options/theme-options.component.html
index bae52a49..e49e995b 100644
--- a/src/app/core/components/theme-options/theme-options.component.html
+++ b/src/app/core/components/theme-options/theme-options.component.html
@@ -4,107 +4,95 @@
 
 <div class="theme-options-panel-overlay" #overlay [fxHide]="barClosed" [@fadeInOut]="!barClosed"></div>
 
-<div #panel class="theme-options-panel md-white-bg mat-elevation-z8 p-16">
+<div #panel class="theme-options-panel md-white-bg mat-elevation-z8">
 
     <button md-icon-button class="close-button" (click)="closeBar()">
         <md-icon>close</md-icon>
     </button>
 
-    <md-list>
-        <h3 md-subheader>Navigation:</h3>
-        <md-list-item>
-            <md-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()"
-                            fxLayout="row" fxLayoutAlign="start center" fxLayoutWrap>
-                <md-radio-button class="mr-8 mb-8" value="top">Top</md-radio-button>
-                <md-radio-button class="mr-8 mb-8" value="left">Left</md-radio-button>
-                <md-radio-button class="mr-8 mb-8" value="right">Right</md-radio-button>
-                <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
-            </md-radio-group>
-        </md-list-item>
+    <div class="theme-options-panel-inner" fxLayout="column" fxLayoutAlign="start start">
 
-        <h3 md-subheader>Toolbar:</h3>
-        <md-list-item>
-            <md-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()">
-                <md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button>
-                <md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button>
-                <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
-            </md-radio-group>
-        </md-list-item>
+        <h3>Navigation:</h3>
+        <md-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()"
+                        fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+            <md-radio-button class="mr-8 mb-8" value="top">Top</md-radio-button>
+            <md-radio-button class="mr-8 mb-8" value="left">Left</md-radio-button>
+            <md-radio-button class="mr-8 mb-8" value="right">Right</md-radio-button>
+            <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
+        </md-radio-group>
 
-        <h3 md-subheader>Footer:</h3>
-        <md-list-item>
-            <md-radio-group [(ngModel)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()">
-                <md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button>
-                <md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button>
-                <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
-            </md-radio-group>
-        </md-list-item>
+        <h3 class="mt-24">Toolbar:</h3>
+        <md-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()"
+                        fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+            <md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button>
+            <md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button>
+            <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
+        </md-radio-group>
 
-        <h3 md-subheader>Layout Mode:</h3>
-        <md-list-item>
-            <md-radio-group [(ngModel)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()">
-                <md-radio-button class="mr-8 mb-8" value="boxed">Boxed</md-radio-button>
-                <md-radio-button class="mr-8 mb-8" value="fullwidth">Fullwidth</md-radio-button>
-            </md-radio-group>
-        </md-list-item>
+        <h3 class="mt-24">Footer:</h3>
+        <md-radio-group [(ngModel)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()"
+                        fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+            <md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button>
+            <md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button>
+            <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
+        </md-radio-group>
+
+        <h3 class="mt-24">Layout Mode:</h3>
+        <md-radio-group [(ngModel)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()"
+                        fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+            <md-radio-button class="mr-8 mb-8" value="boxed">Boxed</md-radio-button>
+            <md-radio-button class="mr-8 mb-8" value="fullwidth">Fullwidth</md-radio-button>
+        </md-radio-group>
 
         <md-divider></md-divider>
 
-        <h3 md-subheader>Colors:</h3>
+        <h3>Colors:</h3>
+        <div class="colors">
 
-        <md-list-item class="mb-8">
             <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
                 <h4 class="mr-8">Toolbar Color</h4>
                 <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.toolbar"
                                             (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
             </div>
-        </md-list-item>
 
-        <md-list-item class="mb-8">
             <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
                 <h4 class="mr-8">Navigation Bar Color</h4>
                 <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.navbar"
                                             (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
             </div>
-        </md-list-item>
 
-        <md-list-item class="mb-8">
             <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
                 <h4 class="mr-8">Footer Color</h4>
                 <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.footer"
                                             (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
             </div>
-        </md-list-item>
+
+        </div>
 
         <md-divider></md-divider>
 
-        <h3 md-subheader>Animation:</h3>
+        <h3>Router Animation:</h3>
+        <md-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
+            <md-option value="none">
+                None
+            </md-option>
+            <md-option value="slideUp">
+                Slide up
+            </md-option>
+            <md-option value="slideDown">
+                Slide down
+            </md-option>
+            <md-option value="slideRight">
+                Slide right
+            </md-option>
+            <md-option value="slideLeft">
+                Slide left
+            </md-option>
+            <md-option value="fadeIn">
+                Fade in
+            </md-option>
+        </md-select>
 
-        <md-list-item>
-            <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-                <h4>Router Animation</h4>
-                <md-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
-                    <md-option value="none">
-                        None
-                    </md-option>
-                    <md-option value="slideUp">
-                        Slide up
-                    </md-option>
-                    <md-option value="slideDown">
-                        Slide down
-                    </md-option>
-                    <md-option value="slideRight">
-                        Slide right
-                    </md-option>
-                    <md-option value="slideLeft">
-                        Slide left
-                    </md-option>
-                    <md-option value="fadeIn">
-                        Fade in
-                    </md-option>
-                </md-select>
-            </div>
-        </md-list-item>
+    </div>
 
-    </md-list>
 </div>
diff --git a/src/app/core/components/theme-options/theme-options.component.scss b/src/app/core/components/theme-options/theme-options.component.scss
index f2670861..950c472c 100644
--- a/src/app/core/components/theme-options/theme-options.component.scss
+++ b/src/app/core/components/theme-options/theme-options.component.scss
@@ -26,11 +26,14 @@
         width: 360px;
         transform: translate3d(100%, 0, 0);
         z-index: 999;
-        max-width: 80vw;
-        max-height: calc(100vh - 180px);
+        max-height: calc(100vh - 200px);
+        padding: 24px;
         overflow: auto;
 
         @include media-breakpoint-down('xs') {
+            top: -120px;
+            max-height: calc(100vh - 60px);
+            width: 90vw;
         }
 
         .close-button {
@@ -38,6 +41,23 @@
             top: 8px;
             right: 8px;
         }
+
+        h3 {
+            font-size: 14px;
+            font-weight: 500;
+            color: rgba(0, 0, 0, 0.54);
+        }
+
+        .mat-divider{
+            display: block !important;
+            width: 100%;
+            margin: 24px 0 16px 0;
+        }
+
+        .colors {
+            display: block !important;
+            width: 100%;
+        }
     }
 
     .theme-options-panel-overlay {
@@ -50,6 +70,10 @@
         bottom: 0;
         z-index: 998;
 
+        @include media-breakpoint-down('sm') {
+            background: rgba(0, 0, 0, 0.37);
+        }
+
         &.hidden {
             display: none;
         }
diff --git a/src/app/main/content/apps/chat/chat.component.scss b/src/app/main/content/apps/chat/chat.component.scss
index c7b2e19f..2d483473 100644
--- a/src/app/main/content/apps/chat/chat.component.scss
+++ b/src/app/main/content/apps/chat/chat.component.scss
@@ -28,7 +28,7 @@
                 > .mat-sidenav-content,
                 > .mat-drawer-content {
                     display: flex;
-                    flex: 1 0 auto;
+                    flex: 1 1 auto;
                     min-height: 100%;
                     height: auto;
                 }
diff --git a/src/app/main/content/apps/todo/todo-details/todo-details.component.html b/src/app/main/content/apps/todo/todo-details/todo-details.component.html
index 9884527d..b16980c6 100644
--- a/src/app/main/content/apps/todo/todo-details/todo-details.component.html
+++ b/src/app/main/content/apps/todo/todo-details/todo-details.component.html
@@ -1,16 +1,21 @@
 <div *ngIf="!todo" fxLayout="column" fxLayoutAlign="center center" fxFlex>
-    <md-icon class="s-120 mb-12 select-todo-icon" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">check_box</md-icon>
-    <span class="hint-text mat-h1 select-todo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'400ms'}}">Select a todo</span>
+    <md-icon class="s-120 mb-12 select-todo-icon" *fuseIfOnDom
+             [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">check_box
+    </md-icon>
+    <span class="hint-text mat-h1 select-todo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'400ms'}}">Select
+        a todo
+    </span>
 </div>
 
 <div *ngIf="todo">
 
     <div class="todo-header" fxLayout="row" fxLayoutAlign="space-between center">
 
-        <button md-button class="mat-icon-button toggle-complete-button" (click)="toggleCompleted($event)"
+        <button md-button class="toggle-complete-button p-0" (click)="toggleCompleted($event)"
                 aria-label="Toggle completed" fxFlex="0 1 auto">
             <md-icon *ngIf="todo.completed">check_box</md-icon>
             <md-icon *ngIf="!todo.completed">check_box_outline_blank</md-icon>
+            <span>Mark as Done</span>
         </button>
 
         <div class="actions" fxLayout="row" fxLayoutAlign="start center">
@@ -49,14 +54,16 @@
         <form [formGroup]="todoForm" (submit)="addTodo()">
 
             <md-input-container class="title mt-8" floatPlaceholder="never" fxFill>
-                    <textarea mdInput
-                              #titleInput
-                              name="title"
-                              formControlName="title"
-                              placeholder="Title"
-                              mdTextareaAutosize
-                              required>
-                    </textarea>
+                <textarea mdInput
+                          #titleInput
+                          name="title"
+                          formControlName="title"
+                          placeholder="Title"
+                          mdTextareaAutosize
+                          mdAutosizeMinRows="1"
+                          mdAutosizeMaxRows="2"
+                          required>
+                </textarea>
             </md-input-container>
 
             <div class="tags mb-24" fxFlexFill fxLayout="row" fxLayoutWrap>
@@ -68,9 +75,9 @@
                 </div>
             </div>
 
-            <div fxFlexFill fxLayout="row">
+            <div class="dates" fxFlexFill fxLayout="column" fxLayout.gt-xs="row">
 
-                <md-form-field class="mr-24" fxFlex>
+                <md-form-field class="mr-sm-24" fxFlex>
                     <input mdInput [mdDatepicker]="startDatePicker" placeholder="Start Date">
                     <md-datepicker-toggle mdSuffix [for]="startDatePicker"></md-datepicker-toggle>
                     <md-datepicker #startDatePicker></md-datepicker>
@@ -85,14 +92,16 @@
             </div>
 
             <md-input-container class="" fxFill>
-                 <textarea mdInput
-                           name="notes"
-                           formControlName="notes"
-                           placeholder="Notes"
-                           md-maxlength="500"
-                           mdTextareaAutosize
-                           mdAutosizeMinRows="6">
-                 </textarea>
+                <textarea mdInput #notes
+                          name="notes"
+                          formControlName="notes"
+                          placeholder="Notes"
+                          maxlength="500"
+                          mdTextareaAutosize
+                          mdAutosizeMinRows="1"
+                          mdAutosizeMaxRows="6">
+                </textarea>
+                <md-hint align="end">{{notes.value.length}} / 500</md-hint>
             </md-input-container>
 
             <button *ngIf="formType === 'new'"
diff --git a/src/app/main/content/apps/todo/todo-details/todo-details.component.scss b/src/app/main/content/apps/todo/todo-details/todo-details.component.scss
index 503982d1..d0162789 100644
--- a/src/app/main/content/apps/todo/todo-details/todo-details.component.scss
+++ b/src/app/main/content/apps/todo/todo-details/todo-details.component.scss
@@ -8,6 +8,8 @@
     padding: 24px;
 
     .todo-header {
+        padding-bottom: 24px;
+        margin-bottom: 8px;
         border-bottom: 1px solid rgba(0, 0, 0, 0.12);
 
         .actions {
@@ -38,74 +40,10 @@
             }
         }
 
-        .to {
-            color: rgba(0, 0, 0, 0.54);
+        .dates {
 
-            .to-text {
-                margin-right: 4px;
-                text-transform: lowercase;
-            }
-        }
-
-        .info {
-            padding-bottom: 16px;
-
-            .avatar {
-                margin-right: 16px;
-                background-color: mat-color($accent);
-            }
-
-            .name {
-                margin-right: 8px;
-                font-weight: 500;
-            }
-
-            .toggle-details {
-                user-select: none;
-                text-decoration: underline;
-                padding-top: 16px;
-                cursor: pointer;
-                font-weight: 500;
-            }
-
-            .details {
-                padding-top: 8px;
-
-                .title {
-                    font-weight: 500;
-                    margin-right: 6px;
-                }
-
-                .detail {
-                    color: rgba(0, 0, 0, 0.54);
-                }
-            }
-
-        }
-    }
-
-    .todo-attachments {
-        padding: 24px 0;
-        border-top: 1px solid rgba(0, 0, 0, 0.12);
-
-        .title {
-            margin-bottom: 16px;
-            font-weight: 500;
-        }
-
-        .attachment {
-
-            .preview {
-                width: 100px;
-                margin: 0 16px 8px 0;
-            }
-
-            .link {
-                margin-bottom: 2px;
-            }
-
-            .size {
-                font-size: 11px;
+            .mat-form-field {
+                width: auto !important;
             }
         }
     }