diff --git a/docs/developer/docusaurus.config.ts b/docs/developer/docusaurus.config.ts
index a5073d2..a5c2a47 100644
--- a/docs/developer/docusaurus.config.ts
+++ b/docs/developer/docusaurus.config.ts
@@ -5,7 +5,7 @@ import type * as Preset from '@docusaurus/preset-classic';
 const config: Config = {
   title: 'Tibber Prices - Developer Guide',
   tagline: 'Developer documentation for the Tibber Prices custom integration',
-  favicon: 'img/logo.svg',
+  favicon: 'img/icon.svg',
 
   future: {
     v4: true,
@@ -139,7 +139,7 @@ const config: Config = {
       title: 'Tibber Prices HA',
       logo: {
         alt: 'Tibber Prices Integration Logo',
-        src: 'img/logo.svg',
+        src: 'img/icon.svg',
       },
       items: [
         {
diff --git a/docs/developer/static/img/header-dark.svg b/docs/developer/static/img/header-dark.svg
index 5c06e1c..37e3562 100644
--- a/docs/developer/static/img/header-dark.svg
+++ b/docs/developer/static/img/header-dark.svg
@@ -14,61 +14,65 @@
         </linearGradient>
     </defs>
 
-    <g transform="translate(35, 50) scale(0.25)">
-        <!-- Lightning bolt -->
-        <path d="M 100 20 L 70 90 L 100 85 L 80 150 L 140 80 L 110 85 Z"
-              fill="url(#boltGrad)"
-              stroke="none"/>
+    <!-- Centered content group -->
+    <g transform="translate(67, 0)">
+        <g transform="translate(5, 20) scale(0.38)">
+            <!-- Lightning bolt -->
+            <path d="M 100 20 L 70 90 L 100 85 L 80 150 L 140 80 L 110 85 Z"
+                  fill="url(#boltGrad)"
+                  stroke="none"/>
 
-        <!-- Price tag circle -->
-        <circle cx="145" cy="50" r="35" fill="url(#priceGrad)" stroke="white" stroke-width="4"/>
+            <!-- Price tag circle -->
+            <circle cx="145" cy="50" r="35" fill="url(#priceGrad)" stroke="white" stroke-width="4"/>
 
-        <!-- Euro symbol -->
-        <text x="145" y="58"
+            <!-- Euro symbol -->
+            <text x="145" y="53"
+                  font-family="Arial, sans-serif"
+                  font-size="32"
+                  font-weight="bold"
+                  fill="white"
+                  text-anchor="middle"
+                  dominant-baseline="middle">€</text>
+        </g>
+
+        <!-- Integration Name (light text for dark mode) -->
+        <text x="90" y="45"
               font-family="Arial, sans-serif"
-              font-size="32"
+              font-size="24"
+              font-weight="700"
+              fill="#E8E8E8">Tibber Prices</text>
+
+        <text x="90" y="65"
+              font-family="Arial, sans-serif"
+              font-size="12"
+              font-weight="normal"
+              fill="#B0B0B0">Custom Integration</text>
+
+        <!-- Vertical Divider (lighter) -->
+        <line x1="270" y1="25" x2="270" y2="75"
+              stroke="#666666"
+              stroke-width="2"/>
+
+        <!-- "for" text (lighter) -->
+        <text x="290" y="55"
+              font-family="Arial, sans-serif"
+              font-size="14"
+              font-weight="normal"
+              fill="#B0B0B0">for</text>
+
+        <!-- Tibber Logo (right side - simplified) -->
+        <g transform="translate(335, 50)">
+            <!-- Lightning bolt symbol -->
+            <path d="M 0 -30 L -15 5 L 0 0 L -8 25 L 18 -5 L 5 0 Z"
+                  fill="#00D4FF"
+                  stroke="none"/>
+        </g>
+
+        <!-- Tibber Text (light text for dark mode) -->
+        <text x="365" y="58"
+              font-family="Arial, sans-serif"
+              font-size="28"
               font-weight="bold"
-              fill="white"
-              text-anchor="middle">€</text>
+              fill="#E8E8E8">Tibber</text>
     </g>
-
-    <!-- Integration Name (light text for dark mode) -->
-    <text x="90" y="45"
-          font-family="Arial, sans-serif"
-          font-size="24"
-          font-weight="700"
-          fill="#E8E8E8">Tibber Prices</text>
-
-    <text x="90" y="65"
-          font-family="Arial, sans-serif"
-          font-size="12"
-          font-weight="normal"
-          fill="#B0B0B0">Custom Integration</text>
-
-    <!-- Vertical Divider (lighter) -->
-    <line x1="270" y1="25" x2="270" y2="75"
-          stroke="#666666"
-          stroke-width="2"/>
-
-    <!-- "for" text (lighter) -->
-    <text x="290" y="55"
-          font-family="Arial, sans-serif"
-          font-size="14"
-          font-weight="normal"
-          fill="#888888">for</text>
-
-    <!-- Tibber Logo (right side - simplified) -->
-    <g transform="translate(335, 50)">
-        <!-- Lightning bolt symbol -->
-        <path d="M 0 -30 L -15 5 L 0 0 L -8 25 L 18 -5 L 5 0 Z"
-              fill="#00D4FF"
-              stroke="none"/>
-    </g>
-
-    <!-- Tibber Text (light text for dark mode) -->
-    <text x="365" y="58"
-          font-family="Arial, sans-serif"
-          font-size="28"
-          font-weight="bold"
-          fill="#E8E8E8">Tibber</text>
 </svg>
diff --git a/docs/developer/static/img/header.svg b/docs/developer/static/img/header.svg
index 1ed0fba..4645e59 100644
--- a/docs/developer/static/img/header.svg
+++ b/docs/developer/static/img/header.svg
@@ -14,61 +14,65 @@
         </linearGradient>
     </defs>
 
-    <g transform="translate(35, 50) scale(0.25)">
-        <!-- Lightning bolt -->
-        <path d="M 100 20 L 70 90 L 100 85 L 80 150 L 140 80 L 110 85 Z"
-              fill="url(#boltGrad)"
-              stroke="none"/>
+    <!-- Centered content group -->
+    <g transform="translate(67, 0)">
+        <g transform="translate(5, 20) scale(0.38)">
+            <!-- Lightning bolt -->
+            <path d="M 100 20 L 70 90 L 100 85 L 80 150 L 140 80 L 110 85 Z"
+                  fill="url(#boltGrad)"
+                  stroke="none"/>
 
-        <!-- Price tag circle -->
-        <circle cx="145" cy="50" r="35" fill="url(#priceGrad)" stroke="white" stroke-width="4"/>
+            <!-- Price tag circle -->
+            <circle cx="145" cy="50" r="35" fill="url(#priceGrad)" stroke="white" stroke-width="4"/>
 
-        <!-- Euro symbol -->
-        <text x="145" y="58"
+            <!-- Euro symbol -->
+            <text x="145" y="53"
+                  font-family="Arial, sans-serif"
+                  font-size="32"
+                  font-weight="bold"
+                  fill="white"
+                  text-anchor="middle"
+                  dominant-baseline="middle">€</text>
+        </g>
+
+        <!-- Integration Name -->
+        <text x="90" y="45"
               font-family="Arial, sans-serif"
-              font-size="32"
+              font-size="24"
+              font-weight="700"
+              fill="#333333">Tibber Prices</text>
+
+        <text x="90" y="65"
+              font-family="Arial, sans-serif"
+              font-size="12"
+              font-weight="normal"
+              fill="#666666">Custom Integration</text>
+
+        <!-- Vertical Divider -->
+        <line x1="270" y1="25" x2="270" y2="75"
+              stroke="#CCCCCC"
+              stroke-width="2"/>
+
+        <!-- "for" text -->
+        <text x="290" y="55"
+              font-family="Arial, sans-serif"
+              font-size="14"
+              font-weight="normal"
+              fill="#666666">for</text>
+
+        <!-- Tibber Logo (right side - simplified) -->
+        <g transform="translate(335, 50)">
+            <!-- Lightning bolt symbol -->
+            <path d="M 0 -30 L -15 5 L 0 0 L -8 25 L 18 -5 L 5 0 Z"
+                  fill="#00D4FF"
+                  stroke="none"/>
+        </g>
+
+        <!-- Tibber Text -->
+        <text x="365" y="58"
+              font-family="Arial, sans-serif"
+              font-size="28"
               font-weight="bold"
-              fill="white"
-              text-anchor="middle">€</text>
+              fill="#333333">Tibber</text>
     </g>
-
-    <!-- Integration Name -->
-    <text x="90" y="45"
-          font-family="Arial, sans-serif"
-          font-size="24"
-          font-weight="700"
-          fill="#333333">Tibber Prices</text>
-
-    <text x="90" y="65"
-          font-family="Arial, sans-serif"
-          font-size="12"
-          font-weight="normal"
-          fill="#666666">Custom Integration</text>
-
-    <!-- Vertical Divider -->
-    <line x1="270" y1="25" x2="270" y2="75"
-          stroke="#CCCCCC"
-          stroke-width="2"/>
-
-    <!-- "for" text -->
-    <text x="290" y="55"
-          font-family="Arial, sans-serif"
-          font-size="14"
-          font-weight="normal"
-          fill="#999999">for</text>
-
-    <!-- Tibber Logo (right side - simplified) -->
-    <g transform="translate(335, 50)">
-        <!-- Lightning bolt symbol -->
-        <path d="M 0 -30 L -15 5 L 0 0 L -8 25 L 18 -5 L 5 0 Z"
-              fill="#00D4FF"
-              stroke="none"/>
-    </g>
-
-    <!-- Tibber Text -->
-    <text x="365" y="58"
-          font-family="Arial, sans-serif"
-          font-size="28"
-          font-weight="bold"
-          fill="#333333">Tibber</text>
 </svg>
diff --git a/docs/developer/static/img/icon.svg b/docs/developer/static/img/icon.svg
new file mode 100644
index 0000000..a4fe3ee
--- /dev/null
+++ b/docs/developer/static/img/icon.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;">
+    <g transform="matrix(1.26852,0,0,1.26852,-59.3148,-2.02778)">
+        <g>
+            <path d="M100,20L70,90L100,85L80,150L140,80L110,85L100,20Z" style="fill:url(#_Linear1);fill-rule:nonzero;"/>
+            <circle cx="145" cy="50" r="35" style="fill:url(#_Linear2);stroke:white;stroke-width:4px;"/>
+            <g transform="matrix(1,0,0,1,143.018,60.8601)">
+                <text x="-11.906px" y="0px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:32px;fill:white;">€</text>
+            </g>
+        </g>
+    </g>
+    <defs>
+        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(70,130,-130,70,70,20)"><stop offset="0" style="stop-color:rgb(0,212,255);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(0,153,204);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(70,70,-70,70,110,15)"><stop offset="0" style="stop-color:rgb(255,215,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(255,165,0);stop-opacity:1"/></linearGradient>
+    </defs>
+</svg>
diff --git a/docs/developer/static/img/logo.png b/docs/developer/static/img/logo.png
deleted file mode 100644
index 728ec31..0000000
Binary files a/docs/developer/static/img/logo.png and /dev/null differ
diff --git a/docs/developer/static/img/logo.svg b/docs/developer/static/img/logo.svg
deleted file mode 100644
index ed55f1d..0000000
--- a/docs/developer/static/img/logo.svg
+++ /dev/null
@@ -1,29 +0,0 @@
-<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-    <!-- Tibber Prices Logo: Lightning bolt + Price tag + T -->
-    <defs>
-        <linearGradient id="boltGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-            <stop offset="0%" style="stop-color:#00D4FF;stop-opacity:1" />
-            <stop offset="100%" style="stop-color:#0099CC;stop-opacity:1" />
-        </linearGradient>
-        <linearGradient id="priceGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-            <stop offset="0%" style="stop-color:#FFD700;stop-opacity:1" />
-            <stop offset="100%" style="stop-color:#FFA500;stop-opacity:1" />
-        </linearGradient>
-    </defs>
-
-    <!-- Stylized lightning bolt (Tibber inspired) -->
-    <path d="M 100 20 L 70 90 L 100 85 L 80 150 L 140 80 L 110 85 Z"
-          fill="url(#boltGradient)"
-          stroke="none"/>
-
-    <!-- Price tag circle -->
-    <circle cx="145" cy="50" r="35" fill="url(#priceGradient)" stroke="white" stroke-width="4"/>
-
-    <!-- Currency symbol inside price tag -->
-    <text x="145" y="58"
-          font-family="Arial, sans-serif"
-          font-size="32"
-          font-weight="bold"
-          fill="white"
-          text-anchor="middle">€</text>
-</svg>
diff --git a/docs/user/docusaurus.config.ts b/docs/user/docusaurus.config.ts
index dc6f85a..6fe0023 100644
--- a/docs/user/docusaurus.config.ts
+++ b/docs/user/docusaurus.config.ts
@@ -5,7 +5,7 @@ import type * as Preset from '@docusaurus/preset-classic';
 const config: Config = {
   title: 'Tibber Prices Integration',
   tagline: 'Custom Home Assistant integration for Tibber electricity prices',
-  favicon: 'img/logo.svg',
+  favicon: 'img/icon.svg',
 
   future: {
     v4: true,
@@ -139,7 +139,7 @@ const config: Config = {
       title: 'Tibber Prices HA',
       logo: {
         alt: 'Tibber Prices Integration Logo',
-        src: 'img/logo.svg',
+        src: 'img/icon.svg',
       },
       items: [
         {
diff --git a/docs/user/static/img/header-dark.svg b/docs/user/static/img/header-dark.svg
index 5c06e1c..37e3562 100644
--- a/docs/user/static/img/header-dark.svg
+++ b/docs/user/static/img/header-dark.svg
@@ -14,61 +14,65 @@
         </linearGradient>
     </defs>
 
-    <g transform="translate(35, 50) scale(0.25)">
-        <!-- Lightning bolt -->
-        <path d="M 100 20 L 70 90 L 100 85 L 80 150 L 140 80 L 110 85 Z"
-              fill="url(#boltGrad)"
-              stroke="none"/>
+    <!-- Centered content group -->
+    <g transform="translate(67, 0)">
+        <g transform="translate(5, 20) scale(0.38)">
+            <!-- Lightning bolt -->
+            <path d="M 100 20 L 70 90 L 100 85 L 80 150 L 140 80 L 110 85 Z"
+                  fill="url(#boltGrad)"
+                  stroke="none"/>
 
-        <!-- Price tag circle -->
-        <circle cx="145" cy="50" r="35" fill="url(#priceGrad)" stroke="white" stroke-width="4"/>
+            <!-- Price tag circle -->
+            <circle cx="145" cy="50" r="35" fill="url(#priceGrad)" stroke="white" stroke-width="4"/>
 
-        <!-- Euro symbol -->
-        <text x="145" y="58"
+            <!-- Euro symbol -->
+            <text x="145" y="53"
+                  font-family="Arial, sans-serif"
+                  font-size="32"
+                  font-weight="bold"
+                  fill="white"
+                  text-anchor="middle"
+                  dominant-baseline="middle">€</text>
+        </g>
+
+        <!-- Integration Name (light text for dark mode) -->
+        <text x="90" y="45"
               font-family="Arial, sans-serif"
-              font-size="32"
+              font-size="24"
+              font-weight="700"
+              fill="#E8E8E8">Tibber Prices</text>
+
+        <text x="90" y="65"
+              font-family="Arial, sans-serif"
+              font-size="12"
+              font-weight="normal"
+              fill="#B0B0B0">Custom Integration</text>
+
+        <!-- Vertical Divider (lighter) -->
+        <line x1="270" y1="25" x2="270" y2="75"
+              stroke="#666666"
+              stroke-width="2"/>
+
+        <!-- "for" text (lighter) -->
+        <text x="290" y="55"
+              font-family="Arial, sans-serif"
+              font-size="14"
+              font-weight="normal"
+              fill="#B0B0B0">for</text>
+
+        <!-- Tibber Logo (right side - simplified) -->
+        <g transform="translate(335, 50)">
+            <!-- Lightning bolt symbol -->
+            <path d="M 0 -30 L -15 5 L 0 0 L -8 25 L 18 -5 L 5 0 Z"
+                  fill="#00D4FF"
+                  stroke="none"/>
+        </g>
+
+        <!-- Tibber Text (light text for dark mode) -->
+        <text x="365" y="58"
+              font-family="Arial, sans-serif"
+              font-size="28"
               font-weight="bold"
-              fill="white"
-              text-anchor="middle">€</text>
+              fill="#E8E8E8">Tibber</text>
     </g>
-
-    <!-- Integration Name (light text for dark mode) -->
-    <text x="90" y="45"
-          font-family="Arial, sans-serif"
-          font-size="24"
-          font-weight="700"
-          fill="#E8E8E8">Tibber Prices</text>
-
-    <text x="90" y="65"
-          font-family="Arial, sans-serif"
-          font-size="12"
-          font-weight="normal"
-          fill="#B0B0B0">Custom Integration</text>
-
-    <!-- Vertical Divider (lighter) -->
-    <line x1="270" y1="25" x2="270" y2="75"
-          stroke="#666666"
-          stroke-width="2"/>
-
-    <!-- "for" text (lighter) -->
-    <text x="290" y="55"
-          font-family="Arial, sans-serif"
-          font-size="14"
-          font-weight="normal"
-          fill="#888888">for</text>
-
-    <!-- Tibber Logo (right side - simplified) -->
-    <g transform="translate(335, 50)">
-        <!-- Lightning bolt symbol -->
-        <path d="M 0 -30 L -15 5 L 0 0 L -8 25 L 18 -5 L 5 0 Z"
-              fill="#00D4FF"
-              stroke="none"/>
-    </g>
-
-    <!-- Tibber Text (light text for dark mode) -->
-    <text x="365" y="58"
-          font-family="Arial, sans-serif"
-          font-size="28"
-          font-weight="bold"
-          fill="#E8E8E8">Tibber</text>
 </svg>
diff --git a/docs/user/static/img/header.svg b/docs/user/static/img/header.svg
index 1ed0fba..4645e59 100644
--- a/docs/user/static/img/header.svg
+++ b/docs/user/static/img/header.svg
@@ -14,61 +14,65 @@
         </linearGradient>
     </defs>
 
-    <g transform="translate(35, 50) scale(0.25)">
-        <!-- Lightning bolt -->
-        <path d="M 100 20 L 70 90 L 100 85 L 80 150 L 140 80 L 110 85 Z"
-              fill="url(#boltGrad)"
-              stroke="none"/>
+    <!-- Centered content group -->
+    <g transform="translate(67, 0)">
+        <g transform="translate(5, 20) scale(0.38)">
+            <!-- Lightning bolt -->
+            <path d="M 100 20 L 70 90 L 100 85 L 80 150 L 140 80 L 110 85 Z"
+                  fill="url(#boltGrad)"
+                  stroke="none"/>
 
-        <!-- Price tag circle -->
-        <circle cx="145" cy="50" r="35" fill="url(#priceGrad)" stroke="white" stroke-width="4"/>
+            <!-- Price tag circle -->
+            <circle cx="145" cy="50" r="35" fill="url(#priceGrad)" stroke="white" stroke-width="4"/>
 
-        <!-- Euro symbol -->
-        <text x="145" y="58"
+            <!-- Euro symbol -->
+            <text x="145" y="53"
+                  font-family="Arial, sans-serif"
+                  font-size="32"
+                  font-weight="bold"
+                  fill="white"
+                  text-anchor="middle"
+                  dominant-baseline="middle">€</text>
+        </g>
+
+        <!-- Integration Name -->
+        <text x="90" y="45"
               font-family="Arial, sans-serif"
-              font-size="32"
+              font-size="24"
+              font-weight="700"
+              fill="#333333">Tibber Prices</text>
+
+        <text x="90" y="65"
+              font-family="Arial, sans-serif"
+              font-size="12"
+              font-weight="normal"
+              fill="#666666">Custom Integration</text>
+
+        <!-- Vertical Divider -->
+        <line x1="270" y1="25" x2="270" y2="75"
+              stroke="#CCCCCC"
+              stroke-width="2"/>
+
+        <!-- "for" text -->
+        <text x="290" y="55"
+              font-family="Arial, sans-serif"
+              font-size="14"
+              font-weight="normal"
+              fill="#666666">for</text>
+
+        <!-- Tibber Logo (right side - simplified) -->
+        <g transform="translate(335, 50)">
+            <!-- Lightning bolt symbol -->
+            <path d="M 0 -30 L -15 5 L 0 0 L -8 25 L 18 -5 L 5 0 Z"
+                  fill="#00D4FF"
+                  stroke="none"/>
+        </g>
+
+        <!-- Tibber Text -->
+        <text x="365" y="58"
+              font-family="Arial, sans-serif"
+              font-size="28"
               font-weight="bold"
-              fill="white"
-              text-anchor="middle">€</text>
+              fill="#333333">Tibber</text>
     </g>
-
-    <!-- Integration Name -->
-    <text x="90" y="45"
-          font-family="Arial, sans-serif"
-          font-size="24"
-          font-weight="700"
-          fill="#333333">Tibber Prices</text>
-
-    <text x="90" y="65"
-          font-family="Arial, sans-serif"
-          font-size="12"
-          font-weight="normal"
-          fill="#666666">Custom Integration</text>
-
-    <!-- Vertical Divider -->
-    <line x1="270" y1="25" x2="270" y2="75"
-          stroke="#CCCCCC"
-          stroke-width="2"/>
-
-    <!-- "for" text -->
-    <text x="290" y="55"
-          font-family="Arial, sans-serif"
-          font-size="14"
-          font-weight="normal"
-          fill="#999999">for</text>
-
-    <!-- Tibber Logo (right side - simplified) -->
-    <g transform="translate(335, 50)">
-        <!-- Lightning bolt symbol -->
-        <path d="M 0 -30 L -15 5 L 0 0 L -8 25 L 18 -5 L 5 0 Z"
-              fill="#00D4FF"
-              stroke="none"/>
-    </g>
-
-    <!-- Tibber Text -->
-    <text x="365" y="58"
-          font-family="Arial, sans-serif"
-          font-size="28"
-          font-weight="bold"
-          fill="#333333">Tibber</text>
 </svg>
diff --git a/docs/user/static/img/icon.svg b/docs/user/static/img/icon.svg
new file mode 100644
index 0000000..a4fe3ee
--- /dev/null
+++ b/docs/user/static/img/icon.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;">
+    <g transform="matrix(1.26852,0,0,1.26852,-59.3148,-2.02778)">
+        <g>
+            <path d="M100,20L70,90L100,85L80,150L140,80L110,85L100,20Z" style="fill:url(#_Linear1);fill-rule:nonzero;"/>
+            <circle cx="145" cy="50" r="35" style="fill:url(#_Linear2);stroke:white;stroke-width:4px;"/>
+            <g transform="matrix(1,0,0,1,143.018,60.8601)">
+                <text x="-11.906px" y="0px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:32px;fill:white;">€</text>
+            </g>
+        </g>
+    </g>
+    <defs>
+        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(70,130,-130,70,70,20)"><stop offset="0" style="stop-color:rgb(0,212,255);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(0,153,204);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(70,70,-70,70,110,15)"><stop offset="0" style="stop-color:rgb(255,215,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(255,165,0);stop-opacity:1"/></linearGradient>
+    </defs>
+</svg>
diff --git a/docs/user/static/img/logo.png b/docs/user/static/img/logo.png
deleted file mode 100644
index 728ec31..0000000
Binary files a/docs/user/static/img/logo.png and /dev/null differ
diff --git a/docs/user/static/img/logo.svg b/docs/user/static/img/logo.svg
deleted file mode 100644
index ed55f1d..0000000
--- a/docs/user/static/img/logo.svg
+++ /dev/null
@@ -1,29 +0,0 @@
-<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-    <!-- Tibber Prices Logo: Lightning bolt + Price tag + T -->
-    <defs>
-        <linearGradient id="boltGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-            <stop offset="0%" style="stop-color:#00D4FF;stop-opacity:1" />
-            <stop offset="100%" style="stop-color:#0099CC;stop-opacity:1" />
-        </linearGradient>
-        <linearGradient id="priceGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-            <stop offset="0%" style="stop-color:#FFD700;stop-opacity:1" />
-            <stop offset="100%" style="stop-color:#FFA500;stop-opacity:1" />
-        </linearGradient>
-    </defs>
-
-    <!-- Stylized lightning bolt (Tibber inspired) -->
-    <path d="M 100 20 L 70 90 L 100 85 L 80 150 L 140 80 L 110 85 Z"
-          fill="url(#boltGradient)"
-          stroke="none"/>
-
-    <!-- Price tag circle -->
-    <circle cx="145" cy="50" r="35" fill="url(#priceGradient)" stroke="white" stroke-width="4"/>
-
-    <!-- Currency symbol inside price tag -->
-    <text x="145" y="58"
-          font-family="Arial, sans-serif"
-          font-size="32"
-          font-weight="bold"
-          fill="white"
-          text-anchor="middle">€</text>
-</svg>
diff --git a/images/dark_icon.svg b/images/dark_icon.svg
new file mode 100644
index 0000000..87653e6
--- /dev/null
+++ b/images/dark_icon.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;">
+    <rect x="0" y="0" width="200" height="200" style="fill:url(#_Linear1);"/>
+    <g transform="matrix(1.26852,0,0,1.26852,-59.3148,-2.02778)">
+        <g>
+            <path d="M100,20L70,90L100,85L80,150L140,80L110,85L100,20Z" style="fill:url(#_Linear2);fill-rule:nonzero;"/>
+            <circle cx="145" cy="50" r="35" style="fill:url(#_Linear3);stroke:white;stroke-width:4px;"/>
+            <g transform="matrix(1,0,0,1,143.018,60.8601)">
+                <text x="-11.906px" y="0px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:32px;fill:white;">€</text>
+            </g>
+        </g>
+    </g>
+    <defs>
+        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(200,200,-200,200,0,0)"><stop offset="0" style="stop-color:rgb(0,212,255);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(0,153,204);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(70,130,-130,70,70,20)"><stop offset="0" style="stop-color:white;stop-opacity:1"/><stop offset="0.31" style="stop-color:rgb(246,246,246);stop-opacity:1"/><stop offset="0.41" style="stop-color:rgb(224,224,224);stop-opacity:1"/><stop offset="0.49" style="stop-color:rgb(200,200,200);stop-opacity:1"/><stop offset="0.58" style="stop-color:rgb(224,224,224);stop-opacity:1"/><stop offset="0.68" style="stop-color:rgb(246,246,246);stop-opacity:1"/><stop offset="1" style="stop-color:white;stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(70,70,-70,70,110,15)"><stop offset="0" style="stop-color:rgb(255,215,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(255,165,0);stop-opacity:1"/></linearGradient>
+    </defs>
+</svg>
diff --git a/images/dark_logo.svg b/images/dark_logo.svg
new file mode 100644
index 0000000..d3e5181
--- /dev/null
+++ b/images/dark_logo.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 400 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;">
+    <g transform="matrix(1.1242,0,0,1.1242,103.468,63.1904)">
+        <text x="0px" y="0px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:42px;fill:rgb(232,232,232);">T<tspan x="24.917px 36.586px " y="0px 0px ">ib</tspan>ber Prices</text>
+    </g>
+    <g transform="matrix(1,0,0,1,120,90)">
+        <g transform="matrix(1.1242,0,0,1.1242,112.968,1.29547)">
+            <text x="0px" y="0px" style="font-family:'Helvetica';font-size:14px;fill:rgb(153,153,153);">powered by</text>
+        </g>
+        <g transform="matrix(0.417583,0,0,0.417583,218.162,-1.31861)">
+            <path d="M0,-30L-15,5L0,0L-8,25L18,-5L5,0L0,-30Z" style="fill:rgb(51,224,255);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(1.1242,0,0,1.1242,225.388,1.29547)">
+            <text x="0px" y="0px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:16px;fill:rgb(232,232,232);">T<tspan x="9.492px 13.938px " y="0px 0px ">ib</tspan>ber</text>
+        </g>
+    </g>
+    <g transform="matrix(0.888889,0,0,0.888889,-62.2222,-9.33333)">
+        <path d="M100,20L70,90L100,85L80,150L140,80L110,85L100,20Z" style="fill:url(#_Linear1);fill-rule:nonzero;"/>
+        <circle cx="145" cy="50" r="35" style="fill:url(#_Linear2);stroke:white;stroke-width:4px;"/>
+        <g transform="matrix(1,0,0,1,143.018,60.8601)">
+            <text x="-11.906px" y="0px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:32px;fill:white;">€</text>
+        </g>
+    </g>
+    <defs>
+        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(70,130,-130,70,70,20)"><stop offset="0" style="stop-color:rgb(0,212,255);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(0,153,204);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(70,70,-70,70,110,15)"><stop offset="0" style="stop-color:rgb(255,215,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(255,165,0);stop-opacity:1"/></linearGradient>
+    </defs>
+</svg>
diff --git a/images/header-dark.svg b/images/header-dark.svg
index 5c06e1c..37e3562 100644
--- a/images/header-dark.svg
+++ b/images/header-dark.svg
@@ -14,61 +14,65 @@
         </linearGradient>
     </defs>
 
-    <g transform="translate(35, 50) scale(0.25)">
-        <!-- Lightning bolt -->
-        <path d="M 100 20 L 70 90 L 100 85 L 80 150 L 140 80 L 110 85 Z"
-              fill="url(#boltGrad)"
-              stroke="none"/>
+    <!-- Centered content group -->
+    <g transform="translate(67, 0)">
+        <g transform="translate(5, 20) scale(0.38)">
+            <!-- Lightning bolt -->
+            <path d="M 100 20 L 70 90 L 100 85 L 80 150 L 140 80 L 110 85 Z"
+                  fill="url(#boltGrad)"
+                  stroke="none"/>
 
-        <!-- Price tag circle -->
-        <circle cx="145" cy="50" r="35" fill="url(#priceGrad)" stroke="white" stroke-width="4"/>
+            <!-- Price tag circle -->
+            <circle cx="145" cy="50" r="35" fill="url(#priceGrad)" stroke="white" stroke-width="4"/>
 
-        <!-- Euro symbol -->
-        <text x="145" y="58"
+            <!-- Euro symbol -->
+            <text x="145" y="53"
+                  font-family="Arial, sans-serif"
+                  font-size="32"
+                  font-weight="bold"
+                  fill="white"
+                  text-anchor="middle"
+                  dominant-baseline="middle">€</text>
+        </g>
+
+        <!-- Integration Name (light text for dark mode) -->
+        <text x="90" y="45"
               font-family="Arial, sans-serif"
-              font-size="32"
+              font-size="24"
+              font-weight="700"
+              fill="#E8E8E8">Tibber Prices</text>
+
+        <text x="90" y="65"
+              font-family="Arial, sans-serif"
+              font-size="12"
+              font-weight="normal"
+              fill="#B0B0B0">Custom Integration</text>
+
+        <!-- Vertical Divider (lighter) -->
+        <line x1="270" y1="25" x2="270" y2="75"
+              stroke="#666666"
+              stroke-width="2"/>
+
+        <!-- "for" text (lighter) -->
+        <text x="290" y="55"
+              font-family="Arial, sans-serif"
+              font-size="14"
+              font-weight="normal"
+              fill="#B0B0B0">for</text>
+
+        <!-- Tibber Logo (right side - simplified) -->
+        <g transform="translate(335, 50)">
+            <!-- Lightning bolt symbol -->
+            <path d="M 0 -30 L -15 5 L 0 0 L -8 25 L 18 -5 L 5 0 Z"
+                  fill="#00D4FF"
+                  stroke="none"/>
+        </g>
+
+        <!-- Tibber Text (light text for dark mode) -->
+        <text x="365" y="58"
+              font-family="Arial, sans-serif"
+              font-size="28"
               font-weight="bold"
-              fill="white"
-              text-anchor="middle">€</text>
+              fill="#E8E8E8">Tibber</text>
     </g>
-
-    <!-- Integration Name (light text for dark mode) -->
-    <text x="90" y="45"
-          font-family="Arial, sans-serif"
-          font-size="24"
-          font-weight="700"
-          fill="#E8E8E8">Tibber Prices</text>
-
-    <text x="90" y="65"
-          font-family="Arial, sans-serif"
-          font-size="12"
-          font-weight="normal"
-          fill="#B0B0B0">Custom Integration</text>
-
-    <!-- Vertical Divider (lighter) -->
-    <line x1="270" y1="25" x2="270" y2="75"
-          stroke="#666666"
-          stroke-width="2"/>
-
-    <!-- "for" text (lighter) -->
-    <text x="290" y="55"
-          font-family="Arial, sans-serif"
-          font-size="14"
-          font-weight="normal"
-          fill="#888888">for</text>
-
-    <!-- Tibber Logo (right side - simplified) -->
-    <g transform="translate(335, 50)">
-        <!-- Lightning bolt symbol -->
-        <path d="M 0 -30 L -15 5 L 0 0 L -8 25 L 18 -5 L 5 0 Z"
-              fill="#00D4FF"
-              stroke="none"/>
-    </g>
-
-    <!-- Tibber Text (light text for dark mode) -->
-    <text x="365" y="58"
-          font-family="Arial, sans-serif"
-          font-size="28"
-          font-weight="bold"
-          fill="#E8E8E8">Tibber</text>
 </svg>
diff --git a/images/header.svg b/images/header.svg
index 1ed0fba..0c768db 100644
--- a/images/header.svg
+++ b/images/header.svg
@@ -14,61 +14,65 @@
         </linearGradient>
     </defs>
 
-    <g transform="translate(35, 50) scale(0.25)">
-        <!-- Lightning bolt -->
-        <path d="M 100 20 L 70 90 L 100 85 L 80 150 L 140 80 L 110 85 Z"
-              fill="url(#boltGrad)"
-              stroke="none"/>
+    <!-- Centered content group -->
+    <g transform="translate(67, 0)">
+        <g transform="translate(5, 20) scale(0.38)">
+            <!-- Lightning bolt -->
+            <path d="M 100 20 L 70 90 L 100 85 L 80 150 L 140 80 L 110 85 Z"
+                  fill="url(#boltGrad)"
+                  stroke="none"/>
 
-        <!-- Price tag circle -->
-        <circle cx="145" cy="50" r="35" fill="url(#priceGrad)" stroke="white" stroke-width="4"/>
+            <!-- Price tag circle -->
+            <circle cx="145" cy="50" r="35" fill="url(#priceGrad)" stroke="white" stroke-width="4"/>
 
-        <!-- Euro symbol -->
-        <text x="145" y="58"
+            <!-- Euro symbol -->
+            <text x="145" y="53"
+                  font-family="Arial, sans-serif"
+                  font-size="32"
+                  font-weight="bold"
+                  fill="white"
+                  text-anchor="middle"
+                  dominant-baseline="middle">€</text>
+        </g>
+
+        <!-- Integration Name -->
+        <text x="90" y="45"
               font-family="Arial, sans-serif"
-              font-size="32"
+              font-size="24"
+              font-weight="700"
+              fill="#777777">Tibber Prices</text>
+
+        <text x="90" y="65"
+              font-family="Arial, sans-serif"
+              font-size="12"
+              font-weight="normal"
+              fill="#777777">Custom Integration</text>
+
+        <!-- Vertical Divider -->
+        <line x1="270" y1="25" x2="270" y2="75"
+              stroke="#999999"
+              stroke-width="2"/>
+
+        <!-- "for" text -->
+        <text x="290" y="55"
+              font-family="Arial, sans-serif"
+              font-size="14"
+              font-weight="normal"
+              fill="#777777">for</text>
+
+        <!-- Tibber Logo (right side - simplified) -->
+        <g transform="translate(335, 50)">
+            <!-- Lightning bolt symbol -->
+            <path d="M 0 -30 L -15 5 L 0 0 L -8 25 L 18 -5 L 5 0 Z"
+                  fill="#00D4FF"
+                  stroke="none"/>
+        </g>
+
+        <!-- Tibber Text -->
+        <text x="365" y="58"
+              font-family="Arial, sans-serif"
+              font-size="28"
               font-weight="bold"
-              fill="white"
-              text-anchor="middle">€</text>
+              fill="#777777">Tibber</text>
     </g>
-
-    <!-- Integration Name -->
-    <text x="90" y="45"
-          font-family="Arial, sans-serif"
-          font-size="24"
-          font-weight="700"
-          fill="#333333">Tibber Prices</text>
-
-    <text x="90" y="65"
-          font-family="Arial, sans-serif"
-          font-size="12"
-          font-weight="normal"
-          fill="#666666">Custom Integration</text>
-
-    <!-- Vertical Divider -->
-    <line x1="270" y1="25" x2="270" y2="75"
-          stroke="#CCCCCC"
-          stroke-width="2"/>
-
-    <!-- "for" text -->
-    <text x="290" y="55"
-          font-family="Arial, sans-serif"
-          font-size="14"
-          font-weight="normal"
-          fill="#999999">for</text>
-
-    <!-- Tibber Logo (right side - simplified) -->
-    <g transform="translate(335, 50)">
-        <!-- Lightning bolt symbol -->
-        <path d="M 0 -30 L -15 5 L 0 0 L -8 25 L 18 -5 L 5 0 Z"
-              fill="#00D4FF"
-              stroke="none"/>
-    </g>
-
-    <!-- Tibber Text -->
-    <text x="365" y="58"
-          font-family="Arial, sans-serif"
-          font-size="28"
-          font-weight="bold"
-          fill="#333333">Tibber</text>
 </svg>
diff --git a/images/icon.svg b/images/icon.svg
new file mode 100644
index 0000000..a4fe3ee
--- /dev/null
+++ b/images/icon.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;">
+    <g transform="matrix(1.26852,0,0,1.26852,-59.3148,-2.02778)">
+        <g>
+            <path d="M100,20L70,90L100,85L80,150L140,80L110,85L100,20Z" style="fill:url(#_Linear1);fill-rule:nonzero;"/>
+            <circle cx="145" cy="50" r="35" style="fill:url(#_Linear2);stroke:white;stroke-width:4px;"/>
+            <g transform="matrix(1,0,0,1,143.018,60.8601)">
+                <text x="-11.906px" y="0px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:32px;fill:white;">€</text>
+            </g>
+        </g>
+    </g>
+    <defs>
+        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(70,130,-130,70,70,20)"><stop offset="0" style="stop-color:rgb(0,212,255);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(0,153,204);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(70,70,-70,70,110,15)"><stop offset="0" style="stop-color:rgb(255,215,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(255,165,0);stop-opacity:1"/></linearGradient>
+    </defs>
+</svg>
diff --git a/images/logo.png b/images/logo.png
deleted file mode 100644
index 728ec31..0000000
Binary files a/images/logo.png and /dev/null differ
diff --git a/images/logo.svg b/images/logo.svg
new file mode 100644
index 0000000..10264c8
--- /dev/null
+++ b/images/logo.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 400 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;">
+    <g transform="matrix(1.1242,0,0,1.1242,103.468,63.1904)">
+        <text x="0px" y="0px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:42px;fill:rgb(119,119,119);">T<tspan x="24.917px 36.586px " y="0px 0px ">ib</tspan>ber Prices</text>
+    </g>
+    <g transform="matrix(1,0,0,1,120,90)">
+        <g transform="matrix(1.1242,0,0,1.1242,112.968,1.29547)">
+            <text x="0px" y="0px" style="font-family:'Helvetica';font-size:14px;fill:rgb(153,153,153);">powered by</text>
+        </g>
+        <g transform="matrix(0.417583,0,0,0.417583,218.162,-1.31861)">
+            <path d="M0,-30L-15,5L0,0L-8,25L18,-5L5,0L0,-30Z" style="fill:rgb(51,224,255);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(1.1242,0,0,1.1242,225.388,1.29547)">
+            <text x="0px" y="0px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:16px;fill:rgb(119,119,119);">T<tspan x="9.492px 13.938px " y="0px 0px ">ib</tspan>ber</text>
+        </g>
+    </g>
+    <g transform="matrix(0.888889,0,0,0.888889,-62.2222,-9.33333)">
+        <path d="M100,20L70,90L100,85L80,150L140,80L110,85L100,20Z" style="fill:url(#_Linear1);fill-rule:nonzero;"/>
+        <circle cx="145" cy="50" r="35" style="fill:url(#_Linear2);stroke:white;stroke-width:4px;"/>
+        <g transform="matrix(1,0,0,1,143.018,60.8601)">
+            <text x="-11.906px" y="0px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:32px;fill:white;">€</text>
+        </g>
+    </g>
+    <defs>
+        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(70,130,-130,70,70,20)"><stop offset="0" style="stop-color:rgb(0,212,255);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(0,153,204);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(70,70,-70,70,110,15)"><stop offset="0" style="stop-color:rgb(255,215,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(255,165,0);stop-opacity:1"/></linearGradient>
+    </defs>
+</svg>
diff --git a/images/social-preview.svg b/images/social-preview.svg
new file mode 100644
index 0000000..a30e7df
--- /dev/null
+++ b/images/social-preview.svg
@@ -0,0 +1,98 @@
+<svg viewBox="0 0 1280 640" xmlns="http://www.w3.org/2000/svg">
+    <!-- Social Preview for GitHub - 1280x640px -->
+
+    <!-- Background with subtle gradient -->
+    <defs>
+        <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:1" />
+            <stop offset="100%" style="stop-color:#E3E8ED;stop-opacity:1" />
+        </linearGradient>
+        <linearGradient id="boltGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#00D4FF;stop-opacity:1" />
+            <stop offset="100%" style="stop-color:#0099CC;stop-opacity:1" />
+        </linearGradient>
+        <linearGradient id="priceGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#FFD700;stop-opacity:1" />
+            <stop offset="100%" style="stop-color:#FFA500;stop-opacity:1" />
+        </linearGradient>
+    </defs>
+
+    <!-- Background -->
+    <rect width="1280" height="640" fill="url(#bgGradient)"/>
+
+    <!-- Centered content group -->
+    <g transform="translate(640, 320)">
+        <!-- Custom Integration Logo (scaled larger for social preview) -->
+        <g transform="translate(-380, -100) scale(0.8)">
+            <!-- Lightning bolt -->
+            <path d="M 100 20 L 70 90 L 100 85 L 80 150 L 140 80 L 110 85 Z"
+                  fill="url(#boltGrad)"
+                  stroke="none"/>
+
+            <!-- Price tag circle -->
+            <circle cx="145" cy="50" r="35" fill="url(#priceGrad)" stroke="white" stroke-width="4"/>
+
+            <!-- Euro symbol -->
+            <text x="145" y="53"
+                  font-family="Arial, sans-serif"
+                  font-size="32"
+                  font-weight="bold"
+                  fill="white"
+                  text-anchor="middle"
+                  dominant-baseline="middle">€</text>
+        </g>
+
+        <!-- Main Title -->
+        <text x="0" y="-40"
+              font-family="Arial, sans-serif"
+              font-size="72"
+              font-weight="700"
+              fill="#333333"
+              text-anchor="middle">Tibber Prices</text>
+
+        <!-- Subtitle -->
+        <text x="0" y="20"
+              font-family="Arial, sans-serif"
+              font-size="32"
+              font-weight="normal"
+              fill="#666666"
+              text-anchor="middle">Custom Integration for Home Assistant</text>
+
+        <!-- Divider line -->
+        <line x1="-200" y1="60" x2="200" y2="60"
+              stroke="#999999"
+              stroke-width="2"/>
+
+        <!-- Description -->
+        <text x="0" y="110"
+              font-family="Arial, sans-serif"
+              font-size="24"
+              font-weight="normal"
+              fill="#777777"
+              text-anchor="middle">Quarter-hourly electricity prices with advanced analytics</text>
+
+        <!-- Tibber Logo reference (right bottom corner) -->
+        <g transform="translate(450, 150)">
+            <text x="0" y="0"
+                  font-family="Arial, sans-serif"
+                  font-size="20"
+                  font-weight="normal"
+                  fill="#999999"
+                  text-anchor="end">powered by</text>
+
+            <!-- Small Tibber bolt -->
+            <g transform="translate(25, -5) scale(0.4)">
+                <path d="M 0 -30 L -15 5 L 0 0 L -8 25 L 18 -5 L 5 0 Z"
+                      fill="#00D4FF"
+                      stroke="none"/>
+            </g>
+
+            <!-- Tibber Text -->
+            <text x="50" y="0"
+                  font-family="Arial, sans-serif"
+                  font-size="24"
+                  font-weight="bold"
+                  fill="#333333">Tibber</text>
+        </g>
+    </g>
+</svg>