diff --git a/index.html b/index.html
index afd2a4cb..2388fcaa 100644
--- a/index.html
+++ b/index.html
@@ -943,7 +943,10 @@
         <script src="js/AdminLTE/app.js" type="text/javascript"></script>
         
         <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
-        <script src="js/AdminLTE/dashboard.js" type="text/javascript"></script>        
+        <script src="js/AdminLTE/dashboard.js" type="text/javascript"></script>     
+        
+        <!-- AdminLTE for demo purposes -->
+        <script src="js/AdminLTE/demo.js" type="text/javascript"></script>
 
     </body>
 </html>
\ No newline at end of file
diff --git a/js/AdminLTE/app.js b/js/AdminLTE/app.js
index 629cc2dd..85374f86 100644
--- a/js/AdminLTE/app.js
+++ b/js/AdminLTE/app.js
@@ -134,76 +134,6 @@ $(function() {
         radioClass: 'iradio_minimal'
     });
 
-    /* For demo purposes */
-    var demo = $("<div />").css({
-        position: "fixed",
-        top: "150px",
-        right: "0",
-        background: "rgba(0, 0, 0, 0.7)",
-        "border-radius": "5px 0px 0px 5px",
-        padding: "10px 15px",
-        "font-size": "16px",
-        "z-index": "999999",
-        cursor: "pointer",
-        color: "#ddd"
-    }).html("<i class='fa fa-gear'></i>").addClass("no-print");
-
-    var demo_settings = $("<div />").css({
-        "padding": "10px",
-        position: "fixed",
-        top: "130px",
-        right: "-200px",
-        background: "#fff",
-        border: "3px solid rgba(0, 0, 0, 0.7)",
-        "width": "200px",
-        "z-index": "999999"
-    }).addClass("no-print");
-    demo_settings.append(
-            "<h4 style='margin: 0 0 5px 0; border-bottom: 1px dashed #ddd; padding-bottom: 3px;'>Layout Options</h4>"
-            + "<div class='form-group no-margin'>"
-            + "<div class='.checkbox'>"
-            + "<label>"
-            + "<input type='checkbox' onchange='change_layout();'/> "
-            + "Fixed layout"
-            + "</label>"
-            + "</div>"
-            + "</div>"
-            );
-    demo_settings.append(
-            "<h4 style='margin: 0 0 5px 0; border-bottom: 1px dashed #ddd; padding-bottom: 3px;'>Skins</h4>"
-            + "<div class='form-group no-margin'>"
-            + "<div class='.radio'>"
-            + "<label>"
-            + "<input name='skins' type='radio' onchange='change_skin(\"skin-black\");' /> "
-            + "Black"
-            + "</label>"
-            + "</div>"
-            + "</div>"
-
-            + "<div class='form-group no-margin'>"
-            + "<div class='.radio'>"
-            + "<label>"
-            + "<input name='skins' type='radio' onchange='change_skin(\"skin-blue\");' checked='checked'/> "
-            + "Blue"
-            + "</label>"
-            + "</div>"
-            + "</div>"
-            );
-
-    demo.click(function() {
-        if (!$(this).hasClass("open")) {
-            $(this).css("right", "200px");
-            demo_settings.css("right", "0");
-            $(this).addClass("open");
-        } else {
-            $(this).css("right", "0");
-            demo_settings.css("right", "-200px");
-            $(this).removeClass("open")
-        }
-    });
-
-    $("body").append(demo);
-    $("body").append(demo_settings);
 });
 function fix_sidebar() {
     //Make sure the body tag has the .fixed class
diff --git a/js/AdminLTE/demo.js b/js/AdminLTE/demo.js
new file mode 100644
index 00000000..f935974d
--- /dev/null
+++ b/js/AdminLTE/demo.js
@@ -0,0 +1,72 @@
+$(function() {
+    /* For demo purposes */
+    var demo = $("<div />").css({
+        position: "fixed",
+        top: "150px",
+        right: "0",
+        background: "rgba(0, 0, 0, 0.7)",
+        "border-radius": "5px 0px 0px 5px",
+        padding: "10px 15px",
+        "font-size": "16px",
+        "z-index": "999999",
+        cursor: "pointer",
+        color: "#ddd"
+    }).html("<i class='fa fa-gear'></i>").addClass("no-print");
+
+    var demo_settings = $("<div />").css({
+        "padding": "10px",
+        position: "fixed",
+        top: "130px",
+        right: "-200px",
+        background: "#fff",
+        border: "3px solid rgba(0, 0, 0, 0.7)",
+        "width": "200px",
+        "z-index": "999999"
+    }).addClass("no-print");
+    demo_settings.append(
+            "<h4 style='margin: 0 0 5px 0; border-bottom: 1px dashed #ddd; padding-bottom: 3px;'>Layout Options</h4>"
+            + "<div class='form-group no-margin'>"
+            + "<div class='.checkbox'>"
+            + "<label>"
+            + "<input type='checkbox' onchange='change_layout();'/> "
+            + "Fixed layout"
+            + "</label>"
+            + "</div>"
+            + "</div>"
+            );
+    demo_settings.append(
+            "<h4 style='margin: 0 0 5px 0; border-bottom: 1px dashed #ddd; padding-bottom: 3px;'>Skins</h4>"
+            + "<div class='form-group no-margin'>"
+            + "<div class='.radio'>"
+            + "<label>"
+            + "<input name='skins' type='radio' onchange='change_skin(\"skin-black\");' /> "
+            + "Black"
+            + "</label>"
+            + "</div>"
+            + "</div>"
+
+            + "<div class='form-group no-margin'>"
+            + "<div class='.radio'>"
+            + "<label>"
+            + "<input name='skins' type='radio' onchange='change_skin(\"skin-blue\");' checked='checked'/> "
+            + "Blue"
+            + "</label>"
+            + "</div>"
+            + "</div>"
+            );
+
+    demo.click(function() {
+        if (!$(this).hasClass("open")) {
+            $(this).css("right", "200px");
+            demo_settings.css("right", "0");
+            $(this).addClass("open");
+        } else {
+            $(this).css("right", "0");
+            demo_settings.css("right", "-200px");
+            $(this).removeClass("open")
+        }
+    });
+
+    $("body").append(demo);
+    $("body").append(demo_settings);
+});
\ No newline at end of file
diff --git a/pages/UI/buttons.html b/pages/UI/buttons.html
index 591aa812..216c00cd 100644
--- a/pages/UI/buttons.html
+++ b/pages/UI/buttons.html
@@ -1269,6 +1269,7 @@
         <script src="../../js/bootstrap.min.js" type="text/javascript"></script>
         <!-- AdminLTE App -->
         <script src="../../js/AdminLTE/app.js" type="text/javascript"></script>
-
+        <!-- AdminLTE for demo purposes -->
+        <script src="js/AdminLTE/demo.js" type="text/javascript"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/pages/UI/empty.html b/pages/UI/empty.html
index 5fe837c9..dc0d56f6 100644
--- a/pages/UI/empty.html
+++ b/pages/UI/empty.html
@@ -414,6 +414,7 @@
         <script src="../../js/bootstrap.min.js" type="text/javascript"></script>
         <!-- AdminLTE App -->
         <script src="../../js/AdminLTE/app.js" type="text/javascript"></script>
-
+        <!-- AdminLTE for demo purposes -->
+        <script src="js/AdminLTE/demo.js" type="text/javascript"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/pages/UI/general.html b/pages/UI/general.html
index c35a3702..fa698db7 100644
--- a/pages/UI/general.html
+++ b/pages/UI/general.html
@@ -984,6 +984,7 @@
         <script src="../../js/bootstrap.min.js" type="text/javascript"></script>
         <!-- AdminLTE App -->
         <script src="../../js/AdminLTE/app.js" type="text/javascript"></script>
-
+        <!-- AdminLTE for demo purposes -->
+        <script src="js/AdminLTE/demo.js" type="text/javascript"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/pages/UI/icons.html b/pages/UI/icons.html
index 0cae8c96..4a52a974 100644
--- a/pages/UI/icons.html
+++ b/pages/UI/icons.html
@@ -2175,6 +2175,7 @@
         <script src="../../js/bootstrap.min.js" type="text/javascript"></script>
         <!-- AdminLTE App -->
         <script src="../../js/AdminLTE/app.js" type="text/javascript"></script>
-
+        <!-- AdminLTE for demo purposes -->
+        <script src="js/AdminLTE/demo.js" type="text/javascript"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/pages/UI/jquery-ui.html b/pages/UI/jquery-ui.html
index ceabc164..ded4606b 100644
--- a/pages/UI/jquery-ui.html
+++ b/pages/UI/jquery-ui.html
@@ -500,7 +500,8 @@
         <script src="../../js/bootstrap.min.js" type="text/javascript"></script>
         <!-- AdminLTE App -->
         <script src="../../js/AdminLTE/app.js" type="text/javascript"></script>
-
+        <!-- AdminLTE for demo purposes -->
+        <script src="js/AdminLTE/demo.js" type="text/javascript"></script>
         <script>
             $(function() {
                 $("#accordion").accordion();
diff --git a/pages/UI/sliders.html b/pages/UI/sliders.html
index d2ee2fb7..2b2775fd 100644
--- a/pages/UI/sliders.html
+++ b/pages/UI/sliders.html
@@ -488,7 +488,8 @@
         <script src="../../js/bootstrap.min.js" type="text/javascript"></script>
         <!-- AdminLTE App -->
         <script src="../../js/AdminLTE/app.js" type="text/javascript"></script>
-
+        <!-- AdminLTE for demo purposes -->
+        <script src="js/AdminLTE/demo.js" type="text/javascript"></script>
         <!-- Ion Slider -->
         <script src="../../js/plugins/ionslider/ion.rangeSlider.min.js" type="text/javascript"></script>
 
diff --git a/pages/UI/timeline.html b/pages/UI/timeline.html
index 607b2c76..2a429dd2 100644
--- a/pages/UI/timeline.html
+++ b/pages/UI/timeline.html
@@ -562,6 +562,7 @@
         <script src="../../js/bootstrap.min.js" type="text/javascript"></script>
         <!-- AdminLTE App -->
         <script src="../../js/AdminLTE/app.js" type="text/javascript"></script>
-
+        <!-- AdminLTE for demo purposes -->
+        <script src="js/AdminLTE/demo.js" type="text/javascript"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/pages/calendar.html b/pages/calendar.html
index cd4e4eaf..34d03b34 100644
--- a/pages/calendar.html
+++ b/pages/calendar.html
@@ -478,6 +478,8 @@
         <script src="../js/bootstrap.min.js" type="text/javascript"></script>
         <!-- AdminLTE App -->
         <script src="../js/AdminLTE/app.js" type="text/javascript"></script>
+        <!-- AdminLTE for demo purposes -->
+        <script src="js/AdminLTE/demo.js" type="text/javascript"></script>        
         <!-- fullCalendar -->
         <script src="../js/plugins/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
         <!-- Page specific script -->
diff --git a/pages/charts/empty.html b/pages/charts/empty.html
index 785b9599..ee10098f 100644
--- a/pages/charts/empty.html
+++ b/pages/charts/empty.html
@@ -414,6 +414,7 @@
         <script src="../../js/bootstrap.min.js" type="text/javascript"></script>
         <!-- AdminLTE App -->
         <script src="../../js/AdminLTE/app.js" type="text/javascript"></script>
-
+        <!-- AdminLTE for demo purposes -->
+        <script src="js/AdminLTE/demo.js" type="text/javascript"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/pages/charts/flot.html b/pages/charts/flot.html
index c56106ef..d1b64bad 100644
--- a/pages/charts/flot.html
+++ b/pages/charts/flot.html
@@ -486,7 +486,8 @@
         <script src="../../js/bootstrap.min.js" type="text/javascript"></script>
         <!-- AdminLTE App -->
         <script src="../../js/AdminLTE/app.js" type="text/javascript"></script>
-
+        <!-- AdminLTE for demo purposes -->
+        <script src="js/AdminLTE/demo.js" type="text/javascript"></script>
         <!-- FLOT CHARTS -->
         <script src="../../js/plugins/flot/jquery.flot.min.js" type="text/javascript"></script>
         <!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
diff --git a/pages/charts/inline.html b/pages/charts/inline.html
index 269430be..794002b6 100644
--- a/pages/charts/inline.html
+++ b/pages/charts/inline.html
@@ -673,7 +673,8 @@
         <script src="../../js/bootstrap.min.js" type="text/javascript"></script>
         <!-- AdminLTE App -->
         <script src="../../js/AdminLTE/app.js" type="text/javascript"></script>
-
+        <!-- AdminLTE for demo purposes -->
+        <script src="js/AdminLTE/demo.js" type="text/javascript"></script>
         <!-- jQuery Knob -->
         <script src="../../js/plugins/jqueryKnob/jquery.knob.js" type="text/javascript"></script>
         <!-- Sparkline -->
diff --git a/pages/charts/morris.html b/pages/charts/morris.html
index fde34432..c81786dc 100644
--- a/pages/charts/morris.html
+++ b/pages/charts/morris.html
@@ -468,7 +468,8 @@
 
         <!-- AdminLTE App -->
         <script src="../../js/AdminLTE/app.js" type="text/javascript"></script>
-
+        <!-- AdminLTE for demo purposes -->
+        <script src="js/AdminLTE/demo.js" type="text/javascript"></script>
         <!-- page script -->
         <script type="text/javascript">
             $(function() {
diff --git a/pages/empty.html b/pages/empty.html
index e994c30a..afe4ab5c 100644
--- a/pages/empty.html
+++ b/pages/empty.html
@@ -444,6 +444,7 @@
         <script src="../js/bootstrap.min.js" type="text/javascript"></script>
         <!-- AdminLTE App -->
         <script src="../js/AdminLTE/app.js" type="text/javascript"></script>
-
+        <!-- AdminLTE for demo purposes -->
+        <script src="js/AdminLTE/demo.js" type="text/javascript"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/pages/examples/404.html b/pages/examples/404.html
index ac20882b..a54a217a 100644
--- a/pages/examples/404.html
+++ b/pages/examples/404.html
@@ -432,6 +432,7 @@
         <script src="../../js/bootstrap.min.js" type="text/javascript"></script>
         <!-- AdminLTE App -->
         <script src="../../js/AdminLTE/app.js" type="text/javascript"></script>
-
+        <!-- AdminLTE for demo purposes -->
+        <script src="js/AdminLTE/demo.js" type="text/javascript"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/pages/examples/500.html b/pages/examples/500.html
index e6a74e96..61456302 100644
--- a/pages/examples/500.html
+++ b/pages/examples/500.html
@@ -432,6 +432,7 @@
         <script src="../../js/bootstrap.min.js" type="text/javascript"></script>
         <!-- AdminLTE App -->
         <script src="../../js/AdminLTE/app.js" type="text/javascript"></script>
-
+        <!-- AdminLTE for demo purposes -->
+        <script src="js/AdminLTE/demo.js" type="text/javascript"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/pages/examples/blank.html b/pages/examples/blank.html
index 88b042be..d96e02e2 100644
--- a/pages/examples/blank.html
+++ b/pages/examples/blank.html
@@ -415,6 +415,7 @@
         <script src="../../js/bootstrap.min.js" type="text/javascript"></script>
         <!-- AdminLTE App -->
         <script src="../../js/AdminLTE/app.js" type="text/javascript"></script>
-
+        <!-- AdminLTE for demo purposes -->
+        <script src="js/AdminLTE/demo.js" type="text/javascript"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/pages/examples/invoice.html b/pages/examples/invoice.html
index 850070f3..afba8187 100644
--- a/pages/examples/invoice.html
+++ b/pages/examples/invoice.html
@@ -552,6 +552,7 @@
         <script src="../../js/bootstrap.min.js" type="text/javascript"></script>
         <!-- AdminLTE App -->
         <script src="../../js/AdminLTE/app.js" type="text/javascript"></script>
-
+        <!-- AdminLTE for demo purposes -->
+        <script src="js/AdminLTE/demo.js" type="text/javascript"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/pages/forms/advanced.html b/pages/forms/advanced.html
index f6af36cd..b98170c5 100644
--- a/pages/forms/advanced.html
+++ b/pages/forms/advanced.html
@@ -679,7 +679,8 @@
         <script src="../../js/plugins/timepicker/bootstrap-timepicker.min.js" type="text/javascript"></script>
         <!-- AdminLTE App -->
         <script src="../../js/AdminLTE/app.js" type="text/javascript"></script>
-
+        <!-- AdminLTE for demo purposes -->
+        <script src="js/AdminLTE/demo.js" type="text/javascript"></script>
         <!-- Page script -->
         <script type="text/javascript">
             $(function() {
diff --git a/pages/forms/editors.html b/pages/forms/editors.html
index 77144034..c619db07 100644
--- a/pages/forms/editors.html
+++ b/pages/forms/editors.html
@@ -456,6 +456,8 @@
         <script src="../../js/bootstrap.min.js" type="text/javascript"></script>
         <!-- AdminLTE App -->
         <script src="../../js/AdminLTE/app.js" type="text/javascript"></script>
+        <!-- AdminLTE for demo purposes -->
+        <script src="js/AdminLTE/demo.js" type="text/javascript"></script>        
         <!-- CK Editor -->
         <script src="../../js/plugins/ckeditor/ckeditor.js" type="text/javascript"></script>
         <!-- Bootstrap WYSIHTML5 -->
diff --git a/pages/forms/empty.html b/pages/forms/empty.html
index 42fbf44d..690f906f 100644
--- a/pages/forms/empty.html
+++ b/pages/forms/empty.html
@@ -414,6 +414,7 @@
         <script src="../../js/bootstrap.min.js" type="text/javascript"></script>
         <!-- AdminLTE App -->
         <script src="../../js/AdminLTE/app.js" type="text/javascript"></script>
-
+        <!-- AdminLTE for demo purposes -->
+        <script src="js/AdminLTE/demo.js" type="text/javascript"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/pages/forms/general.html b/pages/forms/general.html
index 02eda1dc..9e6a8b69 100644
--- a/pages/forms/general.html
+++ b/pages/forms/general.html
@@ -711,5 +711,7 @@
         <script src="../../js/bootstrap.min.js" type="text/javascript"></script>
         <!-- AdminLTE App -->
         <script src="../../js/AdminLTE/app.js" type="text/javascript"></script>
+        <!-- AdminLTE for demo purposes -->
+        <script src="js/AdminLTE/demo.js" type="text/javascript"></script>        
     </body>
 </html>
\ No newline at end of file
diff --git a/pages/mailbox.html b/pages/mailbox.html
index 79f80e29..bbc4301b 100644
--- a/pages/mailbox.html
+++ b/pages/mailbox.html
@@ -619,6 +619,8 @@
         <script src="../js/bootstrap.min.js" type="text/javascript"></script>
         <!-- AdminLTE App -->
         <script src="../js/AdminLTE/app.js" type="text/javascript"></script>
+        <!-- AdminLTE for demo purposes -->
+        <script src="js/AdminLTE/demo.js" type="text/javascript"></script>        
         <!-- Bootstrap WYSIHTML5 -->
         <script src="../jsplugins//bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" type="text/javascript"></script>
         <!-- iCheck -->
diff --git a/pages/tables/data.html b/pages/tables/data.html
index 4842f6a4..c1eda8c3 100644
--- a/pages/tables/data.html
+++ b/pages/tables/data.html
@@ -1288,7 +1288,8 @@
         <script src="../../js/plugins/datatables/dataTables.bootstrap.js" type="text/javascript"></script>
         <!-- AdminLTE App -->
         <script src="../../js/AdminLTE/app.js" type="text/javascript"></script>
-
+        <!-- AdminLTE for demo purposes -->
+        <script src="js/AdminLTE/demo.js" type="text/javascript"></script>
         <!-- page script -->
         <script type="text/javascript">
             $(function() {
diff --git a/pages/tables/empty.html b/pages/tables/empty.html
index 41507627..7736446d 100644
--- a/pages/tables/empty.html
+++ b/pages/tables/empty.html
@@ -414,6 +414,7 @@
         <script src="../../js/bootstrap.min.js" type="text/javascript"></script>
         <!-- AdminLTE App -->
         <script src="../../js/AdminLTE/app.js" type="text/javascript"></script>
-
+        <!-- AdminLTE for demo purposes -->
+        <script src="js/AdminLTE/demo.js" type="text/javascript"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/pages/tables/simple.html b/pages/tables/simple.html
index 32b8db3a..7115ea35 100644
--- a/pages/tables/simple.html
+++ b/pages/tables/simple.html
@@ -715,6 +715,7 @@
         <script src="../../js/bootstrap.min.js" type="text/javascript"></script>
         <!-- AdminLTE App -->
         <script src="../../js/AdminLTE/app.js" type="text/javascript"></script>
-
+        <!-- AdminLTE for demo purposes -->
+        <script src="js/AdminLTE/demo.js" type="text/javascript"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/pages/widgets.html b/pages/widgets.html
index 703153ff..0bea22b3 100644
--- a/pages/widgets.html
+++ b/pages/widgets.html
@@ -1027,6 +1027,7 @@
         <script src="../js/bootstrap.min.js" type="text/javascript"></script>
         <!-- AdminLTE App -->
         <script src="../js/AdminLTE/app.js" type="text/javascript"></script>
-
+        <!-- AdminLTE for demo purposes -->
+        <script src="js/AdminLTE/demo.js" type="text/javascript"></script>
     </body>
 </html>
\ No newline at end of file