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 9cc7b003..3d2c8698 100644
--- a/src/app/core/components/theme-options/theme-options.component.html
+++ b/src/app/core/components/theme-options/theme-options.component.html
@@ -72,27 +72,28 @@
         <mat-divider></mat-divider>
 
         <h3>Router Animation:</h3>
-        <mat-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
-            <mat-option value="none">
-                None
-            </mat-option>
-            <mat-option value="slideUp">
-                Slide up
-            </mat-option>
-            <mat-option value="slideDown">
-                Slide down
-            </mat-option>
-            <mat-option value="slideRight">
-                Slide right
-            </mat-option>
-            <mat-option value="slideLeft">
-                Slide left
-            </mat-option>
-            <mat-option value="fadeIn">
-                Fade in
-            </mat-option>
-        </mat-select>
-
+        <mat-form-field class="w-100-p">
+            <mat-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
+                <mat-option value="none">
+                    None
+                </mat-option>
+                <mat-option value="slideUp">
+                    Slide up
+                </mat-option>
+                <mat-option value="slideDown">
+                    Slide down
+                </mat-option>
+                <mat-option value="slideRight">
+                    Slide right
+                </mat-option>
+                <mat-option value="slideLeft">
+                    Slide left
+                </mat-option>
+                <mat-option value="fadeIn">
+                    Fade in
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
     </div>
 
 </div>
diff --git a/src/app/main/content/apps/dashboards/project/project.component.html b/src/app/main/content/apps/dashboards/project/project.component.html
index 75ceccab..ed4df3b1 100644
--- a/src/app/main/content/apps/dashboards/project/project.component.html
+++ b/src/app/main/content/apps/dashboards/project/project.component.html
@@ -49,18 +49,18 @@
                                 <!-- Front -->
                                 <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
                                     <div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
-                                        <mat-select class="simplified font-size-16" [(ngModel)]="widgets.widget1.currentRange"
-                                                    aria-label="Change range">
-                                            <mat-option *ngFor="let range of widgets.widget1.ranges | keys"
-                                                        [value]="range.key">
-                                                {{range.value}}
-                                            </mat-option>
-                                        </mat-select>
-
+                                        <mat-form-field>
+                                            <mat-select class="simplified font-size-16" [(ngModel)]="widgets.widget1.currentRange"
+                                                        aria-label="Change range">
+                                                <mat-option *ngFor="let range of widgets.widget1.ranges | keys"
+                                                            [value]="range.key">
+                                                    {{range.value}}
+                                                </mat-option>
+                                            </mat-select>
+                                        </mat-form-field>
                                         <button mat-icon-button fuseWidgetToggle aria-label="more">
                                             <mat-icon>more_vert</mat-icon>
                                         </button>
-
                                     </div>
 
                                     <div class="pt-8 pb-32" fxLayout="column" fxLayoutAlign="center center">
@@ -306,14 +306,14 @@
 
                                     <div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
                                         <div class="h3">{{widgets.widget6.title}}</div>
-                                        <div class="py-16">
+                                        <mat-form-field>
                                             <mat-select class="simplified" [(ngModel)]="widget6.currentRange" aria-label="Change range">
                                                 <mat-option *ngFor="let range of widgets.widget6.ranges | keys"
                                                             [value]="range.key">
                                                     {{range.value}}
                                                 </mat-option>
                                             </mat-select>
-                                        </div>
+                                        </mat-form-field>
                                     </div>
 
                                     <div class="h-400">
@@ -356,8 +356,7 @@
 
                                     <div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
                                         <div class="h3">{{widgets.widget7.title}}</div>
-
-                                        <div class="py-16">
+                                        <mat-form-field>
                                             <mat-select class="simplified" [(ngModel)]="widget7.currentRange"
                                                         aria-label="Change range">
                                                 <mat-option *ngFor="let range of widgets.widget7.ranges | keys"
@@ -365,7 +364,7 @@
                                                     {{range.value}}
                                                 </mat-option>
                                             </mat-select>
-                                        </div>
+                                        </mat-form-field>
                                     </div>
 
                                     <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center"
@@ -438,16 +437,14 @@
                                 <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
                                     <div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
                                         <div class="h3">{{widgets.widget9.title}}</div>
-
-                                        <div class="py-16">
+                                        <mat-form-field>
                                             <mat-select [(ngModel)]="widget9.currentRange" aria-label="Change range">
                                                 <mat-option *ngFor="let range of widgets.widget9.ranges | keys"
                                                             [value]="range.key">
                                                     {{range.value}}
                                                 </mat-option>
                                             </mat-select>
-
-                                        </div>
+                                        </mat-form-field>
                                     </div>
 
                                     <div class="p-16" fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row"
diff --git a/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html b/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html
index 01dd3013..2a4a75b4 100644
--- a/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html
+++ b/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html
@@ -1,6 +1,6 @@
 <!-- SIDENAV HEADER -->
 <div fxLayout="column" fxLayoutAlign="space-between start"
-     class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
+     class="header p-24 pb-4 mat-accent-bg" class.gt-md="header p-24 pb-4 white-fg">
     <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
         <mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">mail</mat-icon>
         <span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Mailbox</span>
@@ -8,13 +8,14 @@
 
     <div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}">
         <div class="title">John Doe</div>
-        <mat-select class="account-selection" placeholder="Mail Selection"
-                    floatPlaceholder="never"
-                    [ngModel]="selectedAccount">
-            <mat-option *ngFor="let account of (accounts | keys)" [value]="account.key">
-                {{account.value}}
-            </mat-option>
-        </mat-select>
+        <mat-form-field floatPlaceholder="never">
+            <mat-select class="account-selection" placeholder="Mail Selection"
+                        [ngModel]="selectedAccount">
+                <mat-option *ngFor="let account of (accounts | keys)" [value]="account.key">
+                    {{account.value}}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
     </div>
 
 </div>
diff --git a/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html b/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html
index 95fd1459..26003d34 100644
--- a/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html
+++ b/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html
@@ -1,6 +1,6 @@
 <!-- SIDENAV HEADER -->
 <div fxLayout="column" fxLayoutAlign="space-between start"
-     class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
+     class="header p-24 pb-4 mat-accent-bg" class.gt-md="header p-24 pb-4 white-fg">
     <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
         <mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">check_box</mat-icon>
         <span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">To-do</span>
@@ -8,13 +8,14 @@
 
     <div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}">
         <div class="title">John Doe</div>
-        <mat-select class="account-selection" placeholder="Todo Selection"
-                    floatPlaceholder="never"
-                    [ngModel]="selectedAccount">
-            <mat-option *ngFor="let account of (accounts | keys)" [value]="account.key">
-                {{account.value}}
-            </mat-option>
-        </mat-select>
+        <mat-form-field floatPlaceholder="never">
+            <mat-select class="account-selection" placeholder="Todo Selection"
+                        [ngModel]="selectedAccount">
+                <mat-option *ngFor="let account of (accounts | keys)" [value]="account.key">
+                    {{account.value}}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
     </div>
 
 </div>