diff --git a/src/pages/welcher-energieausweis/index.astro b/src/pages/welcher-energieausweis/index.astro
new file mode 100644
index 00000000..c081aecf
--- /dev/null
+++ b/src/pages/welcher-energieausweis/index.astro
@@ -0,0 +1,222 @@
+---
+
+import Layout from "#layouts/Layout.astro";
+
+---
+
+<Layout title="Welcher Energieausweis">
+
+<script>
+$(document).ready(function () {
+  // Initial setup: Reset all selections
+  $('.OEA_bitte').prop('selected', true);
+  $('#OEA_result').hide();
+
+  // Handle main type selection
+  $('#OEA_changeTyp').change(function () {
+    const chTyp = $('#OEA_changeTyp').val();
+    const chAnlass = $('#OEA_changeAnlass').val();
+
+    // Reset second-level options
+    $('.OEA_bitte').prop('selected', true);
+    $('.OEA_title2, .OEA_auswahl2').hide();
+
+    // Logic for Gewerbegebäude and Neubau
+    if (chTyp === 'Gewerbegebäude' || chAnlass === 'Neubau') {
+      if (chAnlass) $('#OEA_result').show();
+    } else if (chAnlass && chTyp) {
+      $('.OEA_title2, .OEA_auswahl2').show();
+      $('#OEA_result').hide();
+    }
+
+    // Update result
+    getResult();
+  });
+
+  // Handle secondary selection
+  $('.OEA_auswahl2').change(function () {
+    const baujahr = parseInt($('#changeBaujahr').val());
+    const einheiten = parseInt($('#changeEinheiten').val());
+    const status = parseInt($('#changeStatus').val());
+
+    const checkAusweis = baujahr + einheiten + status;
+    const chTyp = $('#OEA_changeTyp').val();
+
+    // Determine Ausweis type
+    if (checkAusweis === 3) {
+      const BA = `https://online-energieausweis.org/energieausweis-erstellen/bedarfsausweis-erstellen.php?recode=${$('#recode').val()}`;
+      $('#OEA_result_text').html(
+        `Ihr Gebäude wurde vor 1978 gebaut, hat weniger als 5 Wohneinheiten und ist energetisch unsaniert. In diesem Fall benötigen Sie einen Bedarfsausweis.<br />
+         <div class="empfehlungen">
+           <a class="OEA_toUS" href="${BA}" target="_blank">Jetzt Bedarfsausweis online erstellen</a>
+         </div>`
+      );
+      $('#OEA_result').show();
+    } else {
+      getResult();
+      $('#OEA_result').show();
+    }
+  });
+
+  // General result update function
+  function getResult() {
+    const chTyp = $('#OEA_changeTyp').val();
+    const chAnlass = $('#OEA_changeAnlass').val();
+
+    // Example: Update based on Einfamilienhaus and Vermietung/Verkauf
+    if (chTyp === 'Einfamilienhaus' && chAnlass === 'Vermietung/Verkauf') {
+      const VA = `https://online-energieausweis.org/energieausweis-erstellen/verbrauchsausweis-erstellen.php?recode=${$('#recode').val()}`;
+      $('#OEA_result_text').html(
+        `Für Vermietung/Verkauf können Sie einen Verbrauchsausweis erstellen.<br />
+         <div class="empfehlungen">
+           <a class="OEA_toUS" href="${VA}" target="_blank">Jetzt Verbrauchsausweis online erstellen</a>
+         </div>`
+      );
+    }
+  }
+
+  // Additional listeners for other dropdowns
+  $('#OEA_changeAnlass').change(getResult);
+});
+</script
+
+<h1 class="text-3xl">Welcher Energieausweis?</h1>
+
+<div class="mt-12 m-auto w-[90%] relative">
+<div id="OEA_widget">
+  <input id="recode" type="hidden" value="widgetvorlage">
+
+  <div id="OEA_input">
+    <div class="OEA_item1">
+      <div class="OEA_title1">Gebäudetyp</div>
+      <select class="OEA_auswahl1" id="OEA_changeTyp">
+        <option value="" selected disabled>bitte auswählen</option>
+        <option value="Einfamilienhaus">Einfamilienhaus</option>
+        <option value="Zweifamilienhaus">Zweifamilienhaus</option>
+        <option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
+        <option value="Gewerbegebäude">Gewerbegebäude</option>
+        <option value="Mischgebäude">Mischgebäude</option>
+      </select>
+    </div>
+
+    <div class="OEA_item2">
+      <div class="OEA_title1">Anlass</div>
+      <select class="OEA_auswahl1" id="OEA_changeAnlass">
+        <option value="" selected disabled>bitte auswählen</option>
+        <option value="Vermietung/Verkauf">Vermietung/Verkauf</option>
+        <option value="Modernisierung">Modernisierung</option>
+        <option value="Neubau">Neubau</option>
+        <option value="Erweiterung">Erweiterung</option>
+        <option value="Aushangpflicht">Aushangpflicht</option>
+      </select>
+    </div>
+
+    <div class="OEA_item3">
+      <div class="OEA_title2">Baujahr</div>
+      <select class="OEA_auswahl2" id="changeBaujahr">
+        <option value="" selected disabled>bitte auswählen</option>
+        <option value="1">vor 1978</option>
+        <option value="0">nach 1977</option>
+      </select>
+    </div>
+
+    <div class="OEA_item4">
+      <div class="OEA_title2">Wohneinheiten</div>
+      <select class="OEA_auswahl2" id="changeEinheiten">
+        <option value="" selected disabled>bitte auswählen</option>
+        <option value="1">bis 4 Wohneinheiten</option>
+        <option value="0">mehr als 4 Wohneinheiten</option>
+      </select>
+    </div>
+
+    <div class="OEA_item5">
+      <div class="OEA_title2">Sanierungsstatus</div>
+      <select class="OEA_auswahl2" id="changeStatus">
+        <option value="" selected disabled>bitte auswählen</option>
+        <option value="0">saniert</option>
+        <option value="1">unsaniert</option>
+      </select>
+    </div>
+
+    <div class="OEA_item6 result">
+      <div id="OEA_result">
+        <div class="OEA_title3">Das Ergebnis Ihrer Anfrage:</div>
+        <p id="OEA_result_text"></p>
+      </div>
+    </div>
+
+    <div class="OEA_item7 referrer">
+      <div id="OEA_logo_referrer">
+        <img src="https://widgetvorlage-widget.online-energieausweis.org/img/logo.png" alt="Logo">
+      </div>
+    </div>
+
+    <div class="OEA_item8 ibcornelsen">
+      <div id="OEA_logo_IBC">
+        <a class="IBC_link" href="https://online-energieausweis.org?recode=widgetvorlage" title="IB Cornelsen">
+          <div id="IBC_LOGO">powered by</div>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+</div>
+
+<style lang="scss">
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+#OEA_widget {
+  @apply bg-white p-6 rounded-lg shadow-lg space-y-6;
+
+  #OEA_input {
+    @apply space-y-4;
+
+    .OEA_item1, .OEA_item2, .OEA_item3, .OEA_item4, .OEA_item5 {
+      @apply space-y-2;
+
+      .OEA_title1, .OEA_title2 {
+        @apply font-bold text-lg text-white p-2 rounded;
+      }
+    }
+
+    .OEA_title1 {
+      @apply bg-blue-900;
+    }
+
+    .OEA_title2 {
+      @apply bg-blue-300 text-blue-900;
+    }
+
+    .OEA_auswahl1, .OEA_auswahl2 {
+      @apply w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500;
+    }
+
+    #OEA_result {
+      @apply p-4 border-2 border-blue-300 rounded-lg text-gray-700;
+    }
+
+    .OEA_title3 {
+      @apply text-xl font-semibold text-blue-900;
+    }
+
+    #OEA_logo_referrer img {
+      @apply w-full max-w-xs mx-auto;
+    }
+
+    #IBC_LOGO {
+      @apply text-center text-gray-500 font-semibold text-sm mt-2;
+    }
+  }
+}
+
+select {
+    @apply w-full p-2 border border-gray-300 rounded focus:ring focus:ring-blue-500;
+  }
+
+
+.empfehlungen a {
+    @apply text-blue-600 underline hover:text-blue-800 font-semibold;
+  }
+</style>