diff --git a/Lora-Map/Lora-Map.csproj b/Lora-Map/Lora-Map.csproj
index 956e965..af91716 100644
--- a/Lora-Map/Lora-Map.csproj
+++ b/Lora-Map/Lora-Map.csproj
@@ -102,6 +102,9 @@
     <Content Include="resources\css\icons\failtile.png">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
+    <Content Include="resources\css\icons\filter.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
     <Content Include="resources\css\icons\information.png">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
diff --git a/Lora-Map/Model/WeatherWarnings.cs b/Lora-Map/Model/WeatherWarnings.cs
index 4b855bf..7050318 100644
--- a/Lora-Map/Model/WeatherWarnings.cs
+++ b/Lora-Map/Model/WeatherWarnings.cs
@@ -50,7 +50,7 @@ namespace Fraunhofer.Fit.IoT.LoraMap.Model {
         this.From = warning["properties"]["SENT"].ToString();
         this.To = warning["properties"]["EXPIRES"].ToString();
         this.Location = warning["properties"]["NAME"].ToString();
-        this.Type = warning["properties"]["EVENT"].ToString();
+        this.Type = warning["properties"]["EVENT"].ToString().ToLower();
         this.Level = warning["properties"]["SEVERITY"].ToString().ToLower();
         this.Headline = warning["properties"]["HEADLINE"].ToString();
         this.Body = warning["properties"]["DESCRIPTION"].ToString();
diff --git a/Lora-Map/resources/css/global.css b/Lora-Map/resources/css/global.css
index 24f1a65..02e9a0f 100644
--- a/Lora-Map/resources/css/global.css
+++ b/Lora-Map/resources/css/global.css
@@ -59,6 +59,9 @@ object {
 #menucollumn .pos {
   background-image: url("icons/placeholder.png");
 }
+#menucollumn .filter {
+  background-image: url("icons/filter.png");
+}
 #menucollumn .admin {
   background-image: url("icons/admin-with-cogwheels.png");
 }
@@ -220,6 +223,7 @@ margin: 4px;
 }
 #pannels #pannels_weather .alertitem {
   padding: 5px;
+  margin-bottom: 10px;
 }
 #pannels #pannels_weather .alertitem.minor {
   background-color: #ffeb3b;
@@ -233,6 +237,9 @@ margin: 4px;
 #pannels #pannels_weather .alertitem.extreme {
   background-color: #880e4f;
 }
+#pannels #pannels_weather .alertitem.hitze {
+  background-color: #c9f;
+}
 #pannels #pannels_weather .alertitem .head {
   font-weight: bold;
   display: block;
diff --git a/Lora-Map/resources/css/icons/filter.png b/Lora-Map/resources/css/icons/filter.png
new file mode 100644
index 0000000..1884276
Binary files /dev/null and b/Lora-Map/resources/css/icons/filter.png differ
diff --git a/Lora-Map/resources/index.html b/Lora-Map/resources/index.html
index d04c16c..a8ca4c2 100644
--- a/Lora-Map/resources/index.html
+++ b/Lora-Map/resources/index.html
@@ -54,6 +54,7 @@
           <li><a href="https://www.freepik.com/" title="Freepik">Freepik</a> licensed <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></li>
           <li><a href="http://www.famfamfam.com/about/" title="Silk Iconset">Silk Iconset</a> licensed <a href="http://creativecommons.org/licenses/by/2.5/" title="Creative Commons BY 2.5" target="_blank">CC 2.5 BY</a></li>
           <li><a href="https://www.flaticon.com/authors/those-icons" title="Those Icons">Those Icons</a> licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></li>
+          <li><a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></li>
         </ul>
       </div>
     </div>
diff --git a/Lora-Map/resources/js/menu.js b/Lora-Map/resources/js/menu.js
index 4140b23..325a1c7 100644
--- a/Lora-Map/resources/js/menu.js
+++ b/Lora-Map/resources/js/menu.js
@@ -169,11 +169,17 @@
       var html = "";
       for (var i = 0; i < json.length; i++) {
         var walert = json[i];
-        html += "<div class='alertitem " + walert.Level + "'>" +
+        html += "<div class='alertitem " + walert.Level +" "+ walert.Type + "'>" +
           "<span class='head'>" + walert.Headline + "</span>" +
           "<span class='ort'>" + walert.Location + "</span>" +
           "<span class='text'>" + walert.Body + (walert.Instructions != "" ? "<br><br>" + walert.Instructions : "") + "</span>" +
-          "<span class='time'><b>Von:</b> vor " + FunctionsObject.TimeCalculation(walert.From, "difftext") + " <b>Bis:</b> in " + FunctionsObject.TimeCalculation(walert.To, "difftextn") + "</span>" +
+          "<span class='time'><b>Von:</b> ";
+        if (FunctionsObject.TimeCalculation(walert.From, "diffraw") < 0) {
+          html += "in " + FunctionsObject.TimeCalculation(walert.From, "difftextn");
+        } else {
+          html += "vor " + FunctionsObject.TimeCalculation(walert.From, "difftext");
+        }
+        html += " <b>Bis:</b> in " + FunctionsObject.TimeCalculation(walert.To, "difftextn") + "</span>" +
           "</div>";
       }
       document.getElementById("pannels_weather").innerHTML = html;