diff --git a/_includes/project_tablecard.html b/_includes/project_tablecard.html
index 0b20715..e5f7e33 100644
--- a/_includes/project_tablecard.html
+++ b/_includes/project_tablecard.html
@@ -2,8 +2,8 @@
     <div class="block shadowthing px-8 py-6 rounded-lg">
       <div class="tabs">
         <div class="tab relative">
-          <input class="dropinput" type="checkbox" id="chck1">
-          <label style="min-width: 100%; min-height: 115px; display: block;" class="z-10 absolute cursor-pointer" for="chck1">
+          <input class="dropinput" type="checkbox" id="tablecard-{{ include.state }}-{{ forloop.index }}">
+          <label style="min-width: 100%; min-height: 115px; display: block;" class="z-10 absolute cursor-pointer" for="tablecard-{{ include.state }}-{{ forloop.index }}">
             <img class="absolute right-0" style="margin-right: 1rem; margin-top: 1.2rem;" id="icon" src="{{ site.assets_url }}/icons/arrow.svg" alt="">
           </label>
           <div class="flex relative ">
@@ -11,35 +11,51 @@
               <div class="absolute right-0 mr-12 transform scale-110">
                   <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>
             </div>
             <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-3 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/cog.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/files.svg" alt="">
+                  {% endif %}
                 </div>
-                <h1 class="pl-3 font-bold text-lg">SPN Community Node Support will be releaced</h1>
+                <h1 class="pl-3 font-bold text-lg">{{ card.title }}</h1>
               </div>
             </div>
           </div>
@@ -47,8 +63,8 @@
             <div class="block py-3">
               <hr>
             <div class="tab relative" id="tabtwo">
-              <input class="dropinput" type="checkbox" id="chck2">
-              <label style="min-width: 100%; min-height: 115px; display: block;" class="z-10 absolute" for="chck2">
+              <input class="dropinput" type="checkbox" id="tablecard-description-{{ include.state }}-{{ forloop.index }}">
+              <label style="min-width: 100%; min-height: 115px; display: block;" class="z-10 absolute" for="tablecard-description-{{ include.state }}-{{ forloop.index }}">
                 <img class="absolute right-0" style="margin-right: 1rem; margin-top: 0.5rem;" id="icontwo" src="{{ site.assets_url }}/icons/arrow.svg" alt="">
               </label>
               <div class="flex relative">
@@ -65,13 +81,12 @@
                   </div>
                 </div>
               </div>
-            <div style="padding-left: 3; padding-right: 1em; padding-top: 0;"  class="tab-content  text-md">
-            <p class="">
-              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.
-            </p>
+            <div style="padding-left: 3; padding-right: 1em; padding-top: 0;"  class="tab-content text-md">
+              <p>
+                {% for paragraph in card.description %}
+                  {{ paragraph }}
+                {% endfor %}
+              </p>
           </div>
         </div>
         <hr>
diff --git a/roadmapblog/index.html b/roadmapblog/index.html
index 47f390e..4dfa02a 100644
--- a/roadmapblog/index.html
+++ b/roadmapblog/index.html
@@ -26,36 +26,47 @@ layout: page
                 </div>
               </div>
               <div class="pt-24">
-                <div class="pt-12">
-                  <div style="max-width: 750px; margin-top: 3rem; margin: auto;">
-                    <h3 >Completed</h3>
-                    <p>This is a list of the tasks we have completed in this month time frame. If you wish to find more about each task, click them have a read.</p>
+                {% if site.data.next.cards.done.size > 0 %}
+                  <div class="pt-12">
+                    <div style="max-width: 750px; margin-top: 3rem; margin: auto;">
+                      <h3 >Completed</h3>
+                      <p>This is a list of the tasks we have completed in this month time frame. If you wish to find more about each task, click them have a read.</p>
+                    </div>
+                    <div class="pt-10 gridwrapper">
+                      {% for card in site.data.next.cards.done %}
+                        {% include project_tablecard.html state = 'done' %}
+                      {% endfor %}
+                    </div>
                   </div>
-                  <div class="pt-10 gridwrapper">
-                    {% include project_tablecard.html %}
-                    {% include project_tablecard.html %}
-                    {% include project_tablecard.html %}
-                  </div>
-                </div>
-                <div class="pt-12">
-                  <div style="max-width: 750px; margin-top: 3rem; margin: auto;">
-                    <h3 >In Progress</h3>
-                    <p>This is a list of the tasks we have completed in this month time frame. If you wish to find more about each task, click them have a read.</p>
-                  </div>
-                  <div class="pt-10">
-                    {% include project_tablecard.html %}
-                  </div>
-                </div>
-                <div class="pt-12">
-                  <div style="max-width: 750px; margin-top: 3rem; margin: auto;">
-                    <h3 >Abandoned</h3>
-                    <p>This is a list of the tasks we have completed in this month time frame. If you wish to find more about each task, click them have a read.</p>
-                  </div>
-                  <div class="pt-10">
-                    {% include project_tablecard.html %}
-                  </div>
-                </div>
+                {% endif %}
 
+                {% if site.data.next.cards.in_progress.size > 0 %}
+                  <div class="pt-12">
+                    <div style="max-width: 750px; margin-top: 3rem; margin: auto;">
+                      <h3 >In Progress</h3>
+                      <p>This is a list of the tasks we have completed in this month time frame. If you wish to find more about each task, click them have a read.</p>
+                    </div>
+                    <div class="pt-10">
+                      {% for card in site.data.next.cards.in_progress %}
+                        {% include project_tablecard.html state = 'in_progress' %}
+                      {% endfor %}
+                    </div>
+                  </div>
+                {% endif %}
+
+                {% if site.data.next.cards.discarded.size > 0 %}
+                  <div class="pt-12">
+                    <div style="max-width: 750px; margin-top: 3rem; margin: auto;">
+                      <h3 >Discarded</h3>
+                      <p>This is a list of the tasks we have completed in this month time frame. If you wish to find more about each task, click them have a read.</p>
+                    </div>
+                    <div class="pt-10">
+                      {% for card in site.data.next.cards.discarded %}
+                        {% include project_tablecard.html state = 'discarded' %}
+                      {% endfor %}
+                    </div>
+                  </div>
+                {% endif %}
               </div>
             </content>
           </div>