diff --git a/index.html b/index.html
index 7d9bedc..646fd73 100644
--- a/index.html
+++ b/index.html
@@ -5,15 +5,48 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" type="text/css" href="styles.css" />
-    <title>Klankschool test</title>
+    <title>Klankschool</title>
     </head>
   <body>
+    <canvas id="background" style="width:100%; height: 100%;"></canvas>
+	<div id="menu">
+		<p class="border"><a href="https://funk.klank.school">funkwhale</a></p>
+		<p class="border"><a href="http://calendar.klank.school">calendar</a></p>
+	</div>
     <div id="app">
-      <h1 id="main">Klankschool</h1>
-      <p><img class="home-img" src="equipment.jpg"></p>
-      <p> Klankschool is an emerging community operating a space in the south of Rotterdam. Each member is a teacher, student, musician, janitor and more. The purpose of the space is to share sounds, work on projects, hang out, exhibit works, learn, teach, listen. See the calendar for upcoming and past events. </p>
-      <p><a href="http://calendar.klank.school">calendar</a></p>
-      <p><a href="https://funk.klank.school">funkwhale</a></p>
+      <h1 id="main" class="border"><marquee  behavior="alternate">Klankschool</marquee></h1>
+      <img class="home-img border" src="klankschool2.gif">
+      <p class="border">Klankschool is a community operating a space (and a server) in the south of Rotterdam. Its members share a common interest in performances, sound art, improvisation, noise, ... Each member is a teacher, student, musician, janitor and more. The motivation to have a community-run space is to share sounds, work on projects, organise events, hang out, exhibit works, learn, teach and listen. See the calendar for upcoming and past activities.</p>
+      <p class="border"> Are you interested in joining? <br>
+      Do you search a space for performance, project, ...? <br>
+      Do you like activities outside of the norms of Spotify streams, elevator sounds, Muzak™, piped music, Ikea furnitures, Netflix series, Airplane flights, eating meat, ... ? <br>
+      Write us an e-mail: klankschool@extratonal.org </p>
+      
     </div>
     </body>
+    <script>
+	// nothing special. just background. joak 2024-10-13
+	const canvas = document.querySelector("canvas");
+	const height = window.innerHeight;
+	const width =  window.innerWidth;
+	const ctx = canvas.getContext("2d");
+	ctx.canvas.height = window.innerHeight;
+	ctx.canvas.width = window.innerWidth;
+	console.log(height, width);
+	size = 20;
+	function rfiller (){
+		console.log("now");
+		for(var w = 0; w < width; w=w+size){
+			for(var h = 0; h < height; h=h+size){
+				var r = Math.floor(Math.random()*255).toString(16);
+				var g= Math.floor(Math.random()*255).toString(16);
+				var b = Math.floor(Math.random()*255).toString(16);
+				ctx.fillStyle = "#"+r+g+b;
+				ctx.fillRect(w, h, w+size, h+size);
+			}
+		}
+	}
+	rfiller();
+	setInterval(rfiller, 2000);
+    </script>
 </html>
diff --git a/klankschool1.jpg b/klankschool1.jpg
new file mode 100644
index 0000000..b02524d
Binary files /dev/null and b/klankschool1.jpg differ
diff --git a/klankschool2.gif b/klankschool2.gif
new file mode 100644
index 0000000..4b4450c
Binary files /dev/null and b/klankschool2.gif differ
diff --git a/klankschool2.jpg b/klankschool2.jpg
new file mode 100644
index 0000000..bfa71a8
Binary files /dev/null and b/klankschool2.jpg differ
diff --git a/styles.css b/styles.css
index 38136f1..75ca4f5 100644
--- a/styles.css
+++ b/styles.css
@@ -7,22 +7,32 @@ html {
     position: relative;
 }
 
+body{
+    background: url(#background);
+    background-size: 100% 100%;
+    -o-background-size: 100% 100%;
+    -webkit-background-size: 100% 100%;
+    background-size: cover;
+    text-align: center;
+}
 
 #app {
-    top: 50%;
-    left: 50%;
-    position: absolute;
-    transform: translate(-50%, -50%);
-    width: 75vw;
-    
+	margin: 0 auto;
+    max-width: 620px;
+    padding-bottom: 30px;
 }
 
 #main {
     text-align: center;
-    border-color: grey;
+    height: 4rem;
+}
+
+.border{
+	border-color: black;
     background-color: white;
-    border-width: 3px;
+    border-width: 2px;
     border-style: solid;
+    box-shadow: 5px 5px 5px black;
 }
 
 a {
@@ -34,23 +44,11 @@ a {
 a:hover {
     color: grey;
 }
-body{
-    height: 100%;
-    background-image: url(noise.svg);
-    background-size: 100% 100%;
-    -o-background-size: 100% 100%;
-    -webkit-background-size: 100% 100%;
-    background-size: cover;
-    text-align: center;
-  }
+
 
 p {
-    font-size: 2rem;	
+    font-size: 1.5rem;	
     padding: 0.5vh 1vw;
-    border-color: grey;
-    background-color: white;
-    border-width: 2px;
-    border-style: solid;
     font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;    
 }
 
@@ -59,6 +57,31 @@ h1 {
     font-size: 3rem;
     font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-weight: 600;
+    text-transform: uppercase;
 }
 
-.home-img{width: 100%; height: 20vh; object-fit: cover;}
\ No newline at end of file
+.home-img{
+	width: 620px; 
+	object-fit: cover;
+}
+
+#menu{
+	position: fixed;
+	display: inline-flex;
+	transform: rotate(-90deg) translate(-100%, 50%);
+	transform-origin: 0 50%;
+	left: 10px;
+	top: 0px;
+}
+
+#menu > p{
+	margin: 0px;
+	margin-left: 10px;
+}
+
+#background{
+	position: fixed;
+	top: 0px;
+	left: 0px;
+	z-index: -1;
+}
