diff --git a/src/app.html b/src/app.html
index 686ffe3..8b83556 100644
--- a/src/app.html
+++ b/src/app.html
@@ -6,7 +6,9 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
     <script src="https://cdn.jsdelivr.net/npm/tsparticles-confetti@2.12.0/tsparticles.confetti.bundle.min.js"></script>
-	</head>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Meow+Script&display=swap" rel="stylesheet">	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
diff --git a/src/lib/components/button.svelte b/src/lib/components/button.svelte
index 22b1ead..c6b710c 100644
--- a/src/lib/components/button.svelte
+++ b/src/lib/components/button.svelte
@@ -5,10 +5,28 @@
 
 <style>
 	button {
-		padding: 2em;
+		position: relative;
+		padding: 0.7em;
 		background: black;
-		color: white;
-		border-radius: 1em;
-		border: solid 2px gold;
+		border-radius: 0.4em;
+		cursor: pointer;
+		border: none;
+		font-family: 'Meow Script', cursive;
+		font-size: 2em;
+		color: #ceba51;
+	}
+
+	button::after {
+		content: '';
+		z-index: -1;
+		--border: 2px;
+		background: linear-gradient(-45deg, #d9c555, #7a5423);
+		border-radius: 13px;
+		position: absolute;
+		width: calc(100% + calc(var(--border) * 2));
+		height: calc(100% + calc(var(--border) * 2));
+		top: calc(var(--border) * -1);
+		left: calc(var(--border) * -1);
+		box-shadow: 0px 0px 40px #c49c684f;
 	}
 </style>
diff --git a/src/lib/components/confetti.svelte b/src/lib/components/confetti.svelte
index c3bfbf5..ecb948d 100644
--- a/src/lib/components/confetti.svelte
+++ b/src/lib/components/confetti.svelte
@@ -20,9 +20,9 @@
 			},
 			colors: ['#d9c556'],
 			shapes: ['circle'],
-			gravity: randomInRange(0.4, 0.6)
-			//scalar: randomInRange(0.4, 1),
-			//drift: randomInRange(-0.0, 0.0)
+			gravity: randomInRange(0.4, 0.6),
+			scalar: randomInRange(0.4, 1),
+			drift: randomInRange(-0.0, 0.0)
 		});
 
 		requestAnimationFrame(frame);
diff --git a/src/lib/components/mask.css b/src/lib/components/mask.css
index ec7114d..c6b1295 100644
--- a/src/lib/components/mask.css
+++ b/src/lib/components/mask.css
@@ -41,7 +41,7 @@
 #mask > path[id='Form 3 copy']{
   stroke-dasharray: 96.59;  
   animation: form3copy;
-  stroke-width: 2px
+  stroke-width: 1px
 }
 
 @keyframes form3copy {
diff --git a/src/lib/components/maskenball.css b/src/lib/components/maskenball.css
index f2ad3e2..9193f62 100644
--- a/src/lib/components/maskenball.css
+++ b/src/lib/components/maskenball.css
@@ -1,5 +1,6 @@
 #maskenball > path[id='m']{
   stroke-dasharray: 259.07;  
+  stroke-dashoffset: 259.07;
   animation: m;
 }
 
@@ -13,10 +14,14 @@
   15% {
     stroke-dashoffset: 0;
   }
+  100% {
+    stroke-dashoffset: 0;
+  }
 }
 
 #maskenball > path[id='as']{
   stroke-dasharray: 182.9;  
+  stroke-dashoffset: 182.9;  
   animation: as;
 }
 
@@ -30,10 +35,14 @@
   60% {
     stroke-dashoffset: 0;
   }
+  100% {
+    stroke-dashoffset: 0;
+  }
 }
 
 #maskenball > path[id='ken']{
   stroke-dasharray: 345.04;  
+  stroke-dashoffset: 345.04;  
   animation: ken;
 }
 
@@ -47,10 +56,14 @@
   50% {
     stroke-dashoffset: 0;
   }
+  100% {
+    stroke-dashoffset: 0;
+  }
 }
 
 #maskenball > path[id='b']{
   stroke-dasharray: 147.51;  
+  stroke-dashoffset: 147.51;  
   animation: b;
 }
 
@@ -64,10 +77,14 @@
   50% {
     stroke-dashoffset: 0;
   }
+  100% {
+    stroke-dashoffset: 0;
+  }
 }
 
 #maskenball > path[id='al']{
   stroke-dasharray: 207.43;  
+  stroke-dashoffset: 207.43;  
   animation: al;
 }
 
@@ -81,10 +98,14 @@
   70% {
     stroke-dashoffset: 0;
   }
+  100% {
+    stroke-dashoffset: 0;
+  }
 }
 
 #maskenball > path[id='l']{
   stroke-dasharray: 82.09;  
+  stroke-dashoffset: 82.09;  
   animation: l;
 }
 
@@ -98,10 +119,14 @@
   70% {
     stroke-dashoffset: 0;
   }
+  100% {
+    stroke-dashoffset: 0;
+  }
 }
 
 #maskenball > path[id='end']{
   stroke-dasharray: 39.1;  
+  stroke-dashoffset: 39.1;  
   animation: end;
 }
 
@@ -115,4 +140,7 @@
   70% {
     stroke-dashoffset: 0;
   }
+  100% {
+    stroke-dashoffset: 0;
+  }
 }
diff --git a/src/lib/components/maskenball.svelte b/src/lib/components/maskenball.svelte
index fc8761e..6924f77 100644
--- a/src/lib/components/maskenball.svelte
+++ b/src/lib/components/maskenball.svelte
@@ -10,7 +10,7 @@
 	@import './maskenball.css';
 
 	div {
-		margin-top: 50px;
+		margin-top: 10px;
 		position: relative;
 		display: flex;
 		z-index: 5;
@@ -22,8 +22,8 @@
 
 	div :global(path) {
 		animation-duration: 5s !important;
-		/* animation-delay: 2s !important; */
-		animation-fill-mode: forwards;
+		animation-delay: 2s !important;
+		animation-fill-mode: forwards !important;
 		stroke: #d9c556;
 	}
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1e28a6d..3d666e8 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -5,17 +5,24 @@
 	import Maskenball from '$lib/components/maskenball.svelte';
 </script>
 
-<div class="drapery" />
-<img class="curtain-right" src="/curtain.png" />
-<img class="curtain-left" src="/curtain.png" />
+<div class="background">
+	<div class="drapery" />
+	<img class="curtain-right" src="/curtain.png" />
+	<img class="curtain-left" src="/curtain.png" />
+</div>
 <Confetti />
-<Mask />
-<Maskenball />
+<div class="mask-anim">
+	<Mask />
+</div>
+<!-- <Maskenball /> -->
 <div class="center">
 	<Button>Eintreten</Button>
 </div>
 
 <style>
+	.background {
+		opacity: 0.9;
+	}
 	.center {
 		display: flex;
 		justify-content: center;
@@ -23,6 +30,7 @@
 	}
 	.drapery {
 		background-image: url('/drapery.png');
+		background-position: center top;
 		position: absolute;
 		top: -50px;
 		left: 0px;
@@ -64,6 +72,9 @@
 			transform: translateX(15%) rotate(0deg);
 		}
 	}
+	.mask-anim {
+		margin-top: 100px;
+	}
 	img.curtain-left {
 		transform: scaleX(-1);
 		position: fixed;
