diff --git a/app/helpers.php b/app/helpers.php
index da40cd08..f6fa616c 100644
--- a/app/helpers.php
+++ b/app/helpers.php
@@ -165,14 +165,19 @@ if (! function_exists('bs_menu')) {
                 }
             }
 
-            $content .= $active ? '<li class="active">' : '<li>';
+            $classes = [];
+            $active ? ($classes[] = 'active') : null;
+            isset($value['children']) ? ($classes[] = 'treeview') : null;
+
+            $content .= sprintf('<li class="%s">', implode(' ', $classes));
 
             if (isset($value['children'])) {
-                $content .= '<a href="#"><i class="fa '.$value['icon'].'"></i> <span>'.trans($value['title']).'</span><span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span></a>';
+                $content .= sprintf('<a href="#"><i class="fa %s"></i> <span>%s</span><span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span></a>', $value['icon'], trans($value['title']));
+
                 // recurse
                 $content .= '<ul class="treeview-menu" style="display: none;">'.bs_menu_render($value['children']).'</ul>';
             } else {
-                $content .= '<a href="'.url($value['link']).'"><i class="fa '.$value['icon'].'"></i> <span>'.trans($value['title']).'</span></a>';
+                $content .= sprintf('<a href="%s"><i class="fa %s"></i> <span>%s</span></a>', url($value['link']), $value['icon'], trans($value['title']));
             }
 
             $content .= '</li>';
diff --git a/gulpfile.js b/gulpfile.js
index c424e6f4..76cfe4b9 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -24,10 +24,8 @@ var distPath = 'resources/assets/dist';
 var vendorScripts = [
     'jquery/dist/jquery.min.js',
     'bootstrap/dist/js/bootstrap.min.js',
-    'admin-lte/dist/js/app.min.js',
+    'admin-lte/dist/js/adminlte.min.js',
     'bootstrap-fileinput/js/fileinput.min.js',
-    'admin-lte/plugins/datatables/jquery.dataTables.min.js',
-    'admin-lte/plugins/datatables/dataTables.bootstrap.min.js',
     'icheck/icheck.min.js',
     'toastr/build/toastr.min.js',
     'es6-promise/dist/es6-promise.auto.min.js',
@@ -37,13 +35,15 @@ var vendorScripts = [
 
 var vendorScriptsToBeMinified = [
     'regenerator-runtime/runtime.js',
+    'datatables.net/js/jquery.dataTables.js',
+    'datatables.net-bs/js/dataTables.bootstrap.js',
     'resources/assets/dist/js/common.js',
 ];
 
 var vendorStyles = [
     'bootstrap/dist/css/bootstrap.min.css',
     'admin-lte/dist/css/AdminLTE.min.css',
-    'admin-lte/plugins/datatables/dataTables.bootstrap.css',
+    'datatables.net-bs/css/dataTables.bootstrap.css',
     'bootstrap-fileinput/css/fileinput.min.css',
     'font-awesome/css/font-awesome.min.css',
     'icheck/skins/square/blue.css',
@@ -56,12 +56,9 @@ var styleReplacements = [
     ['blue@2x.png', '"../images/blue@2x.png"'],
     ['../img/loading.gif', '"../images/loading.gif"'],
     ['../img/loading-sm.gif', '"../images/loading-sm.gif"'],
-    [/@import url\((.*)italic\);/g, ''],
 ];
 
-var scriptReplacements = [
-    ['$.AdminLTE.layout.activate(),', '']
-];
+var scriptReplacements = [];
 
 var fonts = [
     'font-awesome/fonts/**',
diff --git a/resources/assets/src/js/common/layout.js b/resources/assets/src/js/common/layout.js
index b6050b50..b3d5181a 100644
--- a/resources/assets/src/js/common/layout.js
+++ b/resources/assets/src/js/common/layout.js
@@ -11,11 +11,7 @@ $.defaultPaginatorConfig = {
     wrapper: '<ul class="pagination pagination-sm no-margin"></ul>'
 };
 
-$(window).resize(activateLayout);
-
 $(document).ready(() => {
-    activateLayout();
-
     $('li.active > ul').show();
 
     $('input').iCheck({
@@ -28,10 +24,3 @@ $(document).ready(() => {
         cancelButtonText: trans('general.cancel')
     });
 });
-
-function activateLayout() {
-    if (location.pathname === '/' || location.pathname.includes('auth'))
-        return;
-
-    $.AdminLTE.layout.activate();
-}
diff --git a/resources/assets/src/sass/index.scss b/resources/assets/src/sass/index.scss
index 0ee2883d..4487047f 100644
--- a/resources/assets/src/sass/index.scss
+++ b/resources/assets/src/sass/index.scss
@@ -4,7 +4,7 @@ body {
     font-size: 16px;
 }
 
-.layout-top-nav > .wrapper {
+.layout-top-nav > .hp-wrapper {
     background-color: #eaeaea;
     // background image settings
     background-size: cover;
@@ -229,7 +229,7 @@ hr {
     padding: 0;
 }
 
-.wrapper {
+.hp-wrapper {
     width: 100%;
 }
 
diff --git a/resources/views/admin/master.tpl b/resources/views/admin/master.tpl
index 0a312362..12ed64bf 100644
--- a/resources/views/admin/master.tpl
+++ b/resources/views/admin/master.tpl
@@ -32,7 +32,7 @@
             <!-- Header Navbar -->
             <nav class="navbar navbar-static-top" role="navigation">
                 <!-- Sidebar toggle button-->
-                <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
+                <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
                     <span class="sr-only">Toggle navigation</span>
                 </a>
                 <!-- Navbar Right Menu -->
diff --git a/resources/views/index.tpl b/resources/views/index.tpl
index bb333bd5..465114a9 100644
--- a/resources/views/index.tpl
+++ b/resources/views/index.tpl
@@ -13,7 +13,7 @@
 
 <body class="hold-transition {{ option('color_scheme') }} layout-top-nav">
 
-    <div class="wrapper" style="background-image: url('{{ $home_pic_url }}');">
+    <div class="hp-wrapper" style="background-image: url('{{ $home_pic_url }}');">
         <!-- Navigation -->
         <header class="main-header transparent">
             <nav class="navbar navbar-fixed-top">
@@ -133,14 +133,14 @@
             var bottom = btn.offset().top + btn.height() + 80;
 
             if (bottom > $(window).height()) {
-                $('.wrapper').height(bottom + 'px');
+                $('.hp-wrapper').height(bottom + 'px');
             } else {
-                $('.wrapper').height($(window).height() + 'px');
+                $('.hp-wrapper').height($(window).height() + 'px');
             }
         }
 
         function changeHeaderTransparency() {
-            if (document.body.scrollTop >= ($(window).height() * 2 / 3)) {
+            if ($(window).scrollTop() >= ($(window).height() * 2 / 3)) {
                 $('.main-header').removeClass('transparent');
             } else {
                 $('.main-header').addClass('transparent');
diff --git a/resources/views/user/master.tpl b/resources/views/user/master.tpl
index c8bc4319..3766badf 100644
--- a/resources/views/user/master.tpl
+++ b/resources/views/user/master.tpl
@@ -30,7 +30,7 @@
             <!-- Header Navbar -->
             <nav class="navbar navbar-static-top" role="navigation">
                 <!-- Sidebar toggle button-->
-                <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
+                <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
                     <span class="sr-only">Toggle navigation</span>
                 </a>
                 <!-- Navbar Right Menu -->
@@ -61,7 +61,7 @@
                 </div>
 
                 <!-- Sidebar Menu -->
-                <ul class="sidebar-menu">
+                <ul class="sidebar-menu" data-widget="tree">
                     <li class="header">{{ trans('general.user-center') }}</li>
                     {!! bs_menu('user') !!}