diff --git a/documentation/build/include/layout.html b/documentation/build/include/layout.html
index c65cd022f..18d7fdc55 100644
--- a/documentation/build/include/layout.html
+++ b/documentation/build/include/layout.html
@@ -27,18 +27,18 @@
   <p class="lead">Skins can be found in the dist/css/skins folder.
     Choose and the skin file that you want then add the appropriate
     class to the body tag to change the template's appearance. Here is the list of available skins:</p>
-  <ul class="bring-up">
-    <li><code>skin-blue</code></li>
-    <li><code>skin-blue-light</code></li>
-    <li><code>skin-yellow</code></li>
-    <li><code>skin-yellow-light</code></li>
-    <li><code>skin-purple</code></li>
-    <li><code>skin-purple-light</code></li>
-    <li><code>skin-green</code></li>
-    <li><code>skin-green-light</code></li>
-    <li><code>skin-red</code></li>
-    <li><code>skin-red-light</code></li>
-    <li><code>skin-black</code></li>
-    <li><code>skin-black-light</code></li>
+  <ul id="layout-skins-list" class="bring-up">
+    <li><code>skin-blue</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-blue-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-yellow</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-yellow-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-purple</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-purple-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-green</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-green-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-red</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-red-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-black</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-black-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
   </ul>
 </section>
\ No newline at end of file
diff --git a/documentation/build/index.html b/documentation/build/index.html
index 125248bea..d1d8aaad9 100644
--- a/documentation/build/index.html
+++ b/documentation/build/index.html
@@ -13,7 +13,7 @@
     <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
     <!-- Theme style -->
     <link href="../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
-    <link href="../dist/css/skins/skin-blue.min.css" rel="stylesheet" type="text/css" />
+    <link href="../dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
     <link href="style.css" rel="stylesheet" type="text/css" />
 
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
diff --git a/documentation/docs.js b/documentation/docs.js
index 9a7afb401..dc0c504d1 100644
--- a/documentation/docs.js
+++ b/documentation/docs.js
@@ -51,4 +51,10 @@ $(function () {
       }, 500);
     }
   });
+  //Skin switcher
+  $('#layout-skins-list a').click(function(e) {
+    e.preventDefault();
+    var skinName = $(this).siblings('code').text();
+    $('body').attr('class', skinName + ' fixed');
+  });
 });
\ No newline at end of file
diff --git a/documentation/index.html b/documentation/index.html
index f7fb1b8f1..85a329265 100644
--- a/documentation/index.html
+++ b/documentation/index.html
@@ -13,7 +13,7 @@
     <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
     <!-- Theme style -->
     <link href="../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
-    <link href="../dist/css/skins/skin-blue.min.css" rel="stylesheet" type="text/css" />
+    <link href="../dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
     <link href="style.css" rel="stylesheet" type="text/css" />
 
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
@@ -234,19 +234,19 @@ AdminLTE/
   <p class="lead">Skins can be found in the dist/css/skins folder.
     Choose and the skin file that you want then add the appropriate
     class to the body tag to change the template's appearance. Here is the list of available skins:</p>
-  <ul class="bring-up">
-    <li><code>skin-blue</code></li>
-    <li><code>skin-blue-light</code></li>
-    <li><code>skin-yellow</code></li>
-    <li><code>skin-yellow-light</code></li>
-    <li><code>skin-purple</code></li>
-    <li><code>skin-purple-light</code></li>
-    <li><code>skin-green</code></li>
-    <li><code>skin-green-light</code></li>
-    <li><code>skin-red</code></li>
-    <li><code>skin-red-light</code></li>
-    <li><code>skin-black</code></li>
-    <li><code>skin-black-light</code></li>
+  <ul id="layout-skins-list" class="bring-up">
+    <li><code>skin-blue</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-blue-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-yellow</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-yellow-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-purple</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-purple-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-green</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-green-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-red</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-red-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-black</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-black-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
   </ul>
 </section>