diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html
index a515b7d3fc252c122fb3a6dfbf78b91fc8dcb3a6..334d23883b42574a7c9e03165a98aaf3ae1f7e6a 100644
--- a/layouts/_default/terms.html
+++ b/layouts/_default/terms.html
@@ -11,4 +11,3 @@
   {{ end }}
 </ul>
 {{ end }}
-
diff --git a/layouts/shortcodes/postcards.html b/layouts/shortcodes/postcards.html
index 8413da8c45dc3dc8043fb29792bfa9f7a20e97cf..d445c0434246e6c70681312c04aee43ff243ff51 100644
--- a/layouts/shortcodes/postcards.html
+++ b/layouts/shortcodes/postcards.html
@@ -1,5 +1,6 @@
 <!-- For future posts -->
 <h3>Upcoming</h3>
+<link rel="stylesheet" href="{{ .Site.BaseURL }}css/postcard.css">
 {{ range ($.Page.CurrentSection.Pages.ByParam "endEventDate") }}
   {{ $FormattedNow := (now.AddDate 0 0 -1) }}
   {{ if le $FormattedNow .Params.eventEndDate }}
@@ -10,9 +11,19 @@
           {{ $numtags := len .Params.tags }}
 	  {{ if gt $numtags 0 }}
       <div class="tags">
-	    {{ range .Params.tags }}
-      <a href="{{ $.Site.BaseURL | absLangURL }}/tags/{{ lower . }}" class="tagbutton {{ . }}">{{ . }}</a>
-	    {{ end }}
+      {{ range .Params.tags }}
+        {{ $category_name := . }}
+        {{ $categories_color := $.Site.Params.categories_color }}
+        {{ if in $categories_color $category_name }} {{/* if tag_name is defined in categories_color */}}
+          {{ range $i, $tag_name := $categories_color }}
+            {{ if eq $tag_name $category_name }} 
+              <a href="{{ $.Site.BaseURL | absLangURL }}/tags/{{ lower $category_name }}/" class="tagbutton {{ index $categories_color (add $i 1) }}">{{ $category_name }}</a>
+            {{ end }}
+          {{ end }}
+          {{ else }}
+            <a href="{{ $.Site.BaseURL | absLangURL }}/tags/{{ lower $category_name }}/" class="tagbutton">{{ $category_name }}</a>
+        {{ end }}
+      {{ end }}
       </div>
 	  {{ end }}
 	</div>
@@ -22,10 +33,20 @@
           {{ $numtags := len .Params.tags }}
           {{ if gt $numtags 0 }}
       <div class="tags">
-	    {{ range .Params.tags }}
-	      <a href="{{ $.Site.BaseURL | relLangURL }}/tags/{{ lower . }}/" class="tagbutton {{ . }}">{{ . }}</a>
+      {{ range .Params.tags }}
+        {{ $category_name := . }}
+        {{ $categories_color := $.Site.Params.categories_color }}
+        {{ if in $categories_color $category_name }} {{/* if tag_name is defined in categories_color */}}
+          {{ range $i, $tag_name := $categories_color }}
+            {{ if eq $tag_name $category_name }} 
+              <a href="{{ $.Site.BaseURL | relLangURL }}/tags/{{ lower $category_name }}/" class="tagbutton {{ index $categories_color (add $i 1) }}">{{ $category_name }}</a>
+            {{ end }}
+          {{ end }}
+          {{ else }}
+            <a href="{{ $.Site.BaseURL | relLangURL }}/tags/{{ lower $category_name }}/" class="tagbutton">{{ $category_name }}</a>
         {{ end }}
-        </div>
+      {{ end }}
+      </div>
 	  {{ end }}
 	</div>
       {{ end }}
@@ -48,7 +69,17 @@
       {{ dateFormat "2 Jan, 2006" .Date }}
       <div class="tags">
       {{ range .Params.tags }}
-        <a href="{{ $.Site.BaseURL | relLangURL }}/tags/{{ lower . }}/" class="tagbutton {{ . }}">{{ . }}</a>
+        {{ $category_name := . }}
+        {{ $categories_color := $.Site.Params.categories_color }}
+        {{ if in $categories_color $category_name }} {{/* if tag_name is defined in categories_color */}}
+          {{ range $i, $tag_name := $categories_color }}
+            {{ if eq $tag_name $category_name }} 
+              <a href="{{ $.Site.BaseURL | relLangURL }}/tags/{{ lower $category_name }}/" class="tagbutton {{ index $categories_color (add $i 1) }}">{{ $category_name }}</a>
+            {{ end }}
+          {{ end }}
+          {{ else }}
+            <a href="{{ $.Site.BaseURL | relLangURL }}/tags/{{ lower $category_name }}/" class="tagbutton">{{ $category_name }}</a>
+        {{ end }}
       {{ end }}
       </div>
     </div>
diff --git a/static/css/postcard.css b/static/css/postcard.css
index f6c2fbe0810800957619e090db548706a8e05a1d..c54308ae1b94397fe09faed524220bbc8ac53ad0 100644
--- a/static/css/postcard.css
+++ b/static/css/postcard.css
@@ -1,3 +1,10 @@
+:root {
+  --gray-color: #808080;
+  --red-color: #8b0000;
+  --green-color: #2f4f4f;
+  --blue-color: #00008b;
+}
+
 .postcard {
   background-color: #fff;
   padding: 10px;
@@ -149,33 +156,43 @@
   border-radius: 8px;
   transition: .4s;
   text-decoration: none;
-  color:#8b0000;
-  border: solid 1px #8b0000;
+  color:var(--gray-color);
+  border: solid 1px var(--gray-color);
   transition: .4s;
 }
 
 .postcard div a.tagbutton:hover {
-  background-image: linear-gradient(45deg, #8b0000 0%, #b22222 100%);
+  background-image: linear-gradient(45deg, var(--gray-color) 0%, var(--gray-color) 100%);
   color: white;
 }
 
 .postcard div a.red {
-  color:#8b0000;
-  border: solid 1px #8b0000;
+  color:var(--red-color);
+  border: solid 1px var(--red-color);
 }
 
 .postcard div a.red:hover {
-  background-image: linear-gradient(45deg, #8b0000 0%, #b22222 100%);
+  background-image: linear-gradient(45deg, var(--red-color) 0%, var(--red-color) 100%);
+  color: white;
+}
+
+.postcard div a.blue{
+  color:var(--blue-color);
+  border: solid 1px var(--blue-color);
+}
+
+.postcard div a.blue:hover {
+  background-image: linear-gradient(45deg, var(--blue-color) 0%, var(--blue-color) 100%);
   color: white;
 }
 
-.postcard div a.Seminar {
-  color:#2f4f4f;
-  border: solid 1px #2f4f4f;
+.postcard div a.green{
+  color:var(--green-color);
+  border: solid 1px var(--green-color);
 }
 
-.postcard div a.Seminar:hover {
-  background-image: linear-gradient(45deg, #1d2d2d 0%, #2f4f4f 100%);
+.postcard div a.green:hover {
+  background-image: linear-gradient(45deg, var(--green-color) 0%, var(--green-color) 100%);
   color: white;
 }