diff --git a/package.json b/package.json
index 19c9c40..243d1a8 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "googleapis": "^128.0.0",
     "minio": "^7.1.3",
     "openai": "^4.17.4",
-    "pocketbase": "^0.19.0"
+    "pocketbase": "^0.19.0",
+    "svelte-bricks": "^0.2.1"
   }
 }
diff --git a/pb_migrations/1699807218_updated_invites.js b/pb_migrations/1699807218_updated_invites.js
new file mode 100644
index 0000000..80db37c
--- /dev/null
+++ b/pb_migrations/1699807218_updated_invites.js
@@ -0,0 +1,16 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((db) => {
+  const dao = new Dao(db)
+  const collection = dao.findCollectionByNameOrId("zfbbb4gbdk9dh6k")
+
+  collection.listRule = ""
+
+  return dao.saveCollection(collection)
+}, (db) => {
+  const dao = new Dao(db)
+  const collection = dao.findCollectionByNameOrId("zfbbb4gbdk9dh6k")
+
+  collection.listRule = null
+
+  return dao.saveCollection(collection)
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ac95657..3560a2c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ dependencies:
   pocketbase:
     specifier: ^0.19.0
     version: 0.19.0
+  svelte-bricks:
+    specifier: ^0.2.1
+    version: 0.2.1
 
 devDependencies:
   '@sveltejs/adapter-auto':
@@ -78,7 +81,6 @@ packages:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.3
       '@jridgewell/trace-mapping': 0.3.20
-    dev: true
 
   /@esbuild/android-arm64@0.18.20:
     resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==}
@@ -347,28 +349,23 @@ packages:
       '@jridgewell/set-array': 1.1.2
       '@jridgewell/sourcemap-codec': 1.4.15
       '@jridgewell/trace-mapping': 0.3.20
-    dev: true
 
   /@jridgewell/resolve-uri@3.1.1:
     resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
     engines: {node: '>=6.0.0'}
-    dev: true
 
   /@jridgewell/set-array@1.1.2:
     resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
     engines: {node: '>=6.0.0'}
-    dev: true
 
   /@jridgewell/sourcemap-codec@1.4.15:
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
-    dev: true
 
   /@jridgewell/trace-mapping@0.3.20:
     resolution: {integrity: sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==}
     dependencies:
       '@jridgewell/resolve-uri': 3.1.1
       '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
 
   /@nodelib/fs.scandir@2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
@@ -550,7 +547,6 @@ packages:
 
   /@types/estree@1.0.5:
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
-    dev: true
 
   /@types/json-schema@7.0.15:
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
@@ -741,7 +737,6 @@ packages:
     resolution: {integrity: sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==}
     engines: {node: '>=0.4.0'}
     hasBin: true
-    dev: true
 
   /agent-base@7.1.0:
     resolution: {integrity: sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==}
@@ -796,7 +791,6 @@ packages:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
     dependencies:
       dequal: 2.0.3
-    dev: true
 
   /array-union@2.1.0:
     resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
@@ -820,7 +814,6 @@ packages:
     resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==}
     dependencies:
       dequal: 2.0.3
-    dev: true
 
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@@ -933,7 +926,6 @@ packages:
       acorn: 8.11.2
       estree-walker: 3.0.3
       periscopic: 3.1.0
-    dev: true
 
   /color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
@@ -985,7 +977,6 @@ packages:
     dependencies:
       mdn-data: 2.0.30
       source-map-js: 1.0.2
-    dev: true
 
   /cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
@@ -1035,7 +1026,6 @@ packages:
   /dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
-    dev: true
 
   /detect-indent@6.1.0:
     resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
@@ -1259,7 +1249,6 @@ packages:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
     dependencies:
       '@types/estree': 1.0.5
-    dev: true
 
   /esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
@@ -1722,7 +1711,6 @@ packages:
     resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==}
     dependencies:
       '@types/estree': 1.0.5
-    dev: true
 
   /is-stream@2.0.1:
     resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
@@ -1814,7 +1802,6 @@ packages:
 
   /locate-character@3.0.0:
     resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
-    dev: true
 
   /locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
@@ -1850,7 +1837,6 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
 
   /md5@2.3.0:
     resolution: {integrity: sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==}
@@ -1862,7 +1848,6 @@ packages:
 
   /mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
-    dev: true
 
   /merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
@@ -2077,7 +2062,6 @@ packages:
       '@types/estree': 1.0.5
       estree-walker: 3.0.3
       is-reference: 3.0.2
-    dev: true
 
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
@@ -2347,7 +2331,6 @@ packages:
   /source-map-js@1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /split-on-first@1.1.0:
     resolution: {integrity: sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==}
@@ -2400,6 +2383,12 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
+  /svelte-bricks@0.2.1:
+    resolution: {integrity: sha512-cc3XK3j5ViPyZ3K183+Sr53B2e8mJaiV3POyoJtjmm1dYc/TBMy7jOUMt8MW/snJzodpACfqwFzokBQbrZ297w==}
+    dependencies:
+      svelte: 4.2.3
+    dev: false
+
   /svelte-check@3.6.0(postcss@8.4.31)(svelte@4.2.3):
     resolution: {integrity: sha512-8VfqhfuRJ1sKW+o8isH2kPi0RhjXH1nNsIbCFGyoUHG+ZxVxHYRKcb+S8eaL/1tyj3VGvWYx3Y5+oCUsJgnzcw==}
     hasBin: true
@@ -2518,7 +2507,6 @@ packages:
       locate-character: 3.0.0
       magic-string: 0.30.5
       periscopic: 3.1.0
-    dev: true
 
   /text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
diff --git a/src/lib/components/ImageFrame.svelte b/src/lib/components/ImageFrame.svelte
index f37ac16..39f84f4 100644
--- a/src/lib/components/ImageFrame.svelte
+++ b/src/lib/components/ImageFrame.svelte
@@ -3,7 +3,7 @@
 	export let alt = '';
 	const u = new URL(src);
 	const filename = u.pathname.split('/').pop() || '9a8sda';
-	const int = parseInt(filename?.slice(0, 8), 16) % 7;
+	const int = (parseInt(filename?.slice(0, 8), 16) % 7) + 1;
 </script>
 
 <div class="frame" style="--frame: url(/frames/frame_0{int}.png)">
diff --git a/src/lib/components/InputRange.svelte b/src/lib/components/InputRange.svelte
index a5d3e44..d1cc6e6 100644
--- a/src/lib/components/InputRange.svelte
+++ b/src/lib/components/InputRange.svelte
@@ -4,7 +4,7 @@
 	export let value = 50;
 </script>
 
-<input type="range" {min} {max} bind:value />
+<input type="range" {min} {max} bind:value step={10} />
 
 <style>
 	input[type='range'] {
diff --git a/src/lib/components/Questions.svelte b/src/lib/components/Questions.svelte
index 3550d61..cb056b3 100644
--- a/src/lib/components/Questions.svelte
+++ b/src/lib/components/Questions.svelte
@@ -5,6 +5,7 @@
 	import ImageFrame from './ImageFrame.svelte';
 	import Button from './button.svelte';
 	import InputRange from './InputRange.svelte';
+	import { goto } from '$app/navigation';
 
 	let data = persisted<{
 		name: string;
@@ -38,8 +39,6 @@
 		createPersonality: undefined
 	});
 
-	let nameInputEl: HTMLInputElement;
-
 	let loadingAdelsTitel = false;
 	async function fetchAdelsTitel() {
 		if (loadingAdelsTitel) return;
@@ -75,17 +74,21 @@
 	async function submit() {
 		if (isSubmitting) return;
 		isSubmitting = true;
-		const res = await fetch(`/api/invites`, {
+		await fetch(`/api/invites`, {
 			method: 'POST',
 			body: JSON.stringify($data)
 		});
+		localStorage.clear();
+		localStorage.setItem('last-name', $data?.adelsTitel || '');
+		isSubmitting = false;
+		goto('/gallery');
 	}
 </script>
 
 <div class="wrapper">
-	<section in:slide>
+	<section in:slide={{ delay: 500 }}>
 		<TextSplit content="Wie lautet euer Name?" />
-		<input bind:this={nameInputEl} placeholder="Name" type="text" bind:value={$data.name} />
+		<input placeholder="Name" type="text" bind:value={$data.name} />
 		{#if !$data.nameAccepted}
 			<button
 				on:click={() => {
@@ -208,7 +211,7 @@
 
 			{#if $data.providePortrait && !loadingPortrait && !$data.portraitUrl}
 				<p>
-					Wir werden “{$data.adelsTitel || $data.name}” mit
+					Wir werden {$data.adelsTitel || $data.name} mit
 					<select placeholder="Typ" bind:value={$data.portraitHairType}>
 						<option value="straight">glatten</option>
 						<option value="curly">lockigen</option>
@@ -224,7 +227,7 @@
 						<option value="black">schwarzen</option>
 						<option value="blond">blonden</option>
 						<option value="braunem">braunen</option>
-					</select> Haaren zeichnen?
+					</select> Haaren zeichnen
 				</p>
 				<button on:click={() => fetchPortrait()}> porträt malen (~30 Sekunden)</button>
 			{:else if loadingPortrait}
@@ -256,7 +259,11 @@
 
 	{#if $data.portraitAccepted}
 		<div class="button-wrapper">
-			<Button on:click={() => submit()}>Einladung abschicken</Button>
+			{#if isSubmitting}
+				<p>Einladung wird abgeschickt</p>
+			{:else}
+				<Button on:click={() => submit()}>Einladung abschicken</Button>
+			{/if}
 		</div>
 	{/if}
 </div>
diff --git a/src/lib/components/maskenball.svelte b/src/lib/components/maskenball.svelte
index 52013d8..76d8e2c 100644
--- a/src/lib/components/maskenball.svelte
+++ b/src/lib/components/maskenball.svelte
@@ -14,6 +14,8 @@
 		animation-delay: 3s;
 		opacity: 0;
 		transition: font-size 3s ease;
+		filter: drop-shadow(0px 0px 40px #be8630aa) drop-shadow(0px 0px 5px black)
+			drop-shadow(0px 0px 5px black) drop-shadow(0px 0px 5px black);
 	}
 
 	@keyframes fadeIn {
diff --git a/src/lib/helpers/pb.ts b/src/lib/helpers/pb.ts
index e6898a7..99258f8 100644
--- a/src/lib/helpers/pb.ts
+++ b/src/lib/helpers/pb.ts
@@ -3,6 +3,12 @@ import { POCKETBASE_URL } from "$env/dynamic/private"
 
 const pb = new Pocketbase(POCKETBASE_URL || "http://localhost:8090");
 
+export async function getPublicPortraits() {
+  return (await pb.collection("invites").getList(1, 100, {
+    filter: pb.filter(`portrait_public = true`)
+  })).items
+}
+
 export function createPerson({ name, confidence, portrait, portrait_public, noble_name, hair_color, hair_type, hair_length }: { name: string, portrait: string, portrait_public: boolean, hair_type: string, hair_length: string, hair_color: string, confidence: number, noble_name: string }) {
   return pb.collection("invites").create({
     name,
diff --git a/src/lib/helpers/sheets.ts b/src/lib/helpers/sheets.ts
index a568858..0470e60 100644
--- a/src/lib/helpers/sheets.ts
+++ b/src/lib/helpers/sheets.ts
@@ -100,8 +100,6 @@ export async function addPerson({ name, confidence, noble_name }: { name: string
 
   if (!api) return;
 
-  console.log({ name, confidence, noble_name });
-
   return api.spreadsheets.values.append({
     auth, //auth object
     spreadsheetId: GOOGLE_SHEET_ID, // spreadsheet id
diff --git a/src/routes/api/ai/name/[name]/+server.ts b/src/routes/api/ai/name/[name]/+server.ts
index 0684d5d..694c987 100644
--- a/src/routes/api/ai/name/[name]/+server.ts
+++ b/src/routes/api/ai/name/[name]/+server.ts
@@ -6,7 +6,7 @@ export const GET: RequestHandler = async function ({ params }) {
 
   const inputName = params.name
 
-  const prompt = `Generate 10 variants of the name ${inputName}. The names should sound very much like the original but also like noble names from the 1900 century. Examples could be "lady rosalind of whitmore" "lord byron of castlemore" "Lord Max Richter". Choose english, german, french and italian sounding names. Only respond with 10 names seperated be newlines`;
+  const prompt = `Generate 10 variants of the name ${inputName}. The names should sound very much like the original but also like noble names. Examples could be "lady rosalind of whitmore" "lord byron of castlemore" "Lord Max Richter". Choose english, german, french and italian sounding names. Only respond with 10 names seperated be newlines`;
 
   const res = await chat(prompt, { isList: true, temperature: 1 });
 
diff --git a/src/routes/gallery/+page.server.ts b/src/routes/gallery/+page.server.ts
new file mode 100644
index 0000000..59888a8
--- /dev/null
+++ b/src/routes/gallery/+page.server.ts
@@ -0,0 +1,8 @@
+import * as pb from "$lib/helpers/pb"
+export async function load() {
+  const res = await pb.getPublicPortraits();
+
+  return {
+    data: res
+  }
+}
diff --git a/src/routes/gallery/+page.svelte b/src/routes/gallery/+page.svelte
new file mode 100644
index 0000000..5505d99
--- /dev/null
+++ b/src/routes/gallery/+page.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+	import ImageFrame from '$lib/components/ImageFrame.svelte';
+	import Confetti from '$lib/components/confetti.svelte';
+	import { onMount } from 'svelte';
+
+	export let data;
+
+	let last_name: string | null = '';
+
+	const items = data.data
+		.map((item) => {
+			return {
+				...item,
+				marginTop: 20 + Math.random() * 50
+			};
+		})
+		.reverse();
+	onMount(() => {
+		last_name = localStorage.getItem('last-name');
+	});
+</script>
+
+<div>
+	<h1>Gallerie</h1>
+	<div class="grid">
+		{#each items as item}
+			<div style="margin-top: {item.marginTop}px" class:active={item.noble_name === last_name}>
+				<ImageFrame src={item.portrait} />
+				<p>{item.noble_name}</p>
+			</div>
+		{/each}
+	</div>
+</div>
+
+<Confetti />
+
+<style>
+	.grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+		padding-bottom: 100px;
+	}
+	h1 {
+		font-size: 4rem;
+		font-family: Parisienne, cursive;
+		color: white;
+		margin-left: 50px;
+	}
+	p {
+		color: white;
+		font-family: Parisienne, cursive;
+		font-size: 1.2em;
+		margin-left: 40px;
+		width: 80%;
+		margin-top: 10px;
+	}
+	.active {
+		filter: drop-shadow(0px 0px 40px #be8630aa) drop-shadow(0px 0px 5px black)
+			drop-shadow(0px 0px 5px black) drop-shadow(0px 0px 5px black);
+	}
+	div {
+		max-width: 1300px;
+		width: 80%;
+		margin: 0 auto;
+	}
+</style>
diff --git a/src/routes/global.css b/src/routes/global.css
index 7dc241b..4c0fefd 100644
--- a/src/routes/global.css
+++ b/src/routes/global.css
@@ -12,8 +12,11 @@ html, body {
 		height: 100%;
 		margin: 0;
 		padding: 0;
-		background-color: black;
-		/* background-image: url(/confetti.png); */
 		background-size: 80%;
-		backdrop-filter: brightness(0.5);
 }
+
+	html {
+		background: black;
+		background-image: url(/pattern_b.jpg);
+  backdrop-filter: brightness(0.3);
+	}
diff --git a/src/routes/questions/+page.svelte b/src/routes/questions/+page.svelte
deleted file mode 100644
index d27a1ee..0000000
--- a/src/routes/questions/+page.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script lang="ts">
-	import Questions from '$lib/components/Questions.svelte';
-</script>
-
-<Questions />
diff --git a/static/pattern.jpg b/static/pattern.jpg
new file mode 100644
index 0000000..dd804a9
Binary files /dev/null and b/static/pattern.jpg differ
diff --git a/static/pattern_b.jpg b/static/pattern_b.jpg
new file mode 100644
index 0000000..883d1c8
Binary files /dev/null and b/static/pattern_b.jpg differ