diff --git a/index.html b/index.html
index 93270edf..b4a45c14 100644
--- a/index.html
+++ b/index.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <html>
   <!--
-  Automatically sync gh-pages with master
+Automatically sync gh-pages with master
 
-  Edit .git/config
-  Find [remote "origin"]
-  Append:
+Edit .git/config
+Find [remote "origin"]
+Append:
 
-    push = +refs/heads/master:refs/heads/gh-pages
-    push = +refs/heads/master:refs/heads/master
-  -->
+push = +refs/heads/master:refs/heads/gh-pages
+push = +refs/heads/master:refs/heads/master
+-->
 
 
   <head>
@@ -176,6 +176,7 @@
             <li class="withripple" data-target="#floating-action-button">Floating Action Button</li>
             <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>
           </ul>
         </nav>
         <div class="pages col-xs-9">
@@ -790,6 +791,70 @@
               </div>
 
             </div>
+            <div class="well page" id="dialog">
+              <h1 class="header">Dialog</h1>
+
+              <h2>Simple Dialog</h2>
+              <button class="btn btn-primary" data-toggle="modal" data-target="#simple-dialog">Open dialog</button>
+
+              <h2>Dialog with header and footer</h2>
+              <button class="btn btn-primary" data-toggle="modal" data-target="#complete-dialog">Open dialog</button>
+
+              <script>
+                $(".modal").modal({
+                  "backdrop": true
+                });
+              </script>
+
+              <div id="simple-dialog" class="modal fade" tabindex="-1">
+                <div class="modal-dialog">
+                  <div class="modal-content">
+                    <div class="modal-body">
+                      <p>E dolore commodo, id anim aute sint cupidatat eu est anim tamen ad possumus,
+                        legam officia firmissimum. Eram deserunt domesticarum, iis ita praetermissum,
+                        nam aliquip quo probant, incididunt et occaecat an nam enim exquisitaque a
+                        nescius velit admodum, non ad cohaerescant, probant o nulla tempor. Aute aut te
+                        quis arbitror ubi ne aliqua consequat aliquip. Ad sunt laborum senserit, de do
+                        quem possumus. Sint tractavissent cupidatat aute possumus ita elit ad cupidatat.
+                        Arbitror ab fabulas o eu e veniam pariatur. Non voluptate comprehenderit ad nisi
+                        id voluptate. Quis distinguantur quibusdam quae mentitum o si minim illum nisi
+                        mandaremus.</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div id="complete-dialog" class="modal fade" tabindex="-1">
+                <div class="modal-dialog">
+                  <div class="modal-content">
+                    <div class="modal-header">
+                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                      <h4 class="modal-title">Dialog</h4>
+                    </div>
+                    <div class="modal-body">
+                      <p>Fore aut non quem incididunt, varias reprehenderit deserunt quem offendit,
+                        cillum proident ne reprehenderit, quem ad laborum, quo possumus praetermissum,
+                        si ne illustriora, hic appellat coniunctione, do labore aliqua quo probant. In
+                        probant voluptatibus quo mentitum est laboris. Quorum mandaremus graviterque.
+                        Mentitum id velit, dolor aut litteris, ea varias illustriora, ita commodo ita
+                        ingeniis, iis nulla appellat incurreret, aut irure amet summis pariatur ita ubi
+                        quis dolore veniam proident, consequat sed ingeniis.</p>
+                    </div>
+                    <div class="modal-footer">
+                      <button class="btn btn-primary" data-dismiss="modal">Dismiss</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <style>
+                #dropdown-menu h2 {
+                  padding: 14px;
+                  margin: 0;
+                  font-size: 16px;
+                  font-weight: 400;
+                }
+              </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>
