diff --git a/Bootstrap.Admin/Content/admin-responsive.css b/Bootstrap.Admin/Content/admin-responsive.css
index 643f16c0..35cf28a2 100644
--- a/Bootstrap.Admin/Content/admin-responsive.css
+++ b/Bootstrap.Admin/Content/admin-responsive.css
@@ -48,11 +48,19 @@
 
     .main-content {
         margin-left: 210px;
+        transition: none;
     }
 
         .main-content.open {
             display: unset;
         }
+
+    aside {
+        transition: none;
+        transform: none;
+        top: 0;
+        right: auto;
+    }
 }
 
 @media (min-width: 940px) {
@@ -79,6 +87,24 @@
         position: absolute;
         overflow-y: auto;
     }
+
+    .main-content {
+        position: fixed;
+        overflow: auto;
+        transition: none;
+    }
+
+        .main-content.open {
+            display: block;
+        }
+
+    aside {
+        top: 0;
+    }
+
+    .aside.open {
+        transform: translate(0);
+    }
 }
 
 @media (max-height: 568px) {
diff --git a/Bootstrap.Admin/Content/admin.css b/Bootstrap.Admin/Content/admin.css
index 7daa5631..df94912e 100644
--- a/Bootstrap.Admin/Content/admin.css
+++ b/Bootstrap.Admin/Content/admin.css
@@ -134,6 +134,7 @@
 }
 
 .main-content {
+    transition: all .4s ease-in-out;
     padding: 15px 15px 0 15px;
     margin-left: 0;
     height: auto;
@@ -159,6 +160,22 @@
         text-align: left;
     }
 
+aside {
+    transition: transform .4s ease-in-out;
+    transform: translate(-100%);
+    height: 100%;
+    position: absolute;
+    top: 94px;
+    bottom: 40px;
+    left: 0;
+    right: 0;
+    z-index: 5;
+}
+
+    aside.open {
+        transform: translate(0);
+    }
+
 .sidebar {
     display: none;
     overflow-y: auto;
diff --git a/Bootstrap.Admin/Content/site-responsive.css b/Bootstrap.Admin/Content/site-responsive.css
index 27090689..0adeb227 100644
--- a/Bootstrap.Admin/Content/site-responsive.css
+++ b/Bootstrap.Admin/Content/site-responsive.css
@@ -39,9 +39,4 @@
     .header, .site-footer {
         position: fixed;
     }
-
-    .main-content {
-        position: fixed;
-        overflow: auto;
-    }
 }
diff --git a/Bootstrap.Admin/Scripts/common-scripts.js b/Bootstrap.Admin/Scripts/common-scripts.js
index 420fbc8e..81aaf2f5 100644
--- a/Bootstrap.Admin/Scripts/common-scripts.js
+++ b/Bootstrap.Admin/Scripts/common-scripts.js
@@ -77,11 +77,13 @@ $(function () {
 
     $('.sidebar-toggle-box').on('click', function () {
         if ($sidebar.is(":visible") === true) {
-            $sidebar.hide();
             $main.addClass('closed').removeClass('open');
+            $sidebar.parent().toggleClass('open')
+            $(window).width() <= 768 ? setTimeout(function () { $sidebar.hide() }, 400) : $sidebar.hide();
         } else {
-            $sidebar.show();
-            $main.addClass('open').removeClass('closed');
+            $sidebar.show()
+            $sidebar.parent().toggleClass('open')
+            $(window).width() <= 768 ? setTimeout(function () { $main.addClass('open').removeClass('closed') }, 400) : $main.addClass('open').removeClass('closed');
         }
     });