diff --git a/examples/demo.css b/examples/demo.css
index c5426221..95433957 100644
--- a/examples/demo.css
+++ b/examples/demo.css
@@ -223,6 +223,10 @@ h1 {
   transform: translate(-50%, -50%);
 }
 
+#resetButton {
+  margin-top: 20px;
+}
+
 .no-border {
   border: 0px;
 }
diff --git a/examples/demo.js b/examples/demo.js
index 02c46fef..67889a04 100644
--- a/examples/demo.js
+++ b/examples/demo.js
@@ -65,8 +65,15 @@ window.onload = function() {
     sequencer.loadImage("images/tulips.png", ui.onLoad);
   }
 
+  var resetSequence = function(){
+    var r=confirm("Do you want to reset the sequence?");
+    if (r)
+      window.location = "/";
+  }
+
   $("#addStep select").on("change", ui.selectNewStepUi);
   $("#addStep #add-step-btn").on("click", ui.addStepUi);
+  $("#resetButton").on("click",resetSequence);
 
   //Module button radio selection
   $('.radio-group .radio').on("click", function() {
diff --git a/examples/index.html b/examples/index.html
index e01ce7a5..21c9bc4d 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -171,6 +171,7 @@
         <div class="panel-body">
           <div style="text-align:center;">
             <button class="btn btn-success btn-lg" id="download-btn" name="download">Download PNG</button>
+            <button id="resetButton" class="btn btn-default btn-lg">Clear All Steps</button>
           </div>
         </div>
       </div>
@@ -181,7 +182,6 @@
   <footer>
     <hr style="margin:20px;"><center><a class="color:grey;" id="clear-cache">Clear offline cache</a></center>
   </footer>
-
   <form class="move-up" action="#up">
     <button><i class="fa fa-arrow-circle-o-up"></i></button>
   </form>