diff --git a/index.html b/index.html
index b67763e3..aec872f4 100644
--- a/index.html
+++ b/index.html
@@ -143,6 +143,10 @@ push = +refs/heads/master:refs/heads/master
 
     </style>
 
+
+    <!-- jQuery -->
+    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
+
   </head>
   <body>
 
@@ -177,6 +181,7 @@ push = +refs/heads/master:refs/heads/master
             <li class="withripple" data-target="#dropdown">Dropdown (Work in progress)</li>
             <li class="withripple" data-target="#dropdown-menu">Dropdown Menu</li>
             <li class="withripple" data-target="#dialog">Dialog</li>
+            <li class="withripple" data-target="#shadow">Shadow</li>
           </ul>
         </nav>
         <div class="pages col-xs-9">
@@ -841,7 +846,7 @@ push = +refs/heads/master:refs/heads/master
                 </div>
               </div>
               <style>
-                #dropdown-menu h2 {
+                #dialog h2 {
                   padding: 14px;
                   margin: 0;
                   font-size: 16px;
@@ -849,6 +854,73 @@ push = +refs/heads/master:refs/heads/master
                 }
               </style>
             </div>
+            <div class="well page" id="shadow">
+              <h1 class="header">Shadow</h1>
+
+              <h2>Shadows</h2>
+              <div class="sample">z = 0</div>
+              <div class="sample shadow-z-1">z = 1</div>
+              <div class="sample shadow-z-2">z = 2</div>
+              <div class="sample shadow-z-3">z = 3</div>
+              <div class="sample shadow-z-4">z = 4</div>
+              <div class="sample shadow-z-5">z = 5</div>
+
+              <h2>Animated</h2>
+              <div id="shadow-sample2" data-tap="0">tap</div>
+              <div id="shadow-sample3" data-tap="0">tap</div>
+
+              <script>
+                $(document).on("click", "#shadow-sample2, #shadow-sample3", function() {
+                  var tap = ($(this).data("tap") * 1) + 1;
+                  if (tap === 6) {
+                    tap = 0;
+                  }
+                  $(this).data("tap", tap);
+                  var shadow = "shadow-z-" + tap;
+                  $(this).attr("class", shadow);
+                });
+              </script>
+
+              <style>
+                #shadow h2 {
+                  padding: 14px;
+                  margin: 0;
+                  font-size: 16px;
+                  font-weight: 400;
+                }
+                #shadow .sample {
+                  width:  100px;
+                  height: 100px;
+                  margin: 16px;
+                  padding: 16px;
+                  display: inline-block;
+                }
+                #shadow-sample2 {
+                  display: inline-block;
+                  width:  100px;
+                  height: 100px;
+                  margin: 16px;
+                  padding: 16px;
+                  cursor: pointer;
+                  -webkit-user-select: none;
+                  -moz-user-select: none;
+                  user-select: none;
+
+                }
+                #shadow-sample3 {
+                  display: inline-block;
+                  width:  100px;
+                  height: 100px;
+                  margin: 16px;
+                  padding: 16px;
+                  border-radius: 100px;
+                  cursor: pointer;
+                  -webkit-user-select: none;
+                  -moz-user-select: none;
+                  user-select: none;
+                }
+              </style>
+            </div>
           </div>
           <div class="col-xs-2">
             <button class="btn btn-fab btn-material-lightgrey" id="opensource"><i class="mdi-action-open-in-new"></i></button></div>
@@ -870,8 +942,6 @@ push = +refs/heads/master:refs/heads/master
       </div>
     </div>
 
-    <!-- jQuery -->
-    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
 
     <!-- Open source code -->
     <script>
