diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index b2291f0..029bca8 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -5,6 +5,7 @@
 		display: flex;
 		cursor: pointer;
 		line-height: 1em;
+		z-index: 1011;
 	}
 	#plusko:hover {
 	}
@@ -28,9 +29,18 @@
 	.label2:hover {
 		border: solid 0.1em #d73648;
 	}
-	.labels:hover > *:not(:hover) {
-		font-size: 0.45em;
+	.labels {
+		position: absolute;
+		left: auto;
+		right: auto;
+		top: auto;
+		bottom: auto;
+		width: 1200px;
+		height: 800px;
 	}
+	/*.labels:hover > *:not(:hover) {
+		font-size: 0.45em;
+	}*/
 	.label a {
 		color: #000;
 	}
@@ -47,24 +57,24 @@
 		top: 70vh;
 	}
 	#predseda {
-		left: 23vw;
-		top: 15vh;
+		left: 200px;
+		top: 100px;
 	}
 	#prebiram {
-		left: 65vw;
-		top: 19vh;
+		right: 150px;
+		top: 150px;
 	}
 	#zapojit {
-		left: 25vw;
-		top: 50vh;
+		left: 150px;
+		top: 400px;
 	}
 	#zalozit {
-		top: 60vh;
-		left: 71vw;
+		top: 600px;
+		right: 170px;
 	}
 	#oborovky {
-		left: 32vw;
-		top: 75vh;
+		left: 300px;
+		top: 700px;
 	}
 	.active {
 	}
@@ -73,6 +83,9 @@
 	   height: 0.7em;
 	   position: relative;
 	}
+	.label.label2 span a {
+		padding: 0.5em;
+	}
 
 	.cross:before, .cross:after {
 	  content: "";
@@ -83,14 +96,14 @@
 
 	.cross:before {
 	  left: 50%;
-	  width: 10%;
+	  width: 20%;
 	  margin-left: -5%;
 	  height: 100%;
 	}
 
 	.cross:after {
 	  top: 50%;
-	  height: 10%;
+	  height: 20%;
 	  margin-top: -5%;
 	  width: 100%;
 	}
@@ -130,6 +143,9 @@
 		line-height: 1;
 		margin-bottom: 0;
 	}
+	.dotted {
+		border-top: dotted 1px;
+	}
 @-webkit-keyframes rotating /* Safari and Chrome */ {
   from {
     -webkit-transform: rotate(0deg);
@@ -178,14 +194,14 @@
 		top: 70vh;
 	}
 	#predseda {
-		top: 30vh;
+		top: 25vh;
 		width: calc(100% - 16em);
 		left: 0;
 		padding: 0;
 		padding-left: 20px;
 	}
 	#prebiram {
-		top: 40vh;
+		top: 37.5vh;
 		width: calc(100% - 16em);
 		left: 0;
 		padding: 0;
@@ -199,14 +215,14 @@
 		padding-left: 20px;
 	}
 	#zalozit {
-		top: 60vh;
+		top: 62.5vh;
 		width: calc(100% - 16em);
 		left: 0;
 		padding: 0;
 		padding-left: 20px;
 	}
 	#oborovky {
-		top: 70vh;
+		top: 75vh;
 		width: calc(100% - 16em);
 		left: 0;
 		padding: 0;
@@ -230,7 +246,7 @@
 		border-radius: 4vw;
 		background-color: var(--color-primary);
 		color: #fff !important;
-        padding: 3rem 9rem;
+        padding: 3rem 1rem;
         margin-left: 8em;
         margin-right: 8em;
         text-align: center;
@@ -240,6 +256,15 @@
         font-size: calc(var(--font-size));
 		color: #fff;
 	}
+	svg {
+		display: none
+	}
+	.labels {
+		width: 100vw;
+		height: 100vh;
+		top: 0;
+		left: 0;
+	}
 }
 </style>
 
@@ -249,68 +274,34 @@
 	import { onMount, afterUpdate } 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 img",
-		//	rotate: {
-		//		value: "+=180",
-		//		duration: 300,
-		//		direction: "alternate",
-		//	},
-		//})
-	}
-
-	function unspin() {
-		//anime({
-		//	targets: "#plusko img",
-		//	rotate: {
-		//		value: 0
-		//	}
-		//});
+	let what = {
+		"predseda" : [ 0, 0, 0, 0 ],
+		"prebiram" : [ 0, 0, 0, 0 ],
+		"zapojit" : [ 0, 0, 0, 0 ],
+		"zalozit" : [ 0, 0, 0, 0 ],
+		"oborovky" : [ 0, 0, 0, 0 ],
 	}
-
 	function clicked_fun() {
 		clicked = !clicked;
 
 		if (clicked) {
+    		setTimeout(() => {
+        		let predseda = document.getElementById("predseda");
+        		let prebiram = document.getElementById("prebiram");
+        		let zapojit = document.getElementById("zapojit");
+        		let zalozit = document.getElementById("zalozit");
+        		let oborovky = document.getElementById("oborovky");
+        		let plusko = document.getElementById("plusko")
+
+        		what["predseda"] = [ predseda.clientHeight, predseda.clientWidth, predseda.offsetLeft, predseda.offsetTop ];
+        		what["prebiram"] = [ prebiram.clientHeight, prebiram.clientWidth, prebiram.offsetLeft, prebiram.offsetTop ];
+        		what["zapojit"] = [ zapojit.clientHeight, zapojit.clientWidth, zapojit.offsetLeft, zapojit.offsetTop ];
+        		what["zalozit"] = [ zalozit.clientHeight, zalozit.clientWidth, zalozit.offsetLeft, zalozit.offsetTop ];
+        		what["oborovky"] = [ oborovky.clientHeight, oborovky.clientWidth, oborovky.offsetLeft, oborovky.offsetTop ];
+        		what["plusko"] = [ plusko.clientHeight, plusko.clientWidth, plusko.offsetLeft, plusko.offsetTop ];
+
+        		console.log(what);
+        	}, 150);
     	}
 	}
 
@@ -347,22 +338,6 @@
         // alert(htmlLine);
         document.body.innerHTML += htmlLine;
     }
-	//afterUpdate(() => {
-	//	if (document.getElementById("predseda") !== null && document.getElementById("predseda") !== undefined) {
-    //		let predseda = document.getElementById("predseda");
-    //		let prebiram = document.getElementById("prebiram");
-    //		let zapojit = document.getElementById("zapojit");
-    //		let zalozit = document.getElementById("zalozit");
-    //		let oborovky = document.getElementById("oborovky");
-    //		let plusko = document.getElementById("plusko")
-
-    //		connect(predseda, plusko, "#000", "1");
-    //		connect(prebiram, plusko, "#000", "1");
-    //		connect(zapojit, plusko, "#000", "1");
-    //		connect(zalozit, plusko, "#000", "1");
-    //		connect(oborovky, plusko, "#000", "1");
-	//	}
-	//});
     function vwTOpx(value) {
         var w = window,
           d = document,
@@ -401,7 +376,7 @@
 <Logo keep={true}/>
 
 <main id="container">
-	<div id="plusko" on:mouseover="{spin}" on:mouseout="{unspin}" class:active="{clicked}" on:click="{clicked_fun}">
+	<div id="plusko" class:active="{clicked}" on:click="{clicked_fun}">
     	{#if clicked}
         	<img src="/img/main-btn-active.png">
     	{:else}
@@ -414,6 +389,90 @@
 
 	{#if clicked }
 	<div class="labels">
+		<svg width="1200" height="800" style="position: absolute; left: 0; top: 0">
+    		<line
+    			x1="{what['predseda'][1] + what['predseda'][2]}"
+    			y1="{what['predseda'][0] + what['predseda'][3]}"
+    			x2="{what['zapojit'][2] + what['zapojit'][1]}"
+    			y2="{what['zapojit'][3]}"
+    			stroke="black"
+				stroke-dasharray="5,5"
+			/>
+    		<line
+    			x1="{what['zapojit'][2] + what['zapojit'][1]}"
+    			y1="{what['zapojit'][3]}"
+    			x2="{what['oborovky'][1] + what['oborovky'][2] - 7}"
+    			y2="{what['oborovky'][3] + 10}"
+    			stroke="black"
+				stroke-dasharray="5,5"
+			/>
+    		<line
+    			x1="{what['oborovky'][1] + what['oborovky'][2] - 7}"
+    			y1="{what['oborovky'][3] + 10}"
+    			x2="{what['zalozit'][2] + 10}"
+    			y2="{what['zalozit'][3] + 5}"
+    			stroke="black"
+				stroke-dasharray="5,5"
+			/>
+    		<line
+    			x1="{what['zalozit'][2] + 10}"
+    			y1="{what['zalozit'][3] + 5}"
+    			x2="{what['prebiram'][2] + 10}"
+    			y2="{what['prebiram'][3] + what['prebiram'][0]}"
+    			stroke="black"
+				stroke-dasharray="5,5"
+			/>
+    		<line
+    			x1="{what['prebiram'][2] + 10}"
+    			y1="{what['prebiram'][3] + what['prebiram'][0]}"
+    			x2="{what['predseda'][1] + what['predseda'][2]}"
+    			y2="{what['predseda'][0] + what['predseda'][3]}"
+    			stroke="black"
+				stroke-dasharray="5,5"
+			/>
+
+    		<line
+    			x1="{what['predseda'][1] + what['predseda'][2]}"
+    			y1="{what['predseda'][0] + what['predseda'][3]}"
+    			x2="{600}"
+    			y2="{400}"
+    			stroke="black"
+				stroke-dasharray="5,5"
+			/>
+    		<line
+    			x1="{what['zapojit'][2] + what['zapojit'][1]}"
+    			y1="{what['zapojit'][3]}"
+    			x2="{600}"
+    			y2="{400}"
+    			stroke="black"
+				stroke-dasharray="5,5"
+			/>
+    		<line
+    			x1="{what['oborovky'][1] + what['oborovky'][2] - 7}"
+    			y1="{what['oborovky'][3] + 10}"
+    			x2="{600}"
+    			y2="{400}"
+    			stroke="black"
+				stroke-dasharray="5,5"
+			/>
+    		<line
+    			x1="{what['zalozit'][2] + 10}"
+    			y1="{what['zalozit'][3] + 5}"
+    			x2="{600}"
+    			y2="{400}"
+    			stroke="black"
+				stroke-dasharray="5,5"
+			/>
+    		<line
+    			x1="{what['prebiram'][2] + 10}"
+    			y1="{what['prebiram'][3] + what['prebiram'][0]}"
+    			x2="{600}"
+    			y2="{400}"
+    			stroke="black"
+				stroke-dasharray="5,5"
+			/>
+
+    	</svg>
 		<div class="label label2" id="predseda">
 			<span><a href="/predseda">Předseda spolku</a></span>
 			<div class="cross bottom-right"></div>