diff --git a/src/routes/gallery/+page.svelte b/src/routes/gallery/+page.svelte
index 5505d99..0ff8055 100644
--- a/src/routes/gallery/+page.svelte
+++ b/src/routes/gallery/+page.svelte
@@ -11,7 +11,10 @@
 		.map((item) => {
 			return {
 				...item,
-				marginTop: 20 + Math.random() * 50
+				y: -5 + Math.random() * 10,
+				x: -5 + Math.random() * 10,
+				scale: 0.9 + Math.random() * 0.2,
+				rot: -5 + Math.random() * 10
 			};
 		})
 		.reverse();
@@ -24,7 +27,11 @@
 	<h1>Gallerie</h1>
 	<div class="grid">
 		{#each items as item}
-			<div style="margin-top: {item.marginTop}px" class:active={item.noble_name === last_name}>
+			<div
+				style="--x: {item.x}%, --y: {item.y}%; --scale: {item.scale}; --rot:{item.rot}"
+				class="item"
+				class:active={item.noble_name === last_name}
+			>
 				<ImageFrame src={item.portrait} />
 				<p>{item.noble_name}</p>
 			</div>
@@ -54,6 +61,9 @@
 		width: 80%;
 		margin-top: 10px;
 	}
+	.item {
+		transform: translate(var(--x), var(--y)) scale(var(--scale)) rotate(var(--rot) deg);
+	}
 	.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);