diff --git a/package.json b/package.json
index a07f804e..5171b287 100644
--- a/package.json
+++ b/package.json
@@ -21,8 +21,8 @@
     "@astrojs/node": "^5.1.4",
     "@astrojs/svelte": "^2.2.0",
     "@astrojs/tailwind": "^3.1.3",
+    "@ibcornelsen/api": "link:@ibcornelsen/api",
     "@ibcornelsen/database": "link:@ibcornelsen/database",
-		"@ibcornelsen/api": "link:@ibcornelsen/api",
     "@ibcornelsen/ui": "^0.0.2",
     "@mollie/api-client": "^3.7.0",
     "@trpc/client": "^10.45.0",
@@ -30,6 +30,7 @@
     "@types/body-scroll-lock": "^3.1.2",
     "astro": "^2.5.1",
     "astro-i18next": "1.0.0-beta.21",
+    "astro-spa": "^1.3.9",
     "body-scroll-lock": "^4.0.0-beta.0",
     "buffer": "^6.0.3",
     "bun": "^1.0.2",
diff --git a/src/components/AnsichtsausweisButton.svelte b/src/components/AnsichtsausweisButton.svelte
index a6e777f8..3d130a0c 100644
--- a/src/components/AnsichtsausweisButton.svelte
+++ b/src/components/AnsichtsausweisButton.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { GebaeudeStammdaten, VerbrauchsausweisWohnen } from "@ibcornelsen/database";
+	import { BedarfsausweisWohnen, GebaeudeStammdaten, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "@ibcornelsen/database";
 	import { Buffer } from "buffer";
 
-	export let ausweis: VerbrauchsausweisWohnen;
+	export let ausweis: VerbrauchsausweisWohnen | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
 	export let gebaeude: GebaeudeStammdaten;
 
 	let base64: string = "";
diff --git a/src/components/Ausweis/AusweisPreviewContainer.svelte b/src/components/Ausweis/AusweisPreviewContainer.svelte
index 61b2d582..be056632 100644
--- a/src/components/Ausweis/AusweisPreviewContainer.svelte
+++ b/src/components/Ausweis/AusweisPreviewContainer.svelte
@@ -3,11 +3,11 @@
 	import DatenblattButton from "#components/DatenblattButton.svelte";
 	import HelpLabel from "#components/HelpLabel.svelte";
 
-	export let ausweis: VerbrauchsausweisWohnen;
+	export let ausweis: VerbrauchsausweisWohnen | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
 	export let gebaeude: GebaeudeStammdaten;
 
 	import ImageGrid from "../ImageGrid.svelte";
-	import { GebaeudeStammdaten, VerbrauchsausweisWohnen } from "@ibcornelsen/database";
+	import { BedarfsausweisWohnen, GebaeudeStammdaten, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "@ibcornelsen/database";
 
 	let images: (File & { data: string })[] = [];
 </script>
diff --git a/src/components/Ausweis/Ausweisart.svelte b/src/components/Ausweis/Ausweisart.svelte
index e717d8f1..f9a9327a 100644
--- a/src/components/Ausweis/Ausweisart.svelte
+++ b/src/components/Ausweis/Ausweisart.svelte
@@ -4,76 +4,44 @@
 	import { addNotification, deleteNotification } from "@ibcornelsen/ui";
 	import TagInput from "../TagInput.svelte";
 	import { writable } from "svelte/store";
-	import { GebaeudeStammdaten, VerbrauchsausweisWohnen } from "@ibcornelsen/database";
+	import {
+	BedarfsausweisWohnen,
+		Enums,
+		GebaeudeStammdaten,
+		VerbrauchsausweisGewerbe,
+		VerbrauchsausweisWohnen,
+	} from "@ibcornelsen/database";
 
 	export let gebaeude: GebaeudeStammdaten;
-	export let ausweis: VerbrauchsausweisWohnen;
+	export let ausweis: VerbrauchsausweisWohnen | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
 
-	$: baujahrHeizung = writable(gebaeude.baujahr_heizung || [])
+	$: baujahrHeizung = writable(gebaeude.baujahr_heizung || []);
 	$: baujahr = writable(gebaeude.baujahr_gebaeude || []);
 </script>
 
 <div class="GRB">
 	<!-- Anlass für Energieausweis -->
 	<div class="flex flex-col">
-		<span
-			>Anlass für Energieausweis *
-		</span>
-		<div
-			class="grid grid-cols-2 gap-x-2 items-center lg:grid-cols-3"
-		>
-			<label class="radio-inline">
-				<input
-					type="radio"
-					value="Neubau"
-					name="IGanlass"
-					bind:group={ausweis.ausstellgrund}
-				/>Neubau</label
-			>
-			<label class="radio-inline"
-				><input
-					type="radio"
-					value="Vermietung"
-					checked
-					name="IGanlass"
-					bind:group={ausweis.ausstellgrund}
-				/>Vermietung</label
-			>
-			<label class="radio-inline"
-				><input
-					type="radio"
-					value="Verkauf"
-					name="IGanlass"
-					bind:group={ausweis.ausstellgrund}
-				/>Verkauf</label
-			>
-			<label class="radio-inline"
-				><input
-					type="radio"
-					value="Modernisierung"
-					name="IGanlass"
-					bind:group={ausweis.ausstellgrund}
-				/>Modernisierung</label
-			>
-			<label class="radio-inline"
-				><input
-					type="radio"
-					value="Sonstiges"
-					name="IGanlass"
-					bind:group={ausweis.ausstellgrund}
-				/>Sonstiges</label
-			>
+		<span>Anlass für Energieausweis * </span>
+		<div class="grid grid-cols-2 gap-x-2 items-center lg:grid-cols-3">
+			{#each Object.entries(Enums.Ausstellgrund) as [name, ausstellgrund]}
+				<label class="radio-inline">
+					<input
+						type="radio"
+						value={ausstellgrund}
+						bind:group={ausweis.ausstellgrund}
+					/>{name}</label
+				>
+			{/each}
 		</div>
 	</div>
 
 	<!-- Baujahr Heizung -->
 	<div class="form-group col-md-2">
 		<HelpLabel title="Baujahr Heizung *">
-			Bitte geben Sie hier das Baujahr der
-			Heizungsanlage ein. Sollten
-			unterschiedliche Baujahre vorliegen,
-			dann geben Sie einen Zeitbereich ein <br
-			/>z.B. 1994-2001.
+			Bitte geben Sie hier das Baujahr der Heizungsanlage ein. Sollten
+			unterschiedliche Baujahre vorliegen, dann geben Sie einen
+			Zeitbereich ein <br />z.B. 1994-2001.
 		</HelpLabel>
 		<div>
 			<TagInput
@@ -83,17 +51,20 @@
 				onFocusIn={() => {
 					addNotification({
 						message: "Info",
-						subtext: "Wussten sie, dass sie mehrere Jahre angeben können in denen z.B. Renovierungen an ihrer Heizung durchgeführt wurden. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
+						subtext:
+							"Wussten sie, dass sie mehrere Jahre angeben können in denen z.B. Renovierungen an ihrer Heizung durchgeführt wurden. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
 						dismissable: true,
 						uid: "HEIZUNG_BAUJAHR",
 						timeout: 0,
-						type: "info"
+						type: "info",
 					});
 				}}
 				onFocusOut={() => {
-					deleteNotification("HEIZUNG_BAUJAHR")
+					deleteNotification("HEIZUNG_BAUJAHR");
 				}}
-				className="{auditHeizungGebaeudeBaujahr(gebaeude) ? "linked" : ""}"
+				className={auditHeizungGebaeudeBaujahr(gebaeude)
+					? "linked"
+					: ""}
 				bind:tags={baujahrHeizung}
 			/>
 		</div>
@@ -102,12 +73,9 @@
 	<!-- Baujahr -->
 	<div class="form-group col-md-2">
 		<HelpLabel title="Baujahr Gebäude *">
-			Bitte geben Sie hier das Baujahr des
-			Gebäudes ein. Sollte eine eine
-			grundlegende Sanierung von Dach,
-			Fenster und Heizung stattgefunden
-			haben, dann berücksichtigen Sie das
-			in dem Sie bei Sanierungsstatus
+			Bitte geben Sie hier das Baujahr des Gebäudes ein. Sollte eine eine
+			grundlegende Sanierung von Dach, Fenster und Heizung stattgefunden
+			haben, dann berücksichtigen Sie das in dem Sie bei Sanierungsstatus
 			-saniert- angeben.
 		</HelpLabel>
 		<div>
@@ -118,17 +86,20 @@
 				onFocusIn={() => {
 					addNotification({
 						message: "Info",
-						subtext: "Wussten sie, dass sie mehrere Jahre angeben können in denen z.B. Renovierungen an ihrem Gebäude durchgeführt wurden. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
+						subtext:
+							"Wussten sie, dass sie mehrere Jahre angeben können in denen z.B. Renovierungen an ihrem Gebäude durchgeführt wurden. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
 						dismissable: true,
 						uid: "GEBAEUDE_BAUJAHR",
 						timeout: 0,
-						type: "info"
+						type: "info",
 					});
 				}}
 				onFocusOut={() => {
-					deleteNotification("GEBAEUDE_BAUJAHR")
+					deleteNotification("GEBAEUDE_BAUJAHR");
 				}}
-				className="{auditHeizungGebaeudeBaujahr(gebaeude) ? "linked" : ""}"
+				className={auditHeizungGebaeudeBaujahr(gebaeude)
+					? "linked"
+					: ""}
 				bind:tags={baujahr}
 			/>
 		</div>
@@ -137,9 +108,8 @@
 	<!-- Anzahl der Wohnungen -->
 	<div class="form-group col-md-2">
 		<HelpLabel title="Anzahl Wohnungen *">
-			Bitte geben Sie hier die Anzahl der
-			Wohnungen ein, die sich im Gebäude
-			befinden.
+			Bitte geben Sie hier die Anzahl der Wohnungen ein, die sich im
+			Gebäude befinden.
 		</HelpLabel>
 		<div>
 			<input
@@ -159,12 +129,9 @@
 	<!-- Dachgeschoss -->
 	<div class="form-group col-md-2">
 		<HelpLabel title="Sanierungsstatus *">
-			Bitte geben Sie an ob das Gebäude
-			energetisch saniert oder unsaniert
-			ist. Wenn das Dach mindestens 12 cm
-			gedämmt und Heizung sowie Fenster
-			nicht älter als 30 Jahre sind,
-			können Sie saniert auswählen.
+			Bitte geben Sie an ob das Gebäude energetisch saniert oder unsaniert
+			ist. Wenn das Dach mindestens 12 cm gedämmt und Heizung sowie
+			Fenster nicht älter als 30 Jahre sind, können Sie saniert auswählen.
 		</HelpLabel>
 		<div>
 			<select
@@ -175,12 +142,8 @@
 				bind:value={gebaeude.saniert}
 			>
 				<option disabled>Bitte auswählen</option>
-				<option value={true}
-					>saniert</option
-				>
-				<option value={false}
-					>unsaniert</option
-				>
+				<option value={true}>saniert</option>
+				<option value={false}>unsaniert</option>
 			</select>
 		</div>
 	</div>
@@ -195,4 +158,4 @@
 	.radio-inline {
 		@apply flex items-center;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Ausweis/BilderZusatzsysteme.svelte b/src/components/Ausweis/BilderZusatzsysteme.svelte
index a76cafb9..662aad3d 100644
--- a/src/components/Ausweis/BilderZusatzsysteme.svelte
+++ b/src/components/Ausweis/BilderZusatzsysteme.svelte
@@ -5,10 +5,10 @@
 	import DaemmungImage from "./DaemmungImage.svelte";
 	import FensterImage from "./FensterImage.svelte";
 	import Label from "../Label.svelte";
-	import { GebaeudeStammdaten, VerbrauchsausweisWohnen } from "@ibcornelsen/database";
+	import { BedarfsausweisWohnen, GebaeudeStammdaten, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "@ibcornelsen/database";
 
 	export let gebaeude: GebaeudeStammdaten;
-	export let ausweis: VerbrauchsausweisWohnen;
+	export let ausweis: VerbrauchsausweisWohnen | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
 </script>
 
 
diff --git a/src/components/Ausweis/DaemmungImage.svelte b/src/components/Ausweis/DaemmungImage.svelte
index a432759a..ae3d372d 100644
--- a/src/components/Ausweis/DaemmungImage.svelte
+++ b/src/components/Ausweis/DaemmungImage.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import ImageGrid from "../ImageGrid.svelte";;
-	import { VerbrauchsausweisWohnen } from "@ibcornelsen/database";
+	import { BedarfsausweisWohnen, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "@ibcornelsen/database";
 
 	let images: (File & { data: string })[] = [];
-	export let ausweis: VerbrauchsausweisWohnen;
+	export let ausweis: VerbrauchsausweisWohnen | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
 </script>
 
 <div class="grid grid-cols-2 gap-4">
diff --git a/src/components/Ausweis/FensterImage.svelte b/src/components/Ausweis/FensterImage.svelte
index ebe97cbf..95f80448 100644
--- a/src/components/Ausweis/FensterImage.svelte
+++ b/src/components/Ausweis/FensterImage.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import ImageGrid from "../ImageGrid.svelte";;
-	import { VerbrauchsausweisWohnen } from "@ibcornelsen/database";
+	import { BedarfsausweisWohnen, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "@ibcornelsen/database";
 
 	let images: (File & { data: string })[] = [];
-	export let ausweis: VerbrauchsausweisWohnen;
+	export let ausweis: VerbrauchsausweisWohnen | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
 </script>
 
 <div class="grid grid-cols-2 gap-4">
diff --git a/src/components/Ausweis/HeizungImage.svelte b/src/components/Ausweis/HeizungImage.svelte
index fb83ef46..784e3860 100644
--- a/src/components/Ausweis/HeizungImage.svelte
+++ b/src/components/Ausweis/HeizungImage.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import ImageGrid from "../ImageGrid.svelte";;
-	import { VerbrauchsausweisWohnen } from "@ibcornelsen/database";
+	import { BedarfsausweisWohnen, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "@ibcornelsen/database";
 
 	let images: (File & { data: string })[] = [];
-	export let ausweis: VerbrauchsausweisWohnen;
+	export let ausweis: VerbrauchsausweisWohnen | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
 </script>
 
 <div class="grid grid-cols-2 gap-4">
diff --git a/src/components/Ausweis/Verbrauch.svelte b/src/components/Ausweis/Verbrauch.svelte
index 8ee7322a..078ee040 100644
--- a/src/components/Ausweis/Verbrauch.svelte
+++ b/src/components/Ausweis/Verbrauch.svelte
@@ -4,7 +4,7 @@
 	import Label from "../Label.svelte";
 	import fuelList from "./fuelList";
 	import { auditVerbrauchAbweichung } from "../Verbrauchsausweis/audits/VerbrauchAbweichung";
-	import { GebaeudeStammdaten, VerbrauchsausweisWohnen } from "@ibcornelsen/database";
+	import { GebaeudeStammdaten, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "@ibcornelsen/database";
 
 	let availableYears = [
 		2018, 2019,
@@ -25,7 +25,7 @@
 	];
 
 	export let gebaeude: GebaeudeStammdaten;
-	export let ausweis: VerbrauchsausweisWohnen;
+	export let ausweis: VerbrauchsausweisWohnen | VerbrauchsausweisGewerbe;
 
 	const fuelMap: Record<string, string[]> = {};
 	for (const fuel of fuelList) {
diff --git a/src/components/Bedarfsausweis/BedarfsausweisContent.svelte b/src/components/Bedarfsausweis/BedarfsausweisContent.svelte
index 5effb71c..5ea671bd 100644
--- a/src/components/Bedarfsausweis/BedarfsausweisContent.svelte
+++ b/src/components/Bedarfsausweis/BedarfsausweisContent.svelte
@@ -10,8 +10,9 @@
 	import BilderZusatzsysteme from "../Ausweis/BilderZusatzsysteme.svelte";
 	import moment from "moment";
 	import { BitChecker } from "src/lib/BitChecker";
+	import { BedarfsausweisWohnen } from "@ibcornelsen/database";
 
-	let ausweis = new Bedarfsausweis();
+	let ausweis: BedarfsausweisWohnen = {} as BedarfsausweisWohnen;
 
 	let daemmungsBreiten = [0, 0.02, 0.05, 0.08, 0.12, 0.16, 0.2, 0.3, 0.4];
 
diff --git a/src/components/DatenblattButton.svelte b/src/components/DatenblattButton.svelte
index b9a6995b..0ac80617 100644
--- a/src/components/DatenblattButton.svelte
+++ b/src/components/DatenblattButton.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { GebaeudeStammdaten, VerbrauchsausweisWohnen } from "@ibcornelsen/database";
+	import { BedarfsausweisWohnen, GebaeudeStammdaten, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "@ibcornelsen/database";
 	import { Buffer } from "buffer";
 
-	export let ausweis: VerbrauchsausweisWohnen;
+	export let ausweis: VerbrauchsausweisWohnen | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
 	export let gebaeude: GebaeudeStammdaten;
 
 	let base64: string = "";
diff --git a/src/components/ImageGrid.svelte b/src/components/ImageGrid.svelte
index ea585af1..61cff0ef 100644
--- a/src/components/ImageGrid.svelte
+++ b/src/components/ImageGrid.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import UploadImages from "./UploadImages.svelte";
-	import { VerbrauchsausweisWohnen } from "@ibcornelsen/database";
+	import { BedarfsausweisWohnen, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "@ibcornelsen/database";
 
 	export let images: (File & { data: string })[] = [];
 	export let max: number = 4;
-	export let ausweis: VerbrauchsausweisWohnen;
+	export let ausweis: VerbrauchsausweisWohnen | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
 </script>
 
 <div class="flex flex-col gap-4">
diff --git a/src/components/Kaufabschluss/PriceContainer.svelte b/src/components/Kaufabschluss/PriceContainer.svelte
index 113e387b..bbf8b423 100644
--- a/src/components/Kaufabschluss/PriceContainer.svelte
+++ b/src/components/Kaufabschluss/PriceContainer.svelte
@@ -1,18 +1,17 @@
 <script lang="ts">
-	export let prices: number[];
+	import { PRICES } from "#lib/constants";
+	import { BedarfsausweisWohnen, Enums, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "@ibcornelsen/database";
+
+	export let ausweis: VerbrauchsausweisWohnen | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
+
+	const prices = PRICES[ausweis.ausweisart];
+
+	export let services: { name: string, price: number, selected: boolean, id: Enums.Service }[] = [];
 
 	let basePrice: number = prices[0];
-	let Printing: boolean;
-	let Aushang: boolean;
-	let SameDayService: boolean;
-	let TelephoneAdvice: boolean;
 
 	$: price =
-		basePrice +
-		(Printing ? 9 : 0) +
-		(Aushang ? 10 : 0) +
-		(SameDayService ? 29 : 0) +
-		(TelephoneAdvice ? 75 : 0);
+		basePrice + services.reduce((acc, service) => (service.selected && acc + service.price) || acc, 0)
 </script>
 
 <div>
@@ -180,62 +179,20 @@
 		<table>
 			<strong>Zusatzleistungen:<br /></strong>
 
-			<tr>
-				<td
-					>Qualitätsdruck per Post (zusätzlich zur PDF Version) für 9€
-					inkl. MwSt.</td
-				>
-				<td
-					><input
-						type="checkbox"
-						class="IGZusatzleistung"
-						bind:checked={Printing}
-						name="QD"
-					/>
-				</td>
-			</tr>
-			<tr>
-				<td
-					>Aushang (für öffentliche Gebäude gesetzlich vorgeschrieben)
-					für 10€ inkl. MwSt.</td
-				>
-				<td
-					><input
-						type="checkbox"
-						class="IGZusatzleistung"
-						bind:checked={Aushang}
-						name="AH"
-					/>
-				</td>
-			</tr>
-			<tr>
-				<td
-					>Same Day Service (Bestellung Werktags vor 12:00 Uhr -
-					Ausstellung bis 18:00 Uhr am gleichen Tag) für 29€ inkl.
-					MwSt.</td
-				>
-				<td
-					><input
-						type="checkbox"
-						class="IGZusatzleistung"
-						bind:checked={SameDayService}
-						name="SD"
-					/>
-				</td>
-			</tr>
-			<tr>
-				<td
-					>Telefonische Energieeffizienzberatung für 75€ inkl. MwSt.</td
-				>
-				<td
-					><input
-						type="checkbox"
-						class="IGZusatzleistung"
-						bind:checked={TelephoneAdvice}
-						name="NA"
-					/>
-				</td>
-			</tr>
+			{#each services as service}
+				<tr>
+					<td
+						>{service.name}</td
+					>
+					<td
+						><input
+							type="checkbox"
+							class="IGZusatzleistung"
+							bind:checked={service.selected}
+						/>
+					</td>
+				</tr>
+			{/each}
 		</table>
 	</div>
 </div>
diff --git a/src/components/UploadImages.svelte b/src/components/UploadImages.svelte
index b915f117..c759d626 100644
--- a/src/components/UploadImages.svelte
+++ b/src/components/UploadImages.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { VerbrauchsausweisWohnen } from "@ibcornelsen/database";
+	import { BedarfsausweisWohnen, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "@ibcornelsen/database";
 
 	export let max: number = 2;
 
 	// Array of base64 encoded images read into the input.
 	export let images: (File & { data: string })[] = [];
-	export let ausweis: VerbrauchsausweisWohnen;
+	export let ausweis: VerbrauchsausweisWohnen | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
 
 	function getAllImages(this: HTMLInputElement) {
 		const files = this.files || [];
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 2fa116a5..dc7c5731 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -1 +1,33 @@
-export const API_ACCESS_TOKEN_COOKIE_NAME = "accessToken";
\ No newline at end of file
+import { Enums } from "@ibcornelsen/database";
+
+export const API_ACCESS_TOKEN_COOKIE_NAME = "accessToken";
+
+/**
+ * Ein Objekt welches alle definierten Preise für unsere Basisprodukte enthält.
+ */
+export const PRICES: Record<Enums.Ausweisart, [number, number, number]> = {
+	BedarfsausweisWohnen: [135, 145, 290],
+	VerbrauchsausweisWohnen: [45, 55, 180],
+	VerbrauchsausweisGewerbe: [65, 75, 360],
+};
+
+export const SERVICES: Record<Enums.Ausweisart, Record<Enums.Service, number>> = {
+	BedarfsausweisWohnen: {
+		Qualitaetsdruck: 9,
+		Aushang: 10,
+		SameDay: 29,
+		Telefonberatung: 30,
+	},
+	VerbrauchsausweisWohnen: {
+		Qualitaetsdruck: 9,
+		Aushang: 10,
+		SameDay: 29,
+		Telefonberatung: 20,
+	},
+	VerbrauchsausweisGewerbe: {
+		Qualitaetsdruck: 9,
+		Aushang: 10,
+		SameDay: 29,
+		Telefonberatung: 25,
+	},
+};
diff --git a/src/lib/login.ts b/src/lib/login.ts
index 5f5947fa..0957cfc1 100644
--- a/src/lib/login.ts
+++ b/src/lib/login.ts
@@ -1,4 +1,4 @@
-import { AppRoute } from "@ibcornelsen/api";
+import { AppRouter } from "@ibcornelsen/api";
 import { inferProcedureOutput } from "@trpc/server";
 import Cookies from "js-cookie";
 import { client } from "src/trpc"
diff --git a/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte b/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
index 27c6600e..02753a02 100644
--- a/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
+++ b/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
@@ -14,13 +14,18 @@
 	import { AuditType, hidden } from "#components/Verbrauchsausweis/audits/hidden";
 	import { auditBedarfsausweisBenoetigt } from "#components/Verbrauchsausweis/audits/BedarfsausweisBenoetigt";
 	import { auditVerbrauchAbweichung } from "#components/Verbrauchsausweis/audits/VerbrauchAbweichung";
-	import { GebaeudeStammdaten, VerbrauchsausweisWohnen } from "@ibcornelsen/database";
+	import { Enums, GebaeudeStammdaten, VerbrauchsausweisWohnen } from "@ibcornelsen/database";
 	import { client } from "src/trpc";
 	import Cookies from "js-cookie";
 	import { API_ACCESS_TOKEN_COOKIE_NAME } from "#lib/constants";
 	import Overlay from "#components/Overlay.svelte";
 
 	export let uid: string | null = null;
+	export let gebaeude: GebaeudeStammdaten = {} as GebaeudeStammdaten;
+	export let ausweis: VerbrauchsausweisWohnen = {
+		ausweisart: Enums.Ausweisart.VerbrauchsausweisWohnen
+	} as VerbrauchsausweisWohnen;
+	export let showLoginPage: boolean = false;
 
 	async function spaeterWeitermachen() {
 
@@ -28,6 +33,7 @@
 		// Wir prüfen also ob wir eingeloggt sind und leiten den Nutzer ggf. auf die Login Seite weiter.
 		if (!Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)) {
 			loginOverlayHidden = false;
+			showLoginPage = true;
 
 			const getEvent = (event: MessageEvent) => {
 				if (event.data == "AUTHORIZED") {
@@ -80,8 +86,6 @@
 		}
 	}
 
-	export let gebaeude: GebaeudeStammdaten = {} as GebaeudeStammdaten;
-	export let ausweis: VerbrauchsausweisWohnen = {} as VerbrauchsausweisWohnen;
 	if (uid) {
 		// NOTE: Funktioniert nicht mehr
 		async () => {
diff --git a/src/modules/EmbeddedLoginModule.svelte b/src/modules/EmbeddedLoginModule.svelte
index 45728753..fac2f7f8 100644
--- a/src/modules/EmbeddedLoginModule.svelte
+++ b/src/modules/EmbeddedLoginModule.svelte
@@ -5,6 +5,8 @@
 	let email: string;
 	let passwort: string;
 
+	export let onLogin: (response: Awaited<ReturnType<typeof loginClient>>) => void;
+
 	async function login() {
 		const response = await loginClient(email, passwort)
 
@@ -18,6 +20,7 @@
 			})
 		} else {
 			parent.postMessage("AUTHORIZED", "*");
+			onLogin(response);
 		}
 	}
 </script>
diff --git a/src/modules/KundendatenModule.svelte b/src/modules/KundendatenModule.svelte
index b8d847cb..a313ca4e 100644
--- a/src/modules/KundendatenModule.svelte
+++ b/src/modules/KundendatenModule.svelte
@@ -4,14 +4,36 @@
 	import ZipSearch from "../components/ZIPSearch.svelte";
 	import Label from "../components/Label.svelte";
 	import PriceContainer from "#components/Kaufabschluss/PriceContainer.svelte";
-	import { Benutzer, Bezahlmethoden, Enums, Rechnungen, VerbrauchsausweisWohnen } from "@ibcornelsen/database";
+	import { BedarfsausweisWohnen, Benutzer, Bezahlmethoden, Enums, Rechnungen, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "@ibcornelsen/database";
 	import PaymentOption from "#components/PaymentOption.svelte";
 	import { client } from "src/trpc";
 
 	export let user: Benutzer;
-	export let ausweis: VerbrauchsausweisWohnen
+	export let ausweis: VerbrauchsausweisWohnen | BedarfsausweisWohnen | VerbrauchsausweisGewerbe;
 	let rechnung: Rechnungen = {} as Rechnungen;
 
+	let services = [{
+		name: "Qualitätsdruck per Post (zusätzlich zur PDF Version) für 9€ inkl. MwSt.",
+		id: Enums.Service.Qualitaetsdruck,
+		price: 9,
+		selected: false
+	}, {
+		name: "Aushang (für öffentliche Gebäude gesetzlich vorgeschrieben) für 10€ inkl. MwSt.",
+		id: Enums.Service.Aushang,
+		price: 10,
+		selected: false
+	}, {
+		name: "Same Day Service (Bestellung Werktags vor 12:00 Uhr - Ausstellung bis 18:00 Uhr am gleichen Tag) für 29€ inkl. MwSt.",
+		id: Enums.Service.SameDay,
+		price: 29,
+		selected: false
+	}, {
+		name: "Telefonische Energieeffizienzberatung für 75€ inkl. MwSt.",
+		id: Enums.Service.Telefonberatung,
+		price: 75,
+		selected: false
+	}]
+
 	export let selectedPaymentType: Bezahlmethoden = Enums.Bezahlmethoden.PAYPAL;
 
 	let agbAkzeptiert: boolean;
@@ -19,10 +41,10 @@
 
 	async function createPayment() {
 		const response = await client.v1.rechnungen.erstellen.mutate({
-			ausweisart: "VerbrauchsausweisWohnen",
+			ausweisart: ausweis.ausweisart,
 			uid: ausweis.uid,
 			payment_method: selectedPaymentType,
-			services: []
+			services: services.filter(service => service.selected).map(service => service.id)
 		})
 
 		window.location.href = response.checkout_url
@@ -328,7 +350,7 @@
 				</div>
 			</div>
 			<div class="w-2/5">
-				<PriceContainer prices={[45, 60, 160]} />
+				<PriceContainer {ausweis} bind:services />
 			</div>
 		</div>
 	</div>
diff --git a/src/components/VerbrauchsausweisGewerbe/BuildingTypes.ts b/src/modules/VerbrauchsausweisGewerbe/BuildingTypes.ts
similarity index 100%
rename from src/components/VerbrauchsausweisGewerbe/BuildingTypes.ts
rename to src/modules/VerbrauchsausweisGewerbe/BuildingTypes.ts
diff --git a/src/components/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeContent.svelte b/src/modules/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeModule.svelte
similarity index 86%
rename from src/components/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeContent.svelte
rename to src/modules/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeModule.svelte
index d110ec94..20caa9aa 100644
--- a/src/components/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeContent.svelte
+++ b/src/modules/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeModule.svelte
@@ -6,65 +6,56 @@
 	import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
 	import Label from "#components/Label.svelte";
 	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
-	import ZipSearch from "../ZIPSearch.svelte";
+	import ZipSearch from "../../components/ZIPSearch.svelte";
 	import { buildingTypes } from "./BuildingTypes";
-	import BilderZusatzsysteme from "../Ausweis/BilderZusatzsysteme.svelte";
+	import BilderZusatzsysteme from "../../components/Ausweis/BilderZusatzsysteme.svelte";
 	import moment from "moment";
-	import { VerbrauchsausweisGewerbe } from "@ibcornelsen/database";
+	import { Enums, GebaeudeStammdaten, VerbrauchsausweisGewerbe } from "@ibcornelsen/database";
 
-	let ausweis: VerbrauchsausweisGewerbe = {};
+	export let uid: string | null = null;
+	export let gebaeude: GebaeudeStammdaten = {} as GebaeudeStammdaten;
+	export let ausweis: VerbrauchsausweisGewerbe = {
+		ausweisart: Enums.Ausweisart.VerbrauchsausweisGewerbe
+	} as VerbrauchsausweisGewerbe;
 
 	let additionalHeating: boolean = false;
 	let heatedWaterIncluded: boolean = false;
 	let heatedWaterPortion: number = 18;
-	let hasCellar: boolean = false;
-
-	let area = 0;
-	let zip: string = "";
-	let city: string = "";
-
-	let baujahrGebaeude: number;
-	let baujahrHeizungsAnlage: number;
-	let apartmentCount: number;
-	let certificateReason:
-		| "Vermietung"
-		| "Neubau"
-		| "Verkauf"
-		| "Modernisierung"
-		| "Sonstiges";
-	let sanitationStatus: boolean;
 
 	let needsRequirementCertificate: boolean = false;
 
 	$: needsRequirementCertificate =
-		(ausweis.baujahr_gebaeude < 1978 &&
-			ausweis.anzahl_einheiten <= 4 &&
-			ausweis.objekt_saniert == false &&
+		(gebaeude.baujahr_gebaeude[0] < 1978 &&
+			(gebaeude.einheiten || 0) <= 4 &&
+			gebaeude.saniert == false &&
 			(ausweis.ausstellgrund == "Vermietung" ||
 				ausweis.ausstellgrund == "Sonstiges")) ||
 		ausweis.ausstellgrund == "Neubau" ||
 		ausweis.ausstellgrund == "Modernisierung" ||
 		ausweis.ausstellgrund == "Verkauf";
 
-	function automatischAusfüllen() {
-		ausweis.baujahr_gebaeude = 1962;
-		ausweis.baujahr_anlage = 1974;
-		ausweis.objekt_saniert = true;
-		ausweis.anzahl_einheiten = 1;
+		function automatischAusfüllen() {
+		gebaeude.baujahr_gebaeude = [1962];
+		gebaeude.baujahr_heizung = [1952];
+		gebaeude.saniert = true;
+		gebaeude.einheiten = 1;
 		ausweis.ausstellgrund = "Vermietung";
-		ausweis.energieverbrauch_1_heizquelle_1 = 15000;
-		ausweis.energieverbrauch_2_heizquelle_1 = 14000;
-		ausweis.energieverbrauch_3_heizquelle_1 = 16000;
-		ausweis.wohnflaeche = 152;
+		ausweis.verbrauch_1 = 15000;
+		ausweis.verbrauch_2 = 14000;
+		ausweis.verbrauch_3 = 16000;
+		gebaeude.flaeche = 152;
 		ausweis.keller_beheizt = true;
-		ausweis.energietraeger_1 = "Erdgas H";
-		ausweis.energietraeger_einheit_heizquelle_1 = "kWh";
-		ausweis.warmwasser_enthalten = true;
+		ausweis.brennstoff_1 = "Erdgas H";
+		ausweis.einheit_1 = "kWh";
 		ausweis.anteil_warmwasser_1 = 18;
-		ausweis.energieverbrauch_zeitraum = moment("12.01.2019");
-		ausweis.objekt_plz = "21039";
-		ausweis.objekt_ort = "Hamburg";
-		ausweis.objekt_strasse = "Curslacker Deich 170";
+		ausweis.startdatum = moment("12.01.2019").toDate();
+		gebaeude.plz = "21039";
+		gebaeude.ort = "Hamburg";
+		gebaeude.adresse = "Curslacker Deich 170";
+		gebaeude.gebaeudeteil = "Gesamtgebäude";
+
+		gebaeude = gebaeude;
+		ausweis = ausweis;
 	}
 </script>
 
@@ -97,7 +88,7 @@
 
 		<Label>A - Prüfung der Ausweisart</Label>
 
-		<Ausweisart bind:ausweis />
+		<Ausweisart bind:ausweis bind:gebaeude />
 
 		<div
 			class="flex flex-col p-4"
@@ -144,7 +135,7 @@
 						required
 						data-msg-minlength="min. 5 Zeichen"
 						data-msg-maxlength="max. 40 Zeichen"
-						bind:value={ausweis.objekt_strasse}
+						bind:value={gebaeude.adresse}
 					/>
 				</div>
 			</div>
@@ -152,8 +143,8 @@
 			<!-- PLZ -->
 			<div class="form-group col-md-4 PLZ">
 				<ZipSearch
-					bind:zip={ausweis.objekt_plz}
-					bind:city={ausweis.objekt_ort}
+					bind:zip={gebaeude.plz}
+					bind:city={gebaeude.ort}
 					name="zip"
 				/>
 			</div>
@@ -168,7 +159,7 @@
 						name="IGort"
 						
 						readonly={true}
-						bind:value={ausweis.objekt_ort}
+						bind:value={gebaeude.ort}
 						type="text"
 					/>
 				</div>
@@ -190,7 +181,7 @@
 						autocomplete="off"
 						data-rule-minlength="2"
 						data-msg-minlength="min. 2 Zeichen"
-						bind:value={ausweis.wohnflaeche}
+						bind:value={gebaeude.flaeche}
 					/>
 				</div>
 			</div>
@@ -202,7 +193,7 @@
 					<select
 						name="IGkeller"
 						required
-						bind:value={ausweis.keller_beheizt}
+						bind:value={gebaeude.keller}
 					>
 						<option>Bitte auswählen</option>
 						<option value={false}>nicht vorhanden</option>
@@ -232,7 +223,7 @@
 		</div>
 
 		<div class="GRB">
-			<Verbrauch bind:ausweis />
+			<Verbrauch bind:ausweis bind:gebaeude />
 		</div>
 		<hr />
 		<div>
@@ -434,7 +425,7 @@
 					>
 				</div>
 
-				<BilderZusatzsysteme {ausweis} />
+				<BilderZusatzsysteme {ausweis} {gebaeude} />
 
 				<div class="flex flex-row justify-between">
 					<Hilfe />
diff --git a/src/modules/VerbrauchsausweisWohnenFlowModule.svelte b/src/modules/VerbrauchsausweisWohnenFlowModule.svelte
new file mode 100644
index 00000000..755c0de4
--- /dev/null
+++ b/src/modules/VerbrauchsausweisWohnenFlowModule.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { GebaeudeStammdaten, VerbrauchsausweisWohnen } from "@ibcornelsen/database";
+	import VerbrauchsausweisWohnenModule from "./Ausweise/VerbrauchsausweisWohnenModule.svelte";
+	import EmbeddedLoginModule from "./EmbeddedLoginModule.svelte";
+	import { client } from "src/trpc";
+	import { addNotification } from "@ibcornelsen/ui";
+
+	export let uid: string | null = null;
+	export let gebaeude: GebaeudeStammdaten = {} as GebaeudeStammdaten;
+	export let ausweis: VerbrauchsausweisWohnen = {} as VerbrauchsausweisWohnen;
+
+	let showLoginPage = false;
+	
+</script>
+
+{#if !showLoginPage}
+<VerbrauchsausweisWohnenModule {uid} {gebaeude} {ausweis} bind:showLoginPage></VerbrauchsausweisWohnenModule>
+{/if}
+
+{#if showLoginPage}
+	<EmbeddedLoginModule onLogin={async (response) => {
+		if (uid) {
+			// Anscheinend wurde der Ausweis bereits erstellt und hat eine UID.
+			// Jetzt müssen wir ihn nun nur noch abspeichern.
+			try {
+				await client.v1.verbrauchsausweisWohnen[2016].speichern.mutate({
+					...ausweis,
+					gebaeude_stammdaten: gebaeude,
+					uid
+				})
+
+				window.location.href = `/ausweis-gespeichert?uid=${uid}`;
+			} catch (e) {
+				showLoginPage = false;
+				addNotification({
+					dismissable: false,
+					message: "Ausweis konnte nicht gespeichert werden, bitte versuchen sie es erneut.",
+					subtext: "Sollte das Problem weiterhin bestehen, kontaktieren sie bitte den Support.",
+					timeout: 6000,
+					type: "error"
+				})
+			}
+		} else {
+			// Wir speichern den Ausweis ab und leiten auf die "ausweis-gespeichert" Seite weiter.
+			try {
+				const { uid } = await client.v1.verbrauchsausweisWohnen[2016].erstellen.mutate({
+					...ausweis,
+					gebaeude_stammdaten: gebaeude
+				})
+				window.location.href = `/ausweis-gespeichert?uid=${uid}`;
+			} catch (e) {
+				showLoginPage = false;
+				addNotification({
+					dismissable: false,
+					message: "Ausweis konnte nicht gespeichert werden, bitte versuchen sie es erneut.",
+					subtext: "Sollte das Problem weiterhin bestehen, kontaktieren sie bitte den Support.",
+					timeout: 6000,
+					type: "error"
+				})
+			}
+		}
+
+	}}></EmbeddedLoginModule>
+{/if}
\ No newline at end of file
diff --git a/src/pages/payment/success.astro b/src/pages/payment/success.astro
new file mode 100644
index 00000000..e87e9f66
--- /dev/null
+++ b/src/pages/payment/success.astro
@@ -0,0 +1,10 @@
+---
+
+import Layout from "../../layouts/Layout.astro";
+
+
+---
+
+<Layout title="Zahlung Erfolgreich - IBCornelsen">
+	Supa! Hat geklappt ne!
+</Layout>
\ No newline at end of file
diff --git a/src/pages/verbrauchsausweis-gewerbe/index.astro b/src/pages/verbrauchsausweis-gewerbe/index.astro
index c88910af..212587bf 100644
--- a/src/pages/verbrauchsausweis-gewerbe/index.astro
+++ b/src/pages/verbrauchsausweis-gewerbe/index.astro
@@ -1,11 +1,10 @@
 ---
 
 import AusweisLayout from "#layouts/AusweisLayout.astro";
-import VerbrauchsausweisGewerbeContent from "#components/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeContent.svelte";
-
+import VerbrauchsausweisGewerbeModule from "#modules/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeModule.svelte";
 
 ---
 
 <AusweisLayout title="Verbrauchsausweis Gewerbe erstellen | IBCornelsen">
-	<VerbrauchsausweisGewerbeContent client:load></VerbrauchsausweisGewerbeContent>
+	<VerbrauchsausweisGewerbeModule client:load></VerbrauchsausweisGewerbeModule>
 </AusweisLayout>
\ No newline at end of file