diff --git a/content/sv/status/index.md b/content/sv/status/index.md
index 59fcfc8..4e06ca9 100644
--- a/content/sv/status/index.md
+++ b/content/sv/status/index.md
@@ -5,51 +5,20 @@ menu: {main: {weight: 12}}
 draft: false
 ---
 {{% blocks/cover title="Mesh Status Metrics" image_anchor="top" height="min" %}}
+Grafer och statistic specifikt för Stockholm's meshen.
 {{% /blocks/cover %}}
 
 {{% blocks/section color="white"  %}}
-## STHLM-MESH Channel utilization
-Genomsnittlig Ch.utl i Stockholm senaste 12 timmarna. Notera att många noder inte sender telemetri när channel utilization är för (25%+) detta gör grafen något missvisande. Men gränsvärdena i grafen visar ändå hur meshen mår över tid.
+## Kanalutnyttjande
+Den genomsnittliga kanalutnyttjandet i Stockholm under de senaste 12 timmarna. Observera att många noder slutar skicka telemetri vid hög belastning (över 25 %), vilket kan påverka grafens noggrannhet. Trots detta ger gränsvärdena i grafen en god indikation på nätverkets hälsa över tid.
 
-<style>
-  .img-container {
-    position: relative;
-    width: 100%;
-    max-width: 774px; /* Ensures it scales with the parent container */
-    height: auto; /* Let the height adjust based on width */
-    aspect-ratio: 774/387; /* Maintains aspect ratio */
-    background-color: #e0e0e0; /* Placeholder color */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden; /* Ensures no overflow issues */
-  }
+{{< lazy-img max-width="774px" aspect-ratio="774/387"
+src="https://dash.roslund.cloud/render/d-solo/edqkge9mf7v28g/main-dashboard?orgId=1&theme=light&panelId=23&width=774&height=387&scale=1" >}}
 
-  .img-container img {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    transition: opacity 0.5s ease-in-out;
-  }
-
-  .img-container img.lazy {
-    opacity: 0;
-  }
-
-  .img-container img.loaded {
-    opacity: 1;
-  }
-</style>
-<div class="img-container">
-  <!-- Bootstrap spinner -->
-  <div class="spinner-border text-primary" role="status">
-    <span class="visually-hidden">Loading...</span>
-  </div>
-
-  <!-- Lazy-loaded image -->
-  <img src="https://dash.roslund.cloud/render/d-solo/edqkge9mf7v28g/main-dashboard?orgId=1&theme=light&panelId=23&width=1000&height=500&scale=1" class="lazy" loading="lazy" alt="Lazy Image" onload="this.classList.add('loaded'); this.previousElementSibling.style.display='none';">
-</div>
+## Packet typer
+Fördelningen av olika pakettyper i nätverket under de senaste 12 timmarna. Diagrammet visar hur nätverket används, inklusive meddelanden, positionstelemetri och andra systempaket.
+{{< lazy-img max-width="500px" aspect-ratio="1/1"
+src="https://dash.roslund.cloud/render/d-solo/edqkge9mf7v28g/main-dashboard?orgId=1&theme=light&panelId=5&width=500&height=500&scale=1" >}}
 {{% /blocks/section %}}
 
 
diff --git a/layouts/shortcodes/lazy-img.html b/layouts/shortcodes/lazy-img.html
new file mode 100644
index 0000000..05ca076
--- /dev/null
+++ b/layouts/shortcodes/lazy-img.html
@@ -0,0 +1,11 @@
+<!-- stylelint-disable -->
+<div class="lazy-img-container" style='max-width: {{ .Get "max-width" }}; aspect-ratio: {{ .Get "aspect-ratio" | safeCSS }};'>
+
+<!-- Bootstrap spinner -->
+<div class="spinner-border text-primary" role="status">
+<span class="visually-hidden">Loading...</span>
+</div>
+
+<!-- Lazy-loaded image -->
+<img src='{{ .Get "src" }}' class="lazy" loading="lazy" onload="this.classList.add('loaded'); this.previousElementSibling.style.display='none';">
+</div>
\ No newline at end of file