diff --git a/jgiven-examples/src/test/java/com/tngtech/jgiven/examples/annotation/Order.java b/jgiven-examples/src/test/java/com/tngtech/jgiven/examples/annotation/Order.java
new file mode 100644
index 0000000000..011c64ca41
--- /dev/null
+++ b/jgiven-examples/src/test/java/com/tngtech/jgiven/examples/annotation/Order.java
@@ -0,0 +1,15 @@
+package com.tngtech.jgiven.examples.annotation;
+
+import java.lang.annotation.Retention;
+import java.lang.annotation.RetentionPolicy;
+
+import com.tngtech.jgiven.annotation.IsTag;
+
+/**
+ * Used to be able to sort scenarios in the HMTL5 report
+ */
+@IsTag( cssClass = "hidden" )
+@Retention( RetentionPolicy.RUNTIME )
+public @interface Order {
+    String value();
+}
diff --git a/jgiven-examples/src/test/java/com/tngtech/jgiven/examples/coffeemachine/ServeCoffeeTest.java b/jgiven-examples/src/test/java/com/tngtech/jgiven/examples/coffeemachine/ServeCoffeeTest.java
index 8122e07760..bd6b62eb98 100644
--- a/jgiven-examples/src/test/java/com/tngtech/jgiven/examples/coffeemachine/ServeCoffeeTest.java
+++ b/jgiven-examples/src/test/java/com/tngtech/jgiven/examples/coffeemachine/ServeCoffeeTest.java
@@ -6,6 +6,7 @@
 import com.tngtech.java.junit.dataprovider.DataProvider;
 import com.tngtech.java.junit.dataprovider.DataProviderRunner;
 import com.tngtech.jgiven.annotation.Description;
+import com.tngtech.jgiven.examples.annotation.Order;
 import com.tngtech.jgiven.examples.coffeemachine.steps.GivenCoffee;
 import com.tngtech.jgiven.examples.coffeemachine.steps.ThenCoffee;
 import com.tngtech.jgiven.examples.coffeemachine.steps.WhenCoffee;
@@ -24,6 +25,7 @@
 public class ServeCoffeeTest extends ScenarioTest<GivenCoffee, WhenCoffee, ThenCoffee> {
 
     @Test
+    @Order( "1" )
     public void an_empty_coffee_machine_cannot_serve_any_coffee() throws Exception {
 
         given().an_empty_coffee_machine();
@@ -36,6 +38,7 @@ public void an_empty_coffee_machine_cannot_serve_any_coffee() throws Exception {
     }
 
     @Test
+    @Order( "2" )
     public void no_coffee_left_error_is_shown_when_there_is_no_coffee_left() {
         given().an_empty_coffee_machine();
         when().I_insert_$_one_euro_coins( 5 )
@@ -44,6 +47,7 @@ public void no_coffee_left_error_is_shown_when_there_is_no_coffee_left() {
     }
 
     @Test
+    @Order( "3" )
     public void not_enough_money_message_is_shown_when_insufficient_money_was_given() throws Exception {
 
         given().a_coffee_machine()
diff --git a/jgiven-html5-report/src/app/css/jgivenreport.css b/jgiven-html5-report/src/app/css/jgivenreport.css
index 44d9c639f5..cf0310535e 100644
--- a/jgiven-html5-report/src/app/css/jgivenreport.css
+++ b/jgiven-html5-report/src/app/css/jgivenreport.css
@@ -38,6 +38,10 @@ ul.tags {
     list-style: none;
 }
 
+.tag.hidden {
+    display: none;
+}
+
 .title {
     position: relative;
     border-bottom: 1px solid #ddd;
diff --git a/jgiven-html5-report/src/app/index.html b/jgiven-html5-report/src/app/index.html
index 89ace19ce0..05ff64f731 100644
--- a/jgiven-html5-report/src/app/index.html
+++ b/jgiven-html5-report/src/app/index.html
@@ -385,7 +385,7 @@ <h6>Cases</h6>
                 </div>
                 <div class="small-12 large-4 xlarge-6 column tag-column">
                   <span  ng-repeat="tag in scenario.tags" >
-                    <a href="#tag/{{tag.name + '/' + tag.value | encodeUri}}" ><span class="radius label tag {{getCssClassOfTag(tag)}}" style='{{getStyleOfTag(tag)}}'>{{tagToString(tag)}}</span></a>
+                    <a href="#tag/{{tag.name + '/' + tag.value | encodeUri}}" ><span class="{{getCssClassOfTag(tag)}} radius label tag" style='{{getStyleOfTag(tag)}}'>{{tagToString(tag)}}</span></a>
                   </span>
                 </div>
               </div>