diff --git a/src/components/design/content/banner-saeule.svelte b/src/components/design/content/banner-saeule.svelte
index e76166e1..cd9ecffc 100644
--- a/src/components/design/content/banner-saeule.svelte
+++ b/src/components/design/content/banner-saeule.svelte
@@ -1,326 +1,156 @@
 <script>
-	import { PRICES } from "#lib/constants";
+ import { PRICES } from "#lib/constants";
+ import VApromo from "#sidebarCards/card-VA-promo.svelte";
+ import BApromo from "#sidebarCards/card-BA-promo.svelte";
 </script>
 
-
-
-<div rounded="md" class="shadow-xl pt-8 pr-8 pb-8 pl-8 sm:p-16 sm:flex-row md:flex-row lg:flex-row xl:flex-row
-    2xl:flex-row flex flex-col pl-0 pt-0 pr-0 pb-0">
-  <div class="flex lg:flex-col flex-col w-1/2 rounded-none shadow-* ml-0 pl-0 pt-0 pr-0 pb-0 border-0 h-auto mr-4
-      mb-10">
-    <div class="lg:w-full w-full rounded-2xl shadow-xl mb-4 text-white bg-indigo-800 justify-center items-center">
-      <p class="mb-4 text-2xl text-center text-white mt-4 font-bold">
-        Verbrauchsausweis
-        <br/>
-        Wohngebäude
-      </p>
-      <div class="lg:h-1/2 lg:w-1/2 flex flex-wrap w-1/2 mb-7 bg-indigo-800 h-1/2 ml-8 pb-1">
-        <img src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" class="lg:h-full lg:w-full
-            w-full h-full mb-5"/>
-      </div>
-    </div>
-    <div class="lg:w-full w-full rounded-2xl shadow-xl mb-4 text-white h-full flex-col pt-2 pl-2 pr-2 pb-2 border-2">
-      <div class="lg:mb-0 lg:pr-5 lg:w-full mb-6 w-full">
-        <p class="block text-xl font-light tracking-tight text-gray-900 leading-6 sm:text-3xl text-right pr-2">
-          einfach
-          <br/>
-        </p>
-      </div>
-      <div class="lg:w-full flex flex-row w-full items-end h-auto">
-        <div class="lg:w-5/6 w-5/6">
-          <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">Einfache Berechnung anhand von 3
-              Jahresverbräuchen der Heizung. Das Enddatum darf nicht älter als 18 Monate sein.</p>
-        </div>
-        <div class="lg:w-1/6 w-1/6 h-16">
-          <p class="mb-4 text-2xl text-center text-indigo-800 mt-4 font-medium decoration-black">✔</p>
-        </div>
-      </div>
-      <div class="lg:w-full flex flex-row items-end w-full">
-        <div class="lg:w-5/6 w-5/6">
-          <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">
-            Zulässig bei Vermietung
-            <br/>
-            oder Verkauf Ihres Immobilienobjektes.
-          </p>
-        </div>
-        <div class="lg:w-1/6 items-end w-1/6 h-16">
-          <p class="mb-4 text-2xl text-center text-indigo-800 mt-4 font-medium">✔</p>
-        </div>
-      </div>
-      <div class="lg:w-full flex flex-row items-end w-full">
-        <div class="lg:w-5/6 w-5/6">
-          <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">Unzulässig bei unsanierten Gebäuden vor
-              1978 gebaut mit weniger als 5 Wohnungen.</p>
-        </div>
-        <div class="lg:w-1/6 items-end w-1/6 h-16">
-          <p class="mb-4 text-2xl text-center text-yellow-500 mt-4 font-medium">✘</p>
-        </div>
-      </div>
-      <div class="lg:w-full flex flex-row items-end w-full">
-        <div class="lg:w-5/6 w-5/6">
-          <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">Für bauliche und energetische Maßnahmen
-              ungeeignet. Starke Abweichungen durch individuelles Heizverhalten.</p>
-        </div>
-        <div class="lg:w-1/6 items-end w-1/6 h-16">
-          <p class="mb-4 text-2xl text-center text-yellow-500 mt-4 font-medium">✘</p>
-        </div>
-      </div>
-      <div class="lg:w-full flex flex-row items-end w-full">
-        <div class="lg:w-5/6 w-5/6">
-          <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">Wird nicht immer bei den Banken für die
-              Kreditunterlagen akzeptiert.</p>
-        </div>
-        <div class="lg:w-1/6 items-end w-1/6 h-16">
-          <p class="mb-4 text-2xl text-center text-yellow-500 mt-4 font-medium">✘</p>
-        </div>
-      </div>
-    </div>
-    <div class="lg:w-full w-full rounded-2xl shadow-xl mb-2 text-white bg-yellow-500 h-auto justify-center items-center
-        theme-orange">
-      <p class="mb-4 text-2xl text-center text-white mt-4 font-bold">
-        ab {PRICES.VerbrauchsausweisWohnen[0]}€ inkl. MwSt
-        <br/>
-      </p>
-    </div>
-    <div class="lg:w-full w-full rounded-none shadow-* mb-2 text-white bg-white h-auto justify-center items-center">
-      <button class="w-full bg-indigo-800 text-white h-16 rounded-xl shadow-xl pr-6 pl-6 text-center mb-1.5
-          text-xl">jetzt online erstellen</button>
-      <button class="w-full bg-indigo-800 text-white h-16 rounded-xl shadow-xl pr-6 pl-6 text-center text-xl">zur
-          Produktübersicht</button>
-    </div>
-  </div>
-  <div class="flex lg:flex-col flex-col w-1/2 rounded-none shadow-* ml-0 pl-0 pt-0 pr-0 pb-0 border-0 h-auto mr-4
-      mb-10">
-    <div class="lg:w-full w-full rounded-2xl shadow-xl mb-4 text-white bg-indigo-800 justify-center items-center">
-      <p class="mb-4 text-2xl text-center text-white mt-4 font-bold">
-        Bedarfsausweis
-        <br/>
-        Wohngebäude
-      </p>
-      <div class="lg:h-1/2 lg:w-1/2 flex flex-wrap w-1/2 mb-7 bg-indigo-800 h-1/2 ml-8 pb-1">
-        <img src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" class="lg:h-full lg:w-full
-            w-full h-full mb-5"/>
-      </div>
-    </div>
-    <div class="lg:w-full w-full rounded-2xl shadow-xl mb-4 text-white h-full flex-col pt-2 pl-2 pr-2 pb-2 border-2">
-      <div class="lg:mb-0 lg:pr-5 lg:w-full mb-6 w-full">
-        <p class="block text-xl font-light tracking-tight text-gray-900 leading-6 sm:text-3xl text-right pr-2">
-          fundiert
-          <br/>
-        </p>
-      </div>
-      <div class="lg:w-full flex flex-row w-full items-end h-auto">
-        <div class="lg:w-5/6 w-5/6">
-          <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">Berechnung mit Erfassung der
-              Gebäudegeometrie, U-Werte der Außenbauteile sowie dem Wirkungsgrad der Heizung.</p>
-        </div>
-        <div class="lg:w-1/6 w-1/6 h-16">
-          <p class="mb-4 text-2xl text-center text-indigo-800 mt-4 font-medium decoration-black">✔</p>
-        </div>
-      </div>
-      <div class="lg:w-full flex flex-row items-end w-full">
-        <div class="lg:w-5/6 w-5/6">
-          <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">Zulässig bei Vermietung, Verkauf,
-              Modernisierung und Neubau.</p>
-        </div>
-        <div class="lg:w-1/6 items-end w-1/6 h-16">
-          <p class="mb-4 text-2xl text-center text-indigo-800 mt-4 font-medium">✔</p>
-        </div>
-      </div>
-      <div class="lg:w-full flex flex-row items-end w-full">
-        <div class="lg:w-5/6 w-5/6">
-          <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">Zulässig für alle Gebäude, insbesondere
-              alte und unsanierte Objekte.</p>
-        </div>
-        <div class="lg:w-1/6 items-end w-1/6 h-16">
-          <p class="mb-4 text-2xl text-center text-indigo-800 mt-4 font-medium">✔</p>
-        </div>
-      </div>
-      <div class="lg:w-full flex flex-row items-end w-full">
-        <div class="lg:w-5/6 w-5/6">
-          <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">Kann als Grundlage für Sanierungsvarianten
-              sowie weitere Maßnahmen (z.B. iSFP) herangezogen werden.</p>
-        </div>
-        <div class="lg:w-1/6 items-end w-1/6 h-16">
-          <p class="mb-4 text-2xl text-center text-indigo-800 mt-4 font-medium">✔</p>
-        </div>
-      </div>
-      <div class="lg:w-full flex flex-row items-end w-full">
-        <div class="lg:w-5/6 w-5/6">
-          <p class="mb-4 text-lg text-center text-gray-700 mt-4 font-medium">Objektive&nbsp; Berechnung die für die
-              Kreditunterlagen besser geeignet ist.</p>
-        </div>
-        <div class="lg:w-1/6 items-end w-1/6 h-16">
-          <p class="mb-4 text-2xl text-center text-indigo-800 mt-4 font-medium">✔</p>
-        </div>
-      </div>
-    </div>
-    <div class="lg:w-full w-full rounded-2xl shadow-xl mb-2 text-white bg-yellow-500 h-auto justify-center
-        items-center">
-      <p class="mb-4 text-2xl text-center text-white mt-4 font-bold">
-        ab {PRICES.BedarfsausweisWohnen[0]}€ inkl. MwSt
-        <br/>
-      </p>
-    </div>
-    <div class="lg:w-full w-full rounded-none shadow-* mb-2 text-white bg-white h-auto justify-center items-center">
-      <button class="w-full bg-indigo-800 text-white h-16 rounded-xl shadow-xl pr-6 pl-6 text-center mb-1.5
-          text-xl">jetzt online erstellen</button>
-      <button class="w-full bg-indigo-800 text-white h-16 rounded-xl shadow-xl pr-6 pl-6 text-center text-xl">zur
-          Produktübersicht</button>
-    </div>
-  </div>
-</div>
-
-
-
 <div id="saeulen">
-
     <div class="saeule">
-        <div class="blue-top">
-            <img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Verbrauchsausweis"/>
-            <div class="name">Verbrauchsausweis<br>Wohngebäude</div> 
-        </div>   
+      <VApromo client:load /> 
         <div class="white">
-            <div class="services">einfach </div>
-			<div class="services">
-                <span>Einfache Berechnungsmethode anhand von 3 Jahresverbräuchen der Heizung.</span>
-                <span class="icon positive">✔</span>
+          <div class="lg:mb-0 lg:pr-5 lg:w-full mb-6 w-full">
+            <p class="block text-xl font-light tracking-tight text-gray-900 leading-6 sm:text-3xl text-right pr-2">
+              einfach
+              <br/>
+            </p>
+          </div>
+          <div class="lg:w-full flex flex-row w-full items-end h-auto">
+            <div class="lg:w-5/6 w-5/6">
+              <p class="produkttext">Einfache Berechnung anhand von 3
+                  Jahresverbräuchen der Heizung. Das Enddatum darf nicht älter als 18 Monate sein.</p>
             </div>
-			<div class="services">
-                <span>Zulässig bei Vermietung und Verkauf.</span>
-                <span class="icon positive">✔</span>
+            <div class="lg:w-1/6 w-1/6 h-16">
+              <p class="haken">✔</p>
             </div>
-			<div class="services">
-                <span>Nicht zulässig bei unsanierten Gebäuden, die vor 1978 gebaut wurden und weniger als 5 Wohneinheiten haben.</span>
-                <span class="icon negative">✘</span>
+          </div>
+          <div class="lg:w-full flex flex-row items-end w-full">
+            <div class="lg:w-5/6 w-5/6">
+              <p class="produkttext">
+                Zulässig bei Vermietung
+                <br/>
+                oder Verkauf Ihres Immobilienobjektes.
+              </p>
             </div>
-			<div class="services">
-                <span>Für bauliche und energetische Maßnahmen ungeeignet.</span>
-                <span class="icon negative">✘</span>
+            <div class="lg:w-1/6 items-end w-1/6 h-16">
+              <p class="haken">✔</p>
             </div>
-			<div class="services">
-                <span>Wird nicht immer bei den Banken für die Finanzierungsunterlagen akzeptiert.</span>
-                <span class="icon negative">✘</span>
+          </div>
+          <div class="lg:w-full flex flex-row items-end w-full">
+            <div class="lg:w-5/6 w-5/6">
+              <p class="produkttext">Unzulässig bei unsanierten Gebäuden vor
+                  1978 gebaut mit weniger als 5 Wohnungen.</p>
             </div>
+            <div class="lg:w-1/6 items-end w-1/6 h-16">
+              <p class="kreuz">✘</p>
+            </div>
+          </div>
+          <div class="lg:w-full flex flex-row items-end w-full">
+            <div class="lg:w-5/6 w-5/6">
+              <p class="produkttext">Für bauliche und energetische Maßnahmen
+                  ungeeignet. Starke Abweichungen durch individuelles Heizverhalten.</p>
+            </div>
+            <div class="lg:w-1/6 items-end w-1/6 h-16">
+              <p class="kreuz">✘</p>
+            </div>
+          </div>
+          <div class="lg:w-full flex flex-row items-end w-full">
+            <div class="lg:w-5/6 w-5/6">
+              <p class="produkttext">Wird nicht immer bei den Banken für die
+                  Kreditunterlagen akzeptiert.</p>
+            </div>
+            <div class="lg:w-1/6 items-end w-1/6 h-16">
+              <p class="kreuz">✘</p>
+            </div>
+          </div>
         </div>
         <div class="orange">
-            <div class="ab">ab:</div>
-            <div class="price font-bold promo1">{PRICES.VerbrauchsausweisWohnen[0]}</div>
-            <div class="mwst">inkl. 19% MwSt.</div>
+          zur Produktübersicht
         </div>
         <div class="blue-bottom">
-            <div class="cta">jetzt sofort Energieausweis<br>online erstellen</div> 
+            jetzt sofort Energieausweis<br>online erstellen
         </div>
     </div>
 
     <div class="saeule">
-        <div class="blue-top">
-            <img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Gewerbe Verbrauchsausweis"/>
-            <div class="name">Bedarfsausweis<br>Wohngebäude</div> 
-        </div>   
+      <BApromo client:load /> 
        
         <div class="white">
-            <div class="services">fundiert </div>
-			<div class="services">
-                <span>Berechnung mit Erfassung der Gebäudegeometrie, U-Werte der Außenbauteile sowie dem Wirkungsgrad der Heizung.</span>
-                <span class="icon positive">✔</span>
+          <div class="lg:mb-0 lg:pr-5 lg:w-full mb-6 w-full">
+            <p class="block text-xl font-light tracking-tight text-gray-900 leading-6 sm:text-3xl text-right pr-2">
+              fundiert
+              <br/>
+            </p>
+          </div>
+          <div class="lg:w-full flex flex-row w-full items-end h-auto">
+            <div class="lg:w-5/6 w-5/6">
+              <p class="produkttext">Berechnung anhand der
+                  Gebäudegeometrie, U-Werte der Außenbauteile sowie dem Wirkungsgrad der Heizung.</p>
             </div>
-			<div class="services">
-                <span>Zulässig bei Vermietung, Verkauf, Modernisierung und Neubau</span>
-                <span class="icon positive">✔</span>
+            <div class="lg:w-1/6 w-1/6 h-16">
+              <p class="haken">✔</p>
             </div>
-			<div class="services">
-                <span>Zulässig für alle Gebäude.</span>
-                <span class="icon positive">✔</span>
+          </div>
+          <div class="lg:w-full flex flex-row items-end w-full">
+            <div class="lg:w-5/6 w-5/6">
+              <p class="produkttext">Zulässig bei Vermietung, Verkauf,
+                  Modernisierung und Neubau.</p>
             </div>
-			<div class="services">
-                <span>Kann als Grundlage für Sanierungsvarianten sowie weitere Maßnahmen (z.B. iSFP) herangezogen werden.</span>
-                <span class="icon positive">✔</span>
+            <div class="lg:w-1/6 items-end w-1/6 h-16">
+              <p class="haken">✔</p>
             </div>
-			<div class="services">
-                <span>Fundierte vergleichbare Berechnung die bei den Banken für die Finanzierungsunterlagen immer  akzeptiert wird.</span>
-               <span class="icon positive">✔</span>
+          </div>
+          <div class="lg:w-full flex flex-row items-end w-full">
+            <div class="lg:w-5/6 w-5/6">
+              <p class="produkttext">Zulässig für alle Gebäude, insbesondere
+                  alte und unsanierte Objekte.</p>
             </div>
+            <div class="lg:w-1/6 items-end w-1/6 h-16">
+              <p class="haken">✔</p>
+            </div>
+          </div>
+          <div class="lg:w-full flex flex-row items-end w-full">
+            <div class="lg:w-5/6 w-5/6">
+              <p class="produkttext">Kann als Grundlage für Sanierungsvarianten
+                  sowie weitere Maßnahmen (z.B. iSFP) herangezogen werden.</p>
+            </div>
+            <div class="lg:w-1/6 items-end w-1/6 h-16">
+              <p class="haken">✔</p>
+            </div>
+          </div>
+          <div class="flex flex-row items-end w-full">
+            <div class="lg:w-5/6 w-5/6">
+              <p class="produkttext">Objektive&nbsp; Berechnung die für die
+                  Kreditunterlagen besser geeignet ist.</p>
+            </div>
+            <div class="items-end w-1/6 h-16">
+              <p class="haken">✔</p>
+            </div>
+          </div>
         </div>
+        
         <div class="orange">
-            <div class="ab">ab:</div>
-            <div class="price font-bold promo1">{PRICES.BedarfsausweisWohnen[0]}</div>
-            <div class="mwst">inkl. 19% MwSt.</div>
-            </div>
-        <div class="blue-bottom">
-            <div class="cta">jetzt sofort Energieausweis<br>online erstellen</div> 
+            zur Produktübersicht
         </div>
+        
+        <div class="blue-bottom">
+            jetzt sofort Energieausweis<br>online erstellen
+        </div>
+    
     </div>
-
-   
 </div>
 
-
-<div id="saeulen">
-
-     <div class="saeule">
-        <div class="blue-top">
-            <img class="" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Wohnhaus Bedarfsausweis"/>
-            <div class="name">Verbrauchsausweis<br>Gewerbe</div> 
-        </div>   
-        <div class="orange">
-            <div class="ab">ab:</div>
-            <div class="price font-bold promo1">{PRICES.VerbrauchsausweisGewerbe[0]}</div>
-            <div class="mwst">inkl. 19% MwSt.</div>
-        </div>
-        <div class="white">
-            <div class="services">Unsere Leistungen: </div>
-			<div class="services">Prüfung durch Dipl.Ing.</div>
-			<div class="services">Vorschau als PDF</div>
-			<div class="services">PDF per E-Mail</div>
-			<div class="services">Registrierung beim DiBt</div>
-			<div class="services">Bearbeitung innhalb 24h</div>
-			<div class="services">rechtssicher nach GEG</div>
-			<div class="services">telefonische Beratung</div>
-        </div>
-        <div class="blue-bottom">
-            <div class="cta">jetzt sofort Energieausweis<br>online erstellen</div> 
-        </div>
-    </div>
-
-
-    <div class="saeule">
-        <div class="blue-top">
-            <img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Gewerbe Bedarfsausweis"/>
-            <div class="name">Bedarfsausweis<br>Gewerbe</div> 
-        </div>   
-        <div class="orange">
-            <div class="ab">ab:</div>
-            <div class="price font-bold promo1">{PRICES.BedarfsausweisGewerbe[0]}</div>
-            <div class="mwst">inkl. 19% MwSt.</div>
-        </div>
-        <div class="white">
-            <div class="services">Unsere Leistungen: </div>
-			<div class="services">Prüfung durch Dipl.Ing.</div>
-			<div class="services">Vorschau als PDF</div>
-			<div class="services">PDF per E-Mail</div>
-			<div class="services">Registrierung beim DiBt</div>
-			<div class="services">Bearbeitung innhalb 24h</div>
-			<div class="services">rechtssicher nach GEG</div>
-			<div class="services">telefonische Beratung</div>
-        </div>
-        <div class="blue-bottom">
-            <div class="cta">jetzt sofort Energieausweis<br>online erstellen</div> 
-        </div>
-    </div>
-
-</div>
-
-<style lang="scss">
+<style lang="scss">  
 #saeulen{@apply grid grid-cols-[1fr] gap-4 
-    lg:grid-cols-[1fr,1fr,1fr]
-    xl:grid-cols-[1fr,1fr,1fr,1fr];
+    sm:grid-cols-[1fr,1fr]
+    md:grid-cols-[1fr,1fr]
+    lg:grid-cols-[1fr,1fr]
+    xl:grid-cols-[1fr,1fr];
 .saeule{@apply grid;
-img{@apply w-full justify-self-center mb-1 min-h-[50px] }
+img{@apply w-1/2 justify-self-center mb-1 mt-3 min-h-[30px] }
 .blue-top{@apply bg-secondary text-white text-center font-bold rounded-md mb-1 p-4}
 .name{@apply w-full}
 .name{font-size: clamp(15px, 2vh, 18px)}
-.orange{@apply bg-primary text-white text-center rounded-t-md p-2 relative}
+.orange{@apply bg-primary text-white text-center font-bold rounded-t-md p-2 relative}
 .ab{@apply leading-[1]}
 .mwst{@apply leading-[auto]}
 .price{font-size: clamp(15px, 5vh, 50px)}
@@ -331,6 +161,9 @@ img{@apply w-full justify-self-center mb-1 min-h-[50px] }
 .services:nth-child(even){@apply bg-white}
 .services:not(:last-child){@apply border-b-[1px] border-gray-300}
 .blue-bottom{@apply bg-secondary text-white text-center font-bold rounded-b-md p-4}
+.kreuz{@apply mb-4 text-2xl text-center text-primary mt-4 font-medium}
+.haken{@apply mb-4 text-2xl text-center text-secondary mt-4 font-medium}
+.produkttext{@apply mb-4 text-lg text-center mt-4}
 }
 
 }
diff --git a/src/components/design/header/Header.astro b/src/components/design/header/Header.astro
index af5d9e4d..4d09f541 100644
--- a/src/components/design/header/Header.astro
+++ b/src/components/design/header/Header.astro
@@ -5,14 +5,7 @@ import Login from "#sidebarCards/card-login.svelte";
 
 <header>
 
-<div class="max-w-[1920px] w-full grid relative bg-white
-
-sm:grid-cols-[0px_1fr_minmax(450px,450px)] sm:pl-6 sm:pr-3 sm:py-2
-md:grid-cols-[0px_1fr_minmax(450px,450px)] md:pl-6 md:pr-3 md:py-2
-lg:bg-[url('/images/header/header-bg.jpg')] lg:bg-cover
-lg:grid-cols-[minmax(350px,350px)1fr_minmax(450px,450px)] lg:gap-3 lg:px-5 lg:py-4
-xl:grid-cols-[minmax(350px,350px)1fr_minmax(450px,450px)] xl:gap-4 xl:px-5 xl:py-4
-2xl:grid-cols-[minmax(350px,350px)1fr_minmax(450px,450px)] 2xl:gap-5 2xl:px-5 2xl:py-4">
+<div class="flex flex-row max-w-[1920px] w-full bg-white p-2">
 
 
 
@@ -37,23 +30,21 @@ xl:grid-cols-[minmax(350px,350px)1fr_minmax(450px,450px)] xl:gap-4 xl:px-5 xl:py
 					Energieausweise nach aktuellem GEG
 		</h2> -->
 		
-<div></div>
-
-<div class="self-center justify-self-start
-		sm:justify-self-start
-		md:justify-self-start
-		lg:justify-self-center
-		xl:justify-self-center
-		2xl:justify-self-center">
-	<a href="/index_1">
-		<img class="w-[73px]" 
-		src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-Logo"/>
-	</a>
+<div class="flex flex row mb-1 items-end w-1/4 md:w-1/2 2xl:w-4/6">
+	<div class="ml-5 mr-3">
+		<a href="/index_1">
+			<img class="w-[95px]" 
+			src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-Logo"/>
+		</a>
+	</div>
+	<div class="pb-1.5 hidden md:block"><h1 class="text-secondary font-bold text-2xl lg:text-3xl">
+		Energieausweise online erstellen
+	</h1>
+	</div>
 </div>
 
-<div class="w-[450px]">
-		<Login client:load />
-		</div>
+<div class="w-3/4 md:w-1/2 2xl:w-2/6 2xl:hidden"><Login client:load /></div>
+<div class="2xl:w-2/6 hidden 2xl:block 2xl:flex 2xl:mb-2.5 2xl:items-end 2xl:justify-center"><div class="2xl:pl-20"><h2 class="text-secondary font-bold text-4xl">nach GEG 2024</h2></div></div>
 
 
 </div>
@@ -62,7 +53,7 @@ xl:grid-cols-[minmax(350px,350px)1fr_minmax(450px,450px)] xl:gap-4 xl:px-5 xl:py
 		<div class="px-2 flex flex-row w-full justify-end items-center bg-primary
 					lg:h-[14px] xl:h-[18px]">
 
-			<!-- <a
+			<!--- <a
 				class="header-button hidden md:block"
 				href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
 				>Energieausweis erstellen</a
@@ -70,8 +61,8 @@ xl:grid-cols-[minmax(350px,350px)1fr_minmax(450px,450px)] xl:gap-4 xl:px-5 xl:py
 			<a class="header-button hidden md:block" href="/kontakt"
 				>Kontakt</a
 			>
-			<a class="header-button hidden md:block" href="/agb">AGB</a>
-				-->
+			<a class="header-button hidden md:block" href="/agb">AGB</a>-->
+				
 				
 		</div>
 	</div>
diff --git a/src/components/design/sidebars/cards/card-BA-G-promo.svelte b/src/components/design/sidebars/cards/card-BA-G-promo.svelte
index c06325a9..be852fcf 100644
--- a/src/components/design/sidebars/cards/card-BA-G-promo.svelte
+++ b/src/components/design/sidebars/cards/card-BA-G-promo.svelte
@@ -10,16 +10,13 @@ class="	box card hidden bg-white px-6 py-4 mb-5
 
 <h2>Bedarfssausweis Gewerbe</h2>
 <hr class="mb-4">
-<img class="w-[80%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
-
+<img class="w-[70%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Bedarfsausweis"/>
+<p class="promo tracking-tighter text-[2rem] text-gray-700 pl-6">ab<span class="promo pl-[0.2rem]">{PRICES.BedarfsausweisGewerbe[0]}</span>€</p>
 <a href="./energieausweis-erstellen/bedarfsausweis-gewerbe/" id="link-BA-promo" 
         class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
                 hover:bg-primary
         " >jetzt Bedarfssausweis erstellen</a>
 </div>
-
-<p class="promo tracking-tighter absolute top-[9.7rem] left-[2.5rem] text-[2rem] text-gray-700">ab<span class="promo pl-[0.2rem]">300</span>€</p>
-
 </div>
 
 
diff --git a/src/components/design/sidebars/cards/card-BA-promo.svelte b/src/components/design/sidebars/cards/card-BA-promo.svelte
index 762156e3..7a39700e 100644
--- a/src/components/design/sidebars/cards/card-BA-promo.svelte
+++ b/src/components/design/sidebars/cards/card-BA-promo.svelte
@@ -3,23 +3,19 @@
 </script>
 	
 <div id ="card-BA-promo" 
-class="	box card hidden bg-white px-6 py-4 mb-5
-        lg:block">
+class="	box card bg-white px-6 py-4 mb-5">
 
 <div class="grid">
 
 <h2>Bedarfssausweis Wohngebäude</h2>
 <hr class="mb-4">
-<img class="w-[80%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
-
+<img class="w-[70%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
+<p class="promo tracking-tighter text-[2rem] text-gray-700 pl-6">ab<span class="promo pl-[0.2rem]">{PRICES.BedarfsausweisWohnen[0]}</span>€</p>
 <a href="./energieausweis-erstellen/bedarfsausweis-wohngebaeude/" id="link-BA-promo" 
         class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
                 hover:bg-primary
         " >jetzt Bedarfssausweis erstellen</a>
 </div>
-
-<p class="promo tracking-tighter absolute top-[9.7rem] left-[2.5rem] text-[2rem] text-gray-700">ab<span class="promo pl-[0.2rem]">{PRICES.BedarfsausweisWohnen[0]}</span>€</p>
-
 </div>
 
 
diff --git a/src/components/design/sidebars/cards/card-VA-G-promo.svelte b/src/components/design/sidebars/cards/card-VA-G-promo.svelte
index 716e0fcd..1b9283c6 100644
--- a/src/components/design/sidebars/cards/card-VA-G-promo.svelte
+++ b/src/components/design/sidebars/cards/card-VA-G-promo.svelte
@@ -3,23 +3,19 @@
 </script>
 	
 <div id ="card-VA-G-promo" 
-	class="	box card hidden bg-white px-6 py-4 mb-5
-			lg:block">
+	class="	box card bg-white px-6 py-4 mb-5">
 
 	<div class="grid">
 
 	<h2>Verbrauchsausweis Gewerbe</h2>
 	<hr class="mb-4">
-	<img class="w-[80%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Verbrauchsausweis"/>
-
+	<img class="w-[70%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Verbrauchsausweis"/>
+	<p class="promo tracking-tighter text-[2rem] text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisGewerbe[0]}</span>€</p>
 	<a href="./energieausweis-erstellen/verbrauchsausweis-gewerbe/" id="link-VA-promo" 
 			class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
 					hover:bg-primary
 			" >jetzt Verbrauchsausweis erstellen</a>
 	</div>
-
-	<p class="promo tracking-tighter absolute top-[9.7rem] left-[2.5rem] text-[2rem] text-gray-700">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisGewerbe[0]}</span>€</p>
-
 </div>
 
 
diff --git a/src/components/design/sidebars/cards/card-VA-promo.svelte b/src/components/design/sidebars/cards/card-VA-promo.svelte
index 5da1d304..2a062e12 100644
--- a/src/components/design/sidebars/cards/card-VA-promo.svelte
+++ b/src/components/design/sidebars/cards/card-VA-promo.svelte
@@ -3,23 +3,19 @@
 </script>
 	
 <div id ="card-VA-promo" 
-	class="	box card hidden bg-white px-6 py-4 mb-5
-			lg:block">
+	class="	box card bg-white px-6 py-4 mb-5">
 
 	<div class="grid">
 
 	<h2>Verbrauchsausweis Wohngebäude</h2>
 	<hr class="mb-4">
-	<img class="w-[80%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
-
+	<img class="w-[70%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
+	<p class="promo tracking-tighter text-[2rem] text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisWohnen[0]}</span>€</p>
 	<a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-VA-promo" 
 			class="	w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
 					hover:bg-primary
 			" >jetzt Verbrauchsausweis erstellen</a>
 	</div>
-
-	<p class="promo tracking-tighter absolute top-[9.7rem] left-[2.5rem] text-[2rem] text-gray-700">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisWohnen[0]}</span>€</p>
-
 </div>
 
 
diff --git a/src/components/design/sidebars/cards/card-login.svelte b/src/components/design/sidebars/cards/card-login.svelte
index ce82893a..6bde77f6 100644
--- a/src/components/design/sidebars/cards/card-login.svelte
+++ b/src/components/design/sidebars/cards/card-login.svelte
@@ -31,33 +31,38 @@
 
 	
 		<form on:submit={login}>
-			<div class="grid grid-cols-[1fr_1fr] gap-2">
-			<input
-				class="my-1 rounded-md px-2 py-1 ring-1 w-full"
-				type="text"
-				placeholder="nutzer@email.com"
-				name="email"
-				bind:value={email}
-				on:focus={() => (errorHidden = true)}
-				required
-			/>
-			<input
-				class="my-1 rounded-md px-2 py-1 ring-1 w-full"
-				type="password"
-				minlength="8"
-				placeholder="********"
-				name="passwort"
-				bind:value={passwort}
-				on:focus={() => (errorHidden = true)}
-				required
-			/>
-			{#if !errorHidden}
-			<div role="alert" class="alert alert-error" in:fade out:fade={{delay: 400}}>
-				<CrossCircled size={24} />
-				<span class="font-semibold">Das hat leider nicht geklappt, haben sie ihr Passwort und ihre Email Adresse richtig eingegeben?</span>
+			<div class="">
+			
+				<div class="flex flex-row">
+					<input
+					class="my-1 rounded-md px-2 py-1 ring-1 w-full mr-1.5"
+					type="text"
+					placeholder="nutzer@email.com"
+					name="email"
+					bind:value={email}
+					on:focus={() => (errorHidden = true)}
+					required
+				/>
+				<input
+					class="my-1 rounded-md px-2 py-1 ring-1 w-full"
+					type="password"
+					minlength="8"
+					placeholder="********"
+					name="passwort"
+					bind:value={passwort}
+					on:focus={() => (errorHidden = true)}
+					required
+				/>
+				{#if !errorHidden}
+				<div role="alert" class="alert alert-error" in:fade out:fade={{delay: 400}}>
+					<CrossCircled size={24} />
+					<span class="font-semibold">Das hat leider nicht geklappt, haben sie ihr Passwort und ihre Email Adresse richtig eingegeben?</span>
+				</div>
+				{/if}
 			</div>
-			{/if}
+				
 		
+			<div class="flex flex-row">
 			<div class="w-full text-center self-center">
 				<a
 					class="justify-self-start text-sm font-bold no-underline hover:text-primary"
@@ -69,8 +74,9 @@
 				>
 			</div>
 
-			<button class="my-1 rounded-md px-2 py-1 ring-1 w-[50%] bg-secondary justify-self-end text-white font-bold hover:bg-primary" type="submit">Einloggen</button>
-
+			<button class="my-1 rounded-md px-2 py-1 ring-1 w-[35%] bg-secondary justify-self-end text-white font-bold hover:bg-primary" type="submit">Login</button>
+			</div>
+			
 		</div>
 		</form>
 
diff --git a/src/components/design/sidebars/right/SidebarRight.astro b/src/components/design/sidebars/right/SidebarRight.astro
index aa840234..dd15f556 100644
--- a/src/components/design/sidebars/right/SidebarRight.astro
+++ b/src/components/design/sidebars/right/SidebarRight.astro
@@ -1,5 +1,5 @@
 ---
-
+import Login from "#sidebarCards/card-login_1.svelte";
 import Contact from "#sidebarCards/card-contact.svelte";
 import Review from "#sidebarCards/card-review.svelte";
 import VApromo from "#sidebarCards/card-VA-promo.svelte";
@@ -11,13 +11,13 @@ import BAGpromo from "#sidebarCards/card-BA-G-promo.svelte";
 <div class="hidden
             xl:flex xl:flex-col xl:grow
             ">
-
+    <Login client:load />
     <Contact client:load />
     <Review client:load />
-    <VApromo client:load />
     <VAGpromo client:load />
-    <BApromo client:load />
     <BAGpromo client:load />
+    <VApromo client:load />
+    <BApromo client:load />  
 </div>
 
 
diff --git a/src/layouts/Layout_1.astro b/src/layouts/Layout_1.astro
index 65c06454..c1286574 100644
--- a/src/layouts/Layout_1.astro
+++ b/src/layouts/Layout_1.astro
@@ -31,7 +31,7 @@ const { title } = Astro.props;
 	</head>
 
 	<body>
-		<container class="w-full max-w-[1920px]">
+	<container class="w-full max-w-[1920px]">
 		
 		<Header />
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d4d10fb5..e3c2e2a5 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,7 +5,7 @@ import BannerPrice from "#content/banner-saeule.svelte";
 ---
 
 <Layout title="Energieausweis online erstellen - Online Energieausweis">
-	<h1>Energieausweis online erstellen</h1>
+	<h1 class="md:hidden">Energieausweis online erstellen</h1>
 	<BannerPrice client:load />
 </Layout>