diff --git a/_includes/roadmap_card.html b/_includes/roadmap_card.html
index 102ad07..a81fb7d 100644
--- a/_includes/roadmap_card.html
+++ b/_includes/roadmap_card.html
@@ -2,51 +2,74 @@
     <div class="block shadowthing p-8 rounded-lg">
       <div class="tabs">
         <div class="tab ">
-          <input class="dropinput" type="checkbox" id="chck1">
-          <label style="min-width: 90%; min-height: 150px; display: block;" class=" absolute" for="chck1">
+          <input class="dropinput" type="checkbox" id="card-{{ include.state }}-{{ forloop.index }}">
+          <label style="min-width: 90%; min-height: 150px; display: block;" class=" absolute" for="card-{{ include.state }}-{{ forloop.index }}">
             <img class="absolute right-0" style="margin-right: 1rem;" id="icon" src="{{ site.assets_url }}/icons/arrow.svg" alt="">
           </label>
           <div>
             <div class="flex">
-              <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium leading-5 bg-blue-100 text-blue-800 mr-2">
-                Portmaster
-              </span>
-              <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium leading-5 bg-green-100 text-green-800 mr-2">
-                Spn
-              </span>
+              {% for tag in card.projects %}
+                {% assign tag_bg_strength = 100 %}
+
+                {% if tag == 'Portmaster' %}
+                  {% assign tag_color = 'blue' %}
+                {% elsif tag == 'SPN' %}
+                  {% assign tag_color = 'green' %}
+                {% elsif tag == 'Website' %}
+                  {% assign tag_color = 'pink' %}
+                {% elsif tag == 'Backoffice' %}
+                  {% assign tag_color = 'gray' %}
+                  {% assign tag_bg_strength = 200 %}
+                {% elsif tag == 'Community' %}
+                  {% assign tag_color = 'purple' %}
+                {% elsif tag == 'Marketing' %}
+                  {% assign tag_color = 'orange' %}
+                {% endif %}
+
+                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium leading-5 bg-{{ tag_color }}-{{ tag_bg_strength }} text-{{ tag_color }}-800 mr-2">
+                  {{ tag }}
+
+                </span>
+              {% endfor %}
             </div>
             <div class="flex pt-6 items-center">
               <div>
-                <img style="min-width: 19px;" src="{{ site.assets_url }}icons/tick.svg" alt="">
-                  <!-- cross <img style="min-width: 19px;" src="{{ site.assets_url }}icons/cross.svg" alt=""> -->
-                  <!-- cross <img style="min-width: 19px;" src="{{ site.assets_url }}icons/files.svg" alt=""> -->
-                  <!-- cog <img style="min-width: 19px;" src="{{ site.assets_url }}icons/cog.svg" alt=""> -->
+                {% if include.state == 'done' %}
+                  <img style="min-width: 19px;" src="{{ site.assets_url }}icons/tick.svg" alt="">
+                {% elsif include.state == 'in_progress' %}
+                  <img style="min-width: 19px;" src="{{ site.assets_url }}icons/files.svg" alt="">
+                {% elsif include.state == 'discarded' %}
+                  <img style="min-width: 19px;" src="{{ site.assets_url }}icons/cross.svg" alt="">
+                {% elsif include.state == 'backlog' %}
+                  <img style="min-width: 19px;" src="{{ site.assets_url }}icons/cog.svg" alt="">
+                {% endif %}
               </div>
-              <h1 class="pl-3 font-bold text-lg">SPN Community Node Support</h1>
+              <h1 class="pl-3 font-bold text-lg">{{ card.title }}</h1>
             </div>
           </div>
           <div style="padding-left: 0;" class="tab-content  opacity-50 text-md">
-            All details will be finished to fully support community 
-            nodes in the network. (This does not include the planned
-            compensation for running a node.) There will be a website
-            to easily get you started.
+            {% for paragraph in card.description %}
+              <p>{{ paragraph }}</p>
+              {% unless forloop.last %}
+                <br/>
+              {% endunless %}
+            {% endfor %}
           </div>
         </div>
         <div class="pt-3">
           <hr>
-          <div class="flex relative pb-2 pt-6 -mt-1">
-            <span style="font-size: 0.8rem;">#866 opened by <strong>BinaryMuse</strong> to atom/github</span>
+          <div class="flex relative pb-2 pt-6 -mt-1" style="min-height: 16px;">
+            <span style="font-size: 0.8rem;">
+              {% if card.link %}
+              #866 opened by <strong>BinaryMuse</strong> to atom/github
+              {% endif %}
+            </span>
             <div class="absolute right-0">
               <div class="flex-shrink-0 mt-0">
                 <div class="flex overflow-hidden">
-                  <img class="inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="http://localhost:4000/assets/img/profiles/raphael.png" alt="">
-                  <img class="-ml-1 inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="http://localhost:4000/assets/img/profiles/daniel.png" alt="">
-                  <img class="-ml-1 inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="http://localhost:4000/assets/img/profiles/patrick.png" alt="">
-                  <!-- <img class="-ml-1 inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="http://localhost:4000/assets/img/profiles/tabitha.png" alt="">
-                  <img class="-ml-1 inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="http://localhost:4000/assets/img/profiles/luke.png" alt="">
-                  <img class="-ml-1 inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="http://localhost:4000/assets/img/profiles/alex.png" alt="">
-                  <img class="-ml-1 inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="http://localhost:4000/assets/img/profiles/martin.png" alt="">
-                  <img class="-ml-1 inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="http://localhost:4000/assets/img/profiles/david.png" alt=""> -->
+                  {% for member in card.team %}
+                    <img class="inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="{{ site.img_url }}profiles/{{ member | downcase }}.png" alt="{{ member }}">
+                  {% endfor %}
                 </div>
               </div>
             </div>
@@ -55,4 +78,3 @@
       </div>
     </div>
   </div>
-  
\ No newline at end of file
diff --git a/roadmap/index.html b/roadmap/index.html
index 1ee90d2..d075ae2 100644
--- a/roadmap/index.html
+++ b/roadmap/index.html
@@ -5,129 +5,135 @@ layout: page
 
 <section style="margin-top: 12rem; margin-bottom: 8rem;" class="mb-40">
   <div class="items-center h-full">
-    <div>
-      <div>
-          <div class="relative max-w-screen-sm lg:max-w-screen-xl mx-auto px-4 sm:px-6  xl:px-0 lg:flex">
-            <div class=" pt-8">
-              <div class="text-center lg:text-left">
-                <span class="text-sm opacity-55 tracking-normal">20.04.2020</span>
-                <h2 id="influences" class="text-5xl tracking-tight font-extrabold leading-none pb-10 pt-2">
-                  Monthly Progress
-                </h2>
-                <p class="text-md opacity-55 max-w-lg mx-auto">
-                  We find it very hard to say what the ufutre will be. So we have
-                  created our own roadmap to show what we plan doing what we are working.
-                </p>
-              </div>
-              <!-- <div class="pt-10 flex transform scale-110 ml-5 mx-auto justify-center lg:justify-start">
-                <div class="flex">
-                  <div class="flex-1 pr-2">
-                    <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium leading-5 bg-blue-100 text-blue-800">
-                      Portmaster
-                    </span>
-                  </div>
-                  <div class="flex-1 pr-2">
-                    <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium leading-5 bg-green-100 text-green-800">
-                      Spn
-                    </span>
-                  </div>
-                  <div class="flex-1 pr-2">
-                    <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium leading-5 bg-red-100 text-red-800">
-                      Organization
-                    </span>
-                  </div>
-                </div>
-              </div>-->
-            </div>
-            <div class="relative mt-24 lg:mt-0 lg:absolute lg:right-0 lg:mr-10">
-              <div class="mx-auto max-w-xs transform hover:scale-95 duration-150 ease-in-out">
-                <a href="/roadmapblog/">
-                  <div class="relative" style="max-width: 365px;">
-                      <img src="/assets/img/thumbnails/blog/progress-update.png">
-                    <span class="absolute text-white right-0 bottom-0 pr-3 pb-3" style="font-size: 3.1rem; font-weight: 800;">#01</span>
-                  </div>
-                  <div class="pt-6 max-w-xs">
-                    <span class="opacity-25">
-                    26. Jun 2020
-                    </span>
-                    <p>Progress Update June - #01</p>
-                  </div>
-                </a>
-              </div>
-            </div>
-            </div>
-          </div>
-        <div class="pt-48">
-          <div class="gridwrapper">
-            <div style="margin-top: -3rem;" class="flex absolute pl-8 ">
-              <span class="opacity-50">Recently Done</span>
-              <strong class="pl-2 opacity-75">(3)</strong>
-            </div>
-              {% include roadmap_card.html %}
-              {% include roadmap_card.html %}
-            </div>
-          </div>
+    <div class="relative max-w-screen-sm lg:max-w-screen-xl mx-auto px-4 sm:px-6  xl:px-0 lg:flex">
+      <div class="pt-8">
+        <div class="text-center lg:text-left">
+          <span class="text-sm opacity-55 tracking-normal">20.04.2020</span>
+          <h2 id="influences" class="text-5xl tracking-tight font-extrabold leading-none pb-10 pt-2">
+            Monthly Progress
+          </h2>
+          <p class="text-md opacity-55 max-w-lg mx-auto">
+            We find it very hard to say what the ufutre will be. So we have
+            created our own roadmap to show what we plan doing what we are working.
+          </p>
         </div>
-        <div class="pt-48">
-          <div class="gridwrapper">
-            <div style="margin-top: -3rem;" class="flex absolute pl-8 ">
-              <span class="opacity-50">In Progress</span>
-              <strong class="pl-2 opacity-75">(3)</strong>
+        <!-- <div class="pt-10 flex transform scale-110 ml-5 mx-auto justify-center lg:justify-start">
+          <div class="flex">
+            <div class="flex-1 pr-2">
+              <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium leading-5 bg-blue-100 text-blue-800">
+                Portmaster
+              </span>
             </div>
-              {% include roadmap_card.html %}
-              {% include roadmap_card.html %}
-              {% include roadmap_card.html %}
-              {% include roadmap_card.html %}
+            <div class="flex-1 pr-2">
+              <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium leading-5 bg-green-100 text-green-800">
+                Spn
+              </span>
+            </div>
+            <div class="flex-1 pr-2">
+              <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium leading-5 bg-red-100 text-red-800">
+                Organization
+              </span>
             </div>
           </div>
-        </div>
-        <div class="pt-48">
-          <div class="gridwrapper">
-            <div style="margin-top: -3rem;" class="flex absolute pl-8 ">
-              <span class="opacity-50">Abandoned</span>
-              <strong class="pl-2 opacity-75">(3)</strong>
+        </div>-->
+      </div>
+      <div class="relative mt-24 lg:mt-0 lg:absolute lg:right-0 lg:mr-10">
+        <div class="mx-auto max-w-xs transform hover:scale-95 duration-150 ease-in-out">
+          <a href="/roadmapblog/">
+            <div class="relative" style="max-width: 365px;">
+                <img src="/assets/img/thumbnails/blog/progress-update.png">
+              <span class="absolute text-white right-0 bottom-0 pr-3 pb-3" style="font-size: 3.1rem; font-weight: 800;">#01</span>
             </div>
-              {% include roadmap_card.html %}
+            <div class="pt-6 max-w-xs">
+              <span class="opacity-25">
+              26. Jun 2020
+              </span>
+              <p>Progress Update June - #01</p>
             </div>
-          </div>
+          </a>
         </div>
+      </div>
     </div>
   </div>
+
+  {% if site.data.next.cards.done.size > 0 %}
+    <div class="pt-48">
+      <div class="gridwrapper">
+        <div style="margin-top: -3rem;" class="flex absolute pl-8 ">
+          <span class="opacity-50">Recently Done</span>
+          <strong class="pl-2 opacity-75">({{ site.data.next.cards.done.size }})</strong>
+        </div>
+        {% for card in site.data.next.cards.done %}
+          {% include roadmap_card.html state = 'done' %}
+        {% endfor %}
+      </div>
+    </div>
+  {% endif %}
+
+  {% if site.data.next.cards.in_progress.size > 0 %}
+    <div class="pt-48">
+      <div class="gridwrapper">
+        <div style="margin-top: -3rem;" class="flex absolute pl-8 ">
+          <span class="opacity-50">In Progress</span>
+          <strong class="pl-2 opacity-75">({{ site.data.next.cards.in_progress.size }})</strong>
+        </div>
+
+        {% for card in site.data.next.cards.in_progress %}
+          {% include roadmap_card.html state = 'in_progress' %}
+        {% endfor %}
+      </div>
+    </div>
+  {% endif %}
+
+  {% if site.data.next.cards.discarded.size > 0 %}
+    <div class="pt-48">
+      <div class="gridwrapper">
+        <div style="margin-top: -3rem;" class="flex absolute pl-8 ">
+          <span class="opacity-50">Discarded</span>
+          <strong class="pl-2 opacity-75">({{ site.data.next.cards.discarded.size }})</strong>
+        </div>
+
+        {% for card in site.data.next.cards.discarded %}
+          {% include roadmap_card.html state = 'discarded' %}
+        {% endfor %}
+      </div>
+    </div>
+  {% endif %}
 </section>
 <section class="mt-20 lg:mt-40 mb-16 lg:mb-48">
-  <div class="items-center h-full">
-    <div class="container mx-auto px-8 sm:px-0 flex">
-      <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto">
-        <div class="pb-16 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center">
-          <img src="{{ site.img_url }}page-specific/roadmap/files.png" alt="">
-        </div>
-        <div class="inline-block max-w-lg">
-          <h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-auto">
-            A list of stuff that we 
-            plan to work on
-          </h2>
-          <p class="text-md opacity-55 max-w-lg">
-            Taking money always means opening up to influences. Therefore, we see it as our duty to not only be open about our ownership, but also about how we are financing this venture.
-          </p>
-          <div class="py-10 flex">
-            <a href="{{ site.backlog_url }}">
-              <button type="button" style="background-color: #000;" class="transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
-                Backlog
-              </button>
-            </a>
-          </div>
-        </div>
-        <div class="hidden pt-16 lg:pt-0 ml-0 lg:ml-32 lg:block self-center">
-          <img src="{{ site.img_url }}page-specific/roadmap/files.png" alt="">
+<div class="items-center h-full">
+  <div class="container mx-auto px-8 sm:px-0 flex">
+    <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto">
+      <div class="pb-16 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center">
+        <img src="{{ site.img_url }}page-specific/roadmap/files.png" alt="">
+      </div>
+      <div class="inline-block max-w-lg">
+        <h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-auto">
+          A list of stuff that we
+          plan to work on
+        </h2>
+        <p class="text-md opacity-55 max-w-lg">
+          Taking money always means opening up to influences. Therefore, we see it as our duty to not only be open about our ownership, but also about how we are financing this venture.
+        </p>
+        <div class="py-10 flex">
+          <a href="{{ site.backlog_url }}">
+            <button type="button" style="background-color: #000;" class="transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
+              Backlog
+            </button>
+          </a>
         </div>
       </div>
+      <div class="hidden pt-16 lg:pt-0 ml-0 lg:ml-32 lg:block self-center">
+        <img src="{{ site.img_url }}page-specific/roadmap/files.png" alt="">
+      </div>
+      </div>
     </div>
   </div>
 </section>
 
 
-<!-- 
-  this is only for the roadmap. 
+<!--
+  this is only for the roadmap.
   Luke will clean this at a later date.
 -->
 <style>
@@ -150,17 +156,17 @@ layout: page
     box-shadow: 0 0px 90px 0 rgba(59, 93, 199, 0.1), 0 0px 5px 0 rgba(0, 0, 0, 0);
   }
 
-  @media (min-width: 768px) { 
-    
+  @media (min-width: 768px) {
+
    }
 
-  @media (min-width: 640px) { 
+  @media (min-width: 640px) {
     .gridwrapper{
       grid-template-columns: repeat(1, auto);
     }
   }
 
-  @media (min-width: 1024px) { 
+  @media (min-width: 1024px) {
     .gridwrapper{
       grid-template-columns: repeat(3, minmax(auto, 445px));
     }
@@ -171,5 +177,3 @@ layout: page
   }
 
 </style>
-
-