diff --git a/src/templates/index.ejs b/src/templates/index.ejs
index 2fea311..7afef15 100644
--- a/src/templates/index.ejs
+++ b/src/templates/index.ejs
@@ -19,7 +19,7 @@ function hsl2rgb(h,s,l) {
 }
 
 function getRandomHoverBg() {
-	let rgb = hsl2rgb(Math.random()*360,0.4,0.4)
+	let rgb = hsl2rgb(Math.random()*360,0.8,0.4)
 	let hex = '#'
 	for (let i = 0; i < 3; i++) {
 		let subcolorValue = rgb[i];
@@ -33,12 +33,12 @@ function getRandomHoverBg() {
 
 <body data-bs-theme="dark">
 	<div class="w-100 text-center p-5">
-		<h1>Body stabilní jak česká vláda</h1>
+		<h1 data-text="Body stabilní jak česká vláda">Body stabilní jak česká vláda</h1>
 	</div>
 	<div class="container-fluid">
-		<div class="row p-5">
+		<div id="person-grid" class="row p-5">
 			<% people.forEach((person) => {%>
-				<div class="col-12 col-md-6 col-lg-3 col-xxl-2">
+				<div class="col-12 col-md-6 col-lg-3 col-xxl-2 person-button">
 					<a href='/gamble/<%= person.personId %>'
 						class="btn btn-outline-secondary w-100 m-2 text-body fw-bold"
 						style="--bs-btn-hover-bg: <%= getRandomHoverBg()%>">
@@ -88,8 +88,21 @@ function getRandomHoverBg() {
 		}, 1000);
 
 		setInterval(downloadData, 60000);
+		downloadData();
+
+		function randomRange(min, max) {
+			return min + Math.random() * (max - min);
+		}
+
+		setInterval(() => {
+			let personGrid = document.getElementById('person-grid');
+			for (const child of personGrid.children) {
+				let diffX = 40*randomRange(-1,1);
+				let diffY = 40*randomRange(-1,1);
+				child.style.transform = `translate(${diffX}px, ${diffY}px)`;
+			}
+		}, 5000);
 
-		downloadData()
 	</script>
 </body>
 </html>
diff --git a/www/styles.css b/www/styles.css
index 7cb94ff..8e4ad50 100644
--- a/www/styles.css
+++ b/www/styles.css
@@ -1,8 +1,7 @@
 body {
-	/*background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);*/
-	background: linear-gradient(-37deg, #66241a, #520820, #073645, #075239);
+	background: linear-gradient(-249deg, #ee7752, #e73c7e, #23a6d5, #23d5ab, #ee7752, #e73c7e, #23a6d5, #23d5ab);
 	background-size: 400% 400%;
-	animation: gradient 20s ease infinite;
+	animation: gradient 10s linear infinite;
 	height: 100vh;
 }
 
@@ -19,3 +18,63 @@ body {
 		background-position: 0% 50%;
 	}
 }
+
+.person-button {
+	transition: transform 5.5s linear;
+}
+
+
+h1 {
+	position: relative;
+	font-family: "Poppins", sans-serif;
+	color: #f6d8d5;
+	font-size: 50px;
+	opacity: 0.9;
+	text-shadow: 0px -5px #ec2225, 0px 5px #00c2cb, -5px 0px #ec2225, 5px 0px #00c2cb;
+}
+
+h1::before {
+	content: attr(data-text);
+	position: absolute;
+	width: 100%;
+	top: 0;
+	left: 0;
+	color: #e0ffff;
+	z-index: -1;
+	animation: animate 12ms ease-in-out infinite;
+	z-index: 1;
+}
+
+@keyframes animate {
+
+	0%,
+	100% {
+		top: -7px;
+		left: 0;
+		opacity: 1;
+	}
+
+	20% {
+		top: 0;
+		left: -10px;
+		opacity: 0.7;
+	}
+
+	40% {
+		top: 7px;
+		left: 0;
+		opacity: 0.2;
+	}
+
+	60% {
+		top: 0;
+		left: 10px;
+		opacity: 0.3;
+	}
+
+	80% {
+		top: 0;
+		left: 0;
+		opacity: 0.9;
+	}
+}
