diff --git a/_pages/tjenester.md b/_pages/tjenester.md
index 8edd139..d9f8b6c 100644
--- a/_pages/tjenester.md
+++ b/_pages/tjenester.md
@@ -17,24 +17,97 @@ en uddybning af [hvad de forskellige badges dækker over](/tjenester/badges/).
 
 Hosting af [git-versionsstyringssystem](https://da.wikipedia.org/wiki/Git).
 
- * `+` [Sikker forbindelse](/tjenester/badges/#sikker-forbindelse)
- * `-` [Data opbevares _ikke_ krypteret](/tjenester/badges/#krypteret-opbevaring-af-data)
- * `-` [_Ikke_ omfattet af zero knowledge](/tjenester/badges/#zero-knowledge)
- * `-` [_Ingen_ backup af data](/tjenester/badges/#backup)
- * `-` [Der foretages logning](/tjenester/badges/#logning)
- * `/` [Anonym læseadgang](/tjenester/badges/#anonym-adgang)[1]
+#### Badges
+
+<ul class="badges">
+    <li>
+        <span class="badge badge-positive badge-secure-connection">Positiv:</span>
+        <a href="/tjenester/badges/#sikker-forbindelse">
+            Sikker forbindelse
+        </a>
+    </li>
+    <li>
+        <span class="badge badge-negative badge-encrypted-data-storage">Negativ:</span>
+        <a href="/tjenester/badges/#krypteret-opbevaring-af-data">
+            Data opbevares <em>ikke</em> krypteret
+        </a>
+    </li>
+    <li>
+        <span class="badge badge-negative badge-zero-knowledge">Negativ:</span>
+        <a href="/tjenester/badges/#zero-knowledge">
+            <em>Ikke</em> omfattet af zero knowledge
+        </a>
+    </li>
+    <li>
+        <span class="badge badge-negative badge-backup">Negativ:</span>
+        <a href="/tjenester/badges/#backup">
+            <em>Ingen</em> backup af data
+        </a>
+    </li>
+    <li>
+        <span class="badge badge-negative badge-logging">Negativ:</span>
+        <a href="/tjenester/badges/#logning">
+            Der foretages logning
+        </a>
+    </li>
+    <li>
+        <span class="badge badge-partial badge-anonymous-access">Delvis:</span>
+        <a href="/tjenester/badges/#anonym-adgang">
+            Anonym adgang
+        </a>[1]
+    </li>
+</ul>
+
+<p class="badge-notes">
+    [1] Offentligt tilgængelige repositories kan tilgås af alle, uden at være logget ind.
+</p>
 
-[1] Offentligt tilgængelige repositories kan tilgås af alle, uden at være logget ind.
 
 ### [Passit](https://passit.data.coop/)
 
 Password manager (kodeordshusker).
 
- * `+` [Sikker forbindelse](/tjenester/badges/#sikker-forbindelse)
- * `+` [Data opbevares krypteret](/tjenester/badges/#krypteret-opbevaring-af-data)
- * `+` [Omfattet af zero knowledge](/tjenester/badges/#zero-knowledge)[1]
- * `-` [_Ingen_ backup af data](/tjenester/badges/#backup)
- * `-` [Der foretages logning](/tjenester/badges/#logning)
- * `-` [Anonym læseadgang](/tjenester/badges/#anonym-adgang)
+#### Badges
 
-[1] Al brugerdata (navne, websites, kodeord, noter osv.) er krypteret så det kun er brugerne selv der kan tilgå deres data. Der foretages dog stadig logning af brugen af tjenesten, så helt 100% ZN er det ikke.
+<ul class="badges">
+    <li>
+        <span class="badge badge-positive badge-secure-connection">Positiv:</span>
+        <a href="/tjenester/badges/#sikker-forbindelse">
+            Sikker forbindelse
+        </a>
+    </li>
+    <li>
+        <span class="badge badge-positive badge-encrypted-data-storage">Positiv:</span>
+        <a href="/tjenester/badges/#krypteret-opbevaring-af-data">
+            Data opbevares krypteret
+        </a>
+    </li>
+    <li>
+        <span class="badge badge-partial badge-zero-knowledge">Delvis:</span>
+        <a href="/tjenester/badges/#zero-knowledge">
+            Omfattet af zero knowledge
+        </a>[1]
+    </li>
+    <li>
+        <span class="badge badge-negative badge-backup">Negativ:</span>
+        <a href="/tjenester/badges/#backup">
+            <em>Ingen</em> backup af data
+        </a>
+    </li>
+    <li>
+        <span class="badge badge-negative badge-logging">Negativ:</span>
+        <a href="/tjenester/badges/#logning">
+            Der foretages logning
+        </a>
+    </li>
+    <li>
+        <span class="badge badge-negative badge-anonymous-access">Negativ:</span>
+        <a href="/tjenester/badges/#anonym-adgang">
+            Der er <em>ikke</em> anonym adgang
+        </a>
+    </li>
+</ul>
+
+<p class="badge-notes">
+    [1] Al brugerdata (navne, websites, kodeord, noter osv.) er krypteret så det kun er brugerne selv der kan tilgå deres data. Der foretages dog stadig logning af brugen af tjenesten, så helt 100% ZN er det ikke.
+</p>