diff --git a/package-lock.json b/package-lock.json
index 3427153..8261a7b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1155,6 +1155,11 @@
         "negotiator": "0.6.2"
       }
     },
+    "animejs": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/animejs/-/animejs-3.2.0.tgz",
+      "integrity": "sha512-zhtGl5cS0G2f5DfciMO8uwWpnx06nfFnHlXYYXHBazHep1Lyd6kEtBQP+9hpYKE0dBZjIigHp9VpMO95ZfXQJQ=="
+    },
     "ansi-styles": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
diff --git a/package.json b/package.json
index 7e3f428..16f33cb 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "test": "run-p --race dev cy:run"
   },
   "dependencies": {
+    "animejs": "^3.2.0",
     "compression": "^1.7.1",
     "polka": "next",
     "sirv": "^1.0.0"
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 4d1de45..0ccca5c 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,181 +1,242 @@
 <style>
-	main {
-		background: none !important;
+	#plusko {
+		color: #d73648;
+		border: solid 0.1em;
+		border-color: #d73648;
+		border-radius: 50%;
+		width: 1em;
+		height: 1em;
+		align-items: center;
+		justify-content: center;
+		display: flex;
+		cursor: pointer;
+		line-height: 1em;
+	}
+	#plusko:hover {
+		color: #fff;
+		background-color: #d73648;
+	}
+	#container {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100vh;
+		width: 100vw;
+	}
+	#dots {
+		position: absolute;
+		height: 100vh;
+		width: 100vw;
+	}
+	.label {
+		position: absolute;
+		font-size: 0.5em;
+		transition: .2s ease;
+	}
+	.label:hover {
+		border: solid 0.1em #d73648;
+	}
+	.label a {
+		color: #000;
+	}
+	.label a:hover {
+		color: #d73648;
+		opacity: 1 !important;
+	}
+	.label span:hover ~ .cross {
+		display: none;
+	}
+	#cinnosti {
+		left: auto;
+		right: auto;
+		top: 70vh;
+	}
+	#predseda {
+		left: 23vw;
+		top: 15vh;
+	}
+	#prebiram {
+		left: 70vw;
+		top: 19vh;
+	}
+	#zapojit {
+		left: 33vw;
+		top: 75vh;
+	}
+	#zalozit {
+		top: 60vh;
+		left: 71vw;
+	}
+	.active {
+		background-color: #888 !important;
+		color: #fff !important;
+		border-color: #888 !important;
+	}
+	.cross {
+	   width: 0.7em;
+	   height: 0.7em;
+	   position: relative;
+	}
+
+	.cross:before, .cross:after {
+	  content: "";
+	  position: absolute;
+	  z-index: -1;
+	  background: #d73648;
+	}
+
+	.cross:before {
+	  left: 50%;
+	  width: 10%;
+	  margin-left: -5%;
+	  height: 100%;
+	}
+
+	.cross:after {
+	  top: 50%;
+	  height: 10%;
+	  margin-top: -5%;
+	  width: 100%;
+	}
+	.bottom-right {
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		margin-left: 90%;
+		margin-top: 5%;
+	}
+	.top-right {
+		position: absolute;
+		right: 0;
+		top: 0;
+		margin-left: 90%;
+		margin-bottom: 5%;
+	}
+	.bottom-left {
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		margin-right: 110%;
+		margin-top: 5%;
+	}
+	.top-left {
+		position: absolute;
+		left: 0;
+		top: 0;
+		margin-right: 110%;
+		margin-bottom: 5%;
+	}
+	.pedftext {
+		position: absolute;
+		font-size: 0.5em;
+		left: 5vw;
+		bottom: 5vh;
+		line-height: 1;
+		margin-bottom: 0;
 	}
 </style>
 
 <script>
 	import Logo from '../components/logo.svelte';
-	import UpArrow from '../components/up.svelte';
-	import MenuBtn from '../components/menu-btn.svelte';
+	import anime from 'animejs/lib/anime.es.js';
+	import { onMount } from 'svelte';
+
+	let clicked = false;
+	//function drawLineXY(fromXY, toXY) {
+	//    if(!lineElem) {
+	//        lineElem = document.createElement('canvas');
+	//        lineElem.style.position = "absolute";
+	//        lineElem.style.zIndex = -100;
+	//        document.body.appendChild(lineElem);
+	//    }
+	//    var leftpoint, rightpoint;
+	//    if(fromXY.x < toXY.x) {
+	//      leftpoint = fromXY;
+	//      rightpoint = toXY;
+	//    } else {
+	//      leftpoint = toXY;
+	//      rightpoint = fromXY;
+	//    }
+
+	//    var lineWidthPix = 4;
+	//    var gutterPix = 10;
+	//    var origin = {x:leftpoint.x-gutterPix, 
+	//                  y:Math.min(fromXY.y, toXY.y)-gutterPix};
+	//    lineElem.width = Math.max(rightpoint.x - leftpoint.x, lineWidthPix) + 
+	//      2.0*gutterPix;
+	//    lineElem.height = Math.abs(fromXY.y - toXY.y) + 2.0*gutterPix;
+	//    lineElem.style.left = origin.x;
+	//    lineElem.style.top = origin.y;
+	//    var ctx = lineElem.getContext('2d');
+	//    // Use the identity matrix while clearing the canvas
+	//    ctx.save();
+	//    ctx.setTransform(1, 0, 0, 1, 0, 0);
+	//    ctx.clearRect(0, 0, lineElem.width, lineElem.height);
+	//    ctx.restore();
+	//    ctx.lineWidth = 4;
+	//    ctx.strokeStyle = '#09f';
+	//    ctx.beginPath();
+	//    ctx.moveTo(fromXY.x - origin.x, fromXY.y - origin.y);
+	//    ctx.lineTo(toXY.x - origin.x, toXY.y - origin.y);
+	//    ctx.stroke();
+	//}
+	function spin() {
+		anime({
+			targets: "#plusko span",
+			rotate: {
+				value: "+=180",
+				duration: 300,
+				direction: "alternate",
+			},
+		})
+	}
+
+	function unspin() {
+		anime({
+			targets: "#plusko span",
+			rotate: {
+				value: 0
+			}
+		});
+	}
+
+	function clicked_fun() {
+		clicked = !clicked;
+	}
+	onMount(() => {
+	});
 </script>
 
-<MenuBtn/>
+<Logo/>
 
-<main id="root">
-<section class="row fullheight">
-	<Logo/>
-	<div class="row" style="width: 100%">
-		<section class="col-1"></section>
-		<section class="col-5">
-			<div style="margin-top: 23vh">
-				<h1 style="margin-bottom: 5vh">Chci založit spolek</h1>
-				<hr class="gay-hr">
-				<h6 style="line-height: 1.4; margin-top: 5vh; font-size: calc(var(--font-size) / 1.55)">
-					Snažíme se podporovat vznik nových studentských spolků jak nejvíc to jde. Pro začátek trochu terminologie.
-				</h6>
-				<button type="button" class="button primary cool-button" style="margin-top: 1vh; border-radius: 4vw">
-					↓  Zjisti více
-				</button>
-			</div>
-		</section>
-	</div>
-</section>
-<section class="row" style="margin-top: 5vh">
-	<section class="col-1"></section>
-	<section class="col-6 bg-square bg-center">
-		<h2 style="margin-bottom: 1vh"><b>Formální</b></h2>
-		<hr class="gay-hr" style="margin-bottom: 5vh; ">
-		<p style="font-size: calc(var(--font-size) / 1.8); margin-left: 16vw">
-			Hodí se pro větší (nebo zamýšlené jako větší) spolky.
-			Výhody jsou hlavně větší pořádek díky stanovám v tom, kdo co vede.
-			Spolky mají obvykle radu, kontrolní komisi a volby do nich. Zároveň
-			se musíš oficiálně přihlásit k soudu a vést účetnictví. Se vším ti však pomůžeme
-		</p>
-	</section>
-</section>
-<section class="row" style="margin-top: 5vh">
-	<section class="col-5"></section>
-	<section class="col bg-circle bg-center bg-auto">
-		<h2 style="margin-left: 17vw; margin-bottom: 1vh"><b>Neformální</b></h2>
-		<hr class="gay-hr" style="margin-left: 17vw;margin-bottom: 5vh; ">
-		<p style="font-size: calc(var(--font-size) / 1.8); margin-right: 15vw">
-			Hodí se pro partu lidí, které spojují společné zájmy a koníčky, jako například divadlo.
-			Nemusí mít žádné volby, orgány a nemusí odevzdávat výroční zprávy.
-		</p>
-	</section>
-	<section class="col-1"></section>
-</section>
-<section class="row" style="margin-top: 5vh">
-	<div class="col-1"></div>
-	<div class="col-10 side-line" style="line-height: 1">
-		<div>
-		<h6 style="margin-bottom: 0"><b>Informace k založení neformálního spolku</b></h6>
-		<div>
-	</div>
-</section>
-<section class="row" style="margin-top: 5vh">
-	<div class="col-1"></div>
-	<div class="col">
-		<div class="number-gay">
-			<span>1.</span>
-			<p>Je třeba sehnat tolik a tolik lidí a zaregistrovat se tady - <a href="/#">formulář</a></p>
-		</div>
-	</div>
-	<div class="col">
-		<div style="height: 6vh"></div>
-		<div class="number-gay">
-			<span>2.</span>
-			<p>O granty můžeš žádat tady, až bude venku výzva (dáme ti vědět na email)</p>
-		</div>
-	</div>
-	<div class="col">
-		<div style="height: 12vh"></div>
-		<div class="number-gay">
-			<span>3.</span>
-			<p>Pamatuj ale, že všechny akce musíš nahlašovat tady - <a href="/#">odkaz</a></p>
-		</div>
-	</div>
-	<div class="col-1"></div>
-</section>
-<section class="row" style="margin-top: 5vh">
-	<div class="col-1"></div>
-	<div class="col-10" style="line-height: 1">
-		<div class="side-line">
-			<h6 style="margin-bottom: 0"><b>Informace k založení formálního spolku</b></h6>
-		</div>
-		<p style="font-size: calc(var(--font-size) / 1.8); margin-left:1.15vw; margin-top: 0.5vw">
-			Tady je to už trochu složitější, ale neboj se, zas tak hrozné to není
-		</p>
-	</div>
-</section>
-<section class="row" style="margin-top: 5vh">
-	<div class="col-1"></div>
-	<div class="col">
-		<div class="number-gay">
-			<div class="down">
-			<span>1.</span>
-				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Nejdříve potřebuješ přípravný výbor, ten se musí skládat z alespoň 3 osob</b></h6>
-			</div>
-		</div>
-		<div class="number-gay">
-			<div class="down">
-			<span>4.</span>
-				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Po registraci může článek oficiálně začít fungovat.</b></h6>
-			</div>
-		</div>
-		<div class="number-gay">
-			<div class="down">
-			<span>7.</span>
-				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Základní předpisy</b></h6>
-			</div>
-		</div>
-	</div>
-	<div class="col">
-		<div style="height: 6vh"></div>
-		<div class="number-gay">
-			<div class="down">
-			<span>2.</span>
-				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Je třeba sepsat osnovy</b></h6>
-				<p>
-					Jak to má Agora se můžeš podívat tady, Drosophila tady a Emil tady. Otevřeno má pobočkovou strukturu,
-					takže je to složitější, ale co kdyby.
-				</p>
-			</div>
-		</div>
-		<div class="number-gay">
-			<div class="down">
-			<span>5.</span>
-				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Zajít do banky založit transparentní účet</b></h6>
-			</div>
-		</div>
-		<div class="number-gay">
-			<div class="down">
-			<span>8.</span>
-				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Povinnosti a práva spolku</b></h6>
-			</div>
+<main id="container">
+	<div id="plusko" on:mouseover="{spin}" on:mouseout="{unspin}" class:active="{clicked}" on:click="{clicked_fun}"><span>+</span></div>
+
+	{#if clicked}
+		<div class="label" id="predseda">
+			<span><a href="/predseda">Předseda spolku</a></span>
+			<div class="cross bottom-right"></div>
 		</div>
-	</div>
-	<div class="col">
-		<div style="height: 12vh"></div>
-		<div class="number-gay">
-			<div class="down">
-			<span>3.</span>
-				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Po tomhle všem musíš vyplnit</b></h6>
-				<p>
-					<a href="/#">tenhle formulář</a>
-				</p>
-			</div>
+		<div class="label" id="prebiram">
+			<span style="padding-left: 0.5em; padding-right: 0.5em"><a href="/prebiram">Přebírám spolek</a></span>
+			<div class="cross bottom-left"></div>
 		</div>
-		<div class="number-gay">
-			<div class="down">
-			<span>6.</span>
-				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Registrace jako fakultní spolek - <a href="/#">zde</a></b></h6>
-			</div>
+		<div class="label" id="zapojit">
+			<span><a href="/zapojit-se">Chci se zapojit</a></span>
+			<div class="cross top-right"></div>
 		</div>
-		<div class="number-gay">
-			<div class="down">
-			<span>9.</span>
-				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Nahlašování akcí</b></h6>
-				<p>
-Povinnosti a práva spolkuspolkem dělat se dělá tady:
-					<a href="/#">formulář nahlašování akcí</a>
-				</p>
-			</div>
+		<div class="label" id="zalozit">
+			<span style="padding-left: 0.5em; padding-right: 0.5em"><a href="/zalozit">Chci založit spolek</a></span>
+			<div class="cross top-left"></div>
 		</div>
+	{:else }
+		<span class="label" id="cinnosti">Činnosti ve spolcích</span>
+	{/if}
+	<canvas id="dots">
+	</canvas>
+
+	<div class="pedftext">
+		<p>Pedagogická fakulta</p>
+		<b style="color: #d73648">Univerzita Karlova</b>
 	</div>
-	<div class="col-1"></div>
-</section>
 </main>
-
-<UpArrow/>
diff --git a/static/main.css b/static/main.css
index 67927e2..f54564c 100644
--- a/static/main.css
+++ b/static/main.css
@@ -223,3 +223,8 @@ canvas {
 .no-underline a {
   text-decoration: none !important;
 }
+.clicked {
+  background-color: #888 !important;
+  color: #fff !important;
+  border-color: #888 !important;
+}
diff --git a/static/main.styl b/static/main.styl
index 1f1951c..a338a5f 100644
--- a/static/main.styl
+++ b/static/main.styl
@@ -213,3 +213,9 @@ body > canvas
 .no-underline
 	a
 		text-decoration none !important
+
+.clicked {
+	background-color: #888 !important;
+	color: #fff !important;
+	border-color: #888 !important;
+}