diff --git a/_config.yml b/_config.yml
index 7587df82..de55607b 100644
--- a/_config.yml
+++ b/_config.yml
@@ -28,6 +28,13 @@ defaults:
       path: ''
     values:
       layout: default
+
+page_gen:
+  - data: tags
+    template: tag
+    dir: tags
+    name: id
+
 markdown: kramdown
 empty_array: []
 recaptcha: 6LfZKnYUAAAAAJGg9r--abfv5A08TDORCmv4mGOx
diff --git a/_layouts/glossary.html b/_layouts/glossary.html
new file mode 100644
index 00000000..7447d6ef
--- /dev/null
+++ b/_layouts/glossary.html
@@ -0,0 +1,54 @@
+---
+layout: default
+---
+
+{% assign paragraphs = page.content | split: site.excerpt_separator %} {%
+include page.top.html %}
+<div class="container">
+  <div class="contents mt-5 mb-5" id="contents">
+    <section>
+      <h2 class="mb-3">Activities</h2>
+    </section>
+    <div class="row">
+      {% for item in site.data.activities %}
+      <div class="col-md-6 col-lg-4">
+        <div class="card">
+          <div class="card-body">
+            <h5 class="card-title">{{ item.displayname[page.lang] }}</h5>
+            <p class="card-tags">
+              <span class="label">
+                {% assign key=item.category %}{% include t.html %}
+              </span>
+            </p>
+            <p class="card-text">
+              {{item.definition[page.lang] | markdownify}}
+            </p>
+          </div>
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+    <section>
+      <h2 class="mb-3">Tags</h2>
+    </section>
+    <div class="row">
+      {% for item in site.data.tags %}
+      <div class="col-md-6 col-lg-4">
+        <div class="card">
+          <div class="card-body">
+            <h5 class="card-title">{{ item.displayname[page.lang] }}</h5>
+            <p class="card-tags">
+              <span class="label">
+                {% assign key=item.category %}{% include t.html %}
+              </span>
+            </p>
+            <p class="card-text">
+              {{item.definition[page.lang] | markdownify}}
+            </p>
+          </div>
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+</div>
diff --git a/_layouts/tag.html b/_layouts/tag.html
new file mode 100644
index 00000000..fc3c1e49
--- /dev/null
+++ b/_layouts/tag.html
@@ -0,0 +1,5 @@
+---
+layout: default
+---
+
+CICCIO BELLO
diff --git a/_layouts/tutorial.html b/_layouts/tutorial.html
new file mode 100644
index 00000000..39bae245
--- /dev/null
+++ b/_layouts/tutorial.html
@@ -0,0 +1,26 @@
+---
+layout: default
+---
+
+<!-- main container -->
+<div class="wrapper" style="min-height: 46%" ;>
+  <!-- background cover image-->
+  <div
+    class="in-the-background"
+    style="position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 0"
+  >
+    {% if page.cover.url %}
+    <div class="slide-background" style="background-size:cover;background-image:url({{cover_url}})"></div>
+    {% else %}
+    <div class="slide-background" />
+    {% endif %}
+    <div class="slide" style="display: block; opacity: 1">
+      <div class="overlay"></div>
+      <div class="overlay-dotted"></div>
+    </div>
+  </div>
+
+  <!-- title -->
+
+  <!-- authors -->
+</div>
\ No newline at end of file
diff --git a/_sass/includes/card.scss b/_sass/includes/card.scss
index 52430979..51cb8d68 100644
--- a/_sass/includes/card.scss
+++ b/_sass/includes/card.scss
@@ -2,12 +2,12 @@
   border-width: 0;
   border-radius: 0;
   margin-bottom: 20px;
-      border-top: 2px solid cyan;
+  border-top: 1px solid var(--secondary);
 
   .card-image-wrapper {
     padding-bottom: 57%;
     overflow: hidden;
-    position:relative;
+    position: relative;
     background-color: $magenta;
   }
 
@@ -16,14 +16,14 @@
     width: 100%;
     height: 100%;
 
-    background-size:cover;
+    background-size: cover;
     background-position: center;
 
     transition: transform 1s ease-in-out;
     transform: scale(1);
   }
 
-  .card-image:hover  {
+  .card-image:hover {
     transform: scale(1.1);
   }
 
@@ -35,11 +35,11 @@
     letter-spacing: 1px;
   }
 
-  .card-tags{
+  .card-tags {
     color: #8e8687;
   }
 
-  .label{
+  .label {
     color: magenta;
     text-transform: uppercase;
     font-size: 80%;
@@ -51,20 +51,19 @@
   }
 }
 
-
-.media{
+.media {
   //background: #e0e0e0;
 
-  .media-image{
+  .media-image {
     display: block;
     width: 150px;
-    background-size:cover;
+    background-size: cover;
     padding-bottom: 75%;
   }
-  h5{
+  h5 {
     margin-top: 1rem;
     font-weight: normal;
     font-size: inherit;
   }
-  font-size: .9em;
+  font-size: 0.9em;
 }
diff --git a/pages/glossary.de.md b/pages/glossary.de.md
new file mode 100644
index 00000000..3be3e15a
--- /dev/null
+++ b/pages/glossary.de.md
@@ -0,0 +1,11 @@
+---
+layout: glossary
+lang: de
+permalink: /de/glossary/
+link: /glossary/
+title: Glossar
+---
+
+{: .extra-spacing}
+
+<!-- more -->
diff --git a/pages/glossary.en.md b/pages/glossary.en.md
new file mode 100644
index 00000000..6c5ef410
--- /dev/null
+++ b/pages/glossary.en.md
@@ -0,0 +1,11 @@
+---
+layout: glossary
+lang: en
+permalink: /glossary/
+link: /glossary/
+title: Glossary
+---
+
+{: .extra-spacing}
+
+<!-- more -->
diff --git a/pages/glossary.fr.md b/pages/glossary.fr.md
new file mode 100644
index 00000000..67b8c8fb
--- /dev/null
+++ b/pages/glossary.fr.md
@@ -0,0 +1,11 @@
+---
+layout: glossary
+lang: fr
+permalink: /fr/glossary/
+link: /glossary/
+title: Glossaire
+---
+
+{: .extra-spacing}
+
+<!-- more -->