diff --git a/content/decentral_messaging/_index.md b/content/decentral_messaging/_index.md
index 705484a..442a430 100644
--- a/content/decentral_messaging/_index.md
+++ b/content/decentral_messaging/_index.md
@@ -25,23 +25,31 @@ outputs:
 ---
 
 ## Dezentralität
-- **Peer-to-Peer**
-
-Geräte tauschen direkt miteinander Nachrichten aus (ohne eine zentrale Componente)
-
 - **Federation**
 
 Kommunikation über verschieden unabhängige zentrale Komponenten
 
+<img src="./img/federation.svg" style="border: none; background:transparent;" />
+
+{{% note %}}
+**Federation**
+- E-Mail (ISP: benutzer@hoster.de)
+- Telefonnummern (Addr: hat oftmals die ersten Ziffern für sich reserviert)
+{{% /note %}}
+
+---
+
+## Dezentralität
+- **Peer-to-Peer**
+
+Geräte tauschen direkt miteinander Nachrichten aus (ohne eine zentrale Componente)
+
+<img src="./img/p2p.svg" style="border: none; background:transparent;" />
 
 {{% note %}}
 **P2P**
 - Postkasten, jeder kann zum Empfänger gehen und selbst etwas in den Kasten werfen.
   (wenn es keine Post gibt)
-
-**Federation**
-- E-Mail (ISP: benutzer@hoster.de)
-- Telefonnummern (Addr: hat oftmals die ersten Ziffern für sich reserviert)
 {{% /note %}}
 
 ---
diff --git a/static/decentral_messaging/img/federation.svg b/static/decentral_messaging/img/federation.svg
new file mode 100644
index 0000000..cfdb128
--- /dev/null
+++ b/static/decentral_messaging/img/federation.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="200" width="190">
+  <circle  cx="62"  cy="50" r="15" fill="white" />
+  <circle  cx="20" cy="80"  r="15" fill="white" />
+  <line    x1="62"  y1="50"   x2="70" y2="100" stroke="white"/>
+  <line    x1="20"  y1="80"   x2="70" y2="100" stroke="white"/>
+  <rect     x="55"  y="85"  width="30" height="30" fill="white" />
+
+
+  <circle  cx="125" cy="40"  r="15" fill="white" />
+  <circle  cx="175" cy="60"  r="15" fill="white" />
+  <circle  cx="175" cy="135"  r="15" fill="white" />
+  <line    x1="125"  y1="40"   x2="140" y2="100" stroke="white"/>
+  <line    x1="175"  y1="60"   x2="140" y2="100" stroke="white"/>
+  <line    x1="175"  y1="135"   x2="140" y2="100" stroke="white"/>
+  <rect     x="125" y="85"  width="30" height="30" fill="white" />
+
+  <circle  cx="65"  cy="185"  r="15" fill="white" />
+  <circle  cx="130" cy="185"  r="15" fill="white" />
+  <line    x1="65"  y1="185"   x2="100" y2="150" stroke="white"/>
+  <line    x1="130" y1="185"   x2="100" y2="150" stroke="white"/>
+  <rect     x="85"  y="135" width="30" height="30" fill="white" />
+
+  <line    x1="70"  y1="100"  x2="140" y2="100" stroke="white"/>
+  <line    x1="70"  y1="100"  x2="100" y2="150" stroke="white"/>
+  <line    x1="100" y1="150"  x2="140" y2="100" stroke="white"/>
+
+</svg>
diff --git a/static/decentral_messaging/img/p2p.svg b/static/decentral_messaging/img/p2p.svg
new file mode 100644
index 0000000..be58e79
--- /dev/null
+++ b/static/decentral_messaging/img/p2p.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="200" width="185">
+  <circle  cx="62"  cy="50" r="15" fill="white" />
+  <circle cx="125"  cy="50" r="15" fill="white" />
+  <circle  cx="25" cy="100" r="15" fill="white" />
+  <circle  cx="62" cy="150" r="15" fill="white" />
+  <circle cx="125" cy="150" r="15" fill="white" />
+  <circle cx="162" cy="100" r="15" fill="white" />
+  <line    x1="62"  y1="50"   x2="125"  y2="50" stroke="white"/>
+  <line    x1="62"  y1="50"    x2="25" y2="100" stroke="white"/>
+  <line    x1="62"  y1="50"    x2="62" y2="150" stroke="white"/>
+  <line    x1="62"  y1="50"   x2="125" y2="150" stroke="white"/>
+  <line    x1="62"  y1="50"   x2="162" y2="100" stroke="white"/>
+  <line   x1="125"  y1="50"   x2="162" y2="100" stroke="white"/>
+  <line    x1="62" y1="150"   x2="162" y2="100" stroke="white"/>
+  <line    x1="25" y1="100"   x2="162" y2="100" stroke="white"/>
+  <line   x1="125" y1="150"   x2="162" y2="100" stroke="white"/>
+  <line    x1="62" y1="150"   x2="125" y2="150" stroke="white"/>
+  <line    x1="62" y1="150"    x2="25" y2="100" stroke="white"/>
+  <line    x1="62" y1="150"   x2="125"  y2="50" stroke="white"/>
+  <line    x1="25" y1="100"   x2="125"  y2="50" stroke="white"/>
+  <line    x1="25" y1="100"   x2="125" y2="150" stroke="white"/>
+  <line   x1="125"  y1="50"   x2="125" y2="150" stroke="white"/>
+</svg>