diff --git a/Layout/default/Pipework/Index.php b/Layout/default/Pipework/Index.php
index fa4df1efb..7beed1813 100644
--- a/Layout/default/Pipework/Index.php
+++ b/Layout/default/Pipework/Index.php
@@ -21,6 +21,15 @@
     <div class="row">
       <div class="col-lg-12">
         
+        <div class="card">
+          <div class="card-body mb-3">
+            <h4 class="header-title mb-3">Filter</h4>
+            
+            
+            
+          </div>
+        </div>
+        
         <div class="card">
           <div class="card-body mb-3">
             <h4 class="header-title mb-3">Auftragsliste nach Netzgebiet</h4>
diff --git a/Layout/default/Workflow/items/color.php b/Layout/default/Workflow/items/color.php
index d31ee1ffe..dc340d968 100644
--- a/Layout/default/Workflow/items/color.php
+++ b/Layout/default/Workflow/items/color.php
@@ -15,6 +15,24 @@
 <script type="text/javascript">
   $('#wfitem_<?=$item->name?>_<?=$building->id?>').change(function() {
     var color = $('#wfitem_<?=$item->name?>_<?=$building->id?> option:selected').data("bg-color");
-    //console.log(color);
+    var name = $('#wfitem_<?=$item->name?>_<?=$building->id?> option:selected').val();
+    $("wfitem_<?=$item->name?>_<?=$building->id?>").data("style", "btn-danger");
+    console.log("button [data-id='wfitem_<?=$item->name?>_<?=$building->id?>']");
+    console.log($("button [data-id='wfitem_<?=$item->name?>_<?=$building->id?>']"));
+    
+    var matches;
+    if(matches = name.match(/^(.+)-1R$/)) {
+      name = matches[1];
+    }
+    
+    $("[data-id='wfitem_<?=$item->name?>_<?=$building->id?>']").removeClass(function (index, className) {
+      console.log(className);
+      return (className.match (/(^|\s)btn-outline-\S+/g) || []).join(' ');
+    });
+    
+    $("[data-id='wfitem_<?=$item->name?>_<?=$building->id?>']").addClass("btn-outline-" + name)
+    
+    console.log(color);
+    console.log(name);
   });
 </script>
\ No newline at end of file
diff --git a/public/assets/css/thetool.css b/public/assets/css/thetool.css
index 66c1ef6b0..5a4e3d84f 100644
--- a/public/assets/css/thetool.css
+++ b/public/assets/css/thetool.css
@@ -133,4 +133,68 @@ td.controls {
 .flash-bg {
   background-color: yellow !important;
   color: yellow;
+}
+
+.btn-outline-rot {
+  color: #FF0000;
+  border-color: #FF0000;
+}
+
+.btn-outline-gruen {
+  color: #00FF00;
+  border-color: #00FF00;
+  background-color: #555;
+}
+
+.btn-outline-blau {
+  color: #0000FF;
+  border-color: #0000FF;
+}
+
+.btn-outline-gelb {
+  color: #FFFF00;
+  border-color: #FFFF00;
+  background-color: #555;
+}
+
+.btn-outline-weiss {
+  color: #FFFFFF;
+  border-color: #FFFFFF
+  background-color: #555;
+}
+
+.btn-outline-grau {
+  color: #888888;
+  border-color: #888888;
+}
+
+.btn-outline-braun {
+  color: #A52A2A;
+  border-color: #A52A2A;
+}
+
+.btn-outline-violett {
+  color: #8800FF;
+  border-color: #8800FF;
+}
+
+.btn-outline-tuerkis {
+  color: #00FFFF;
+  border-color: #00FFFF;
+  background-color: #555;
+}
+
+.btn-outline-schwarz {
+  color: #000000;
+  border-color: #000000;
+}
+
+.btn-outline-orange {
+  color: #FF8800;
+  border-color: #FF8800;
+}
+
+.btn-outline-rosa {
+  color: #FF0088;
+  border-color: #FF0088;
 }
\ No newline at end of file