diff --git a/homepage/participo/css/participo.css b/homepage/participo/css/participo.css
index abe6b04..af93700 100644
--- a/homepage/participo/css/participo.css
+++ b/homepage/participo/css/participo.css
@@ -9,3 +9,8 @@ header, main, footer {
 		padding-left: 0;
 	}
 }
+
+.card video{
+	width: 100%;
+	max-width: 100%;
+}
diff --git a/homepage/participo/index.php b/homepage/participo/index.php
index def6ef2..cea2a30 100644
--- a/homepage/participo/index.php
+++ b/homepage/participo/index.php
@@ -124,6 +124,8 @@ function getHtmlEventTable($eventList){
 			});
 		</script>
 
+		<style>h1{ font-size: 2.00rem;}h2{ font-size: 1.50rem;}h3{ font-size: 1.25rem;}h3{ font-size: 1.20rem;}h3{ font-size: 1.15rem;}h6{ font-size: 1.10rem;}</style>
+
 		<title>participo</title>
 		<meta name="description" content="Online-Apps der Judoka des Chemnitzer WSV">
 
@@ -132,11 +134,13 @@ function getHtmlEventTable($eventList){
 	</head>
 
 	<body>
-
 		<header>
-			<nav class="indigo darken-4">cwsvJudo Apps<a class="right top-nav sidenav-trigger waves-effect waves-light hide-on-large-only" href="#" data-target="nav-mobile">
-				<i class="material-icons">menu</i>
-			</a></nav>
+			<nav class="indigo darken-4">
+				<h1 style="display:inline;">cwsvJudo Apps</h1>
+				<a class="right top-nav sidenav-trigger waves-effect waves-light hide-on-large-only" href="#" data-target="nav-mobile">
+					<i class="material-icons">menu</i>
+				</a>
+			</nav>
 			<ul class="sidenav sidenav-fixed sidenav-close" id="nav-mobile">
 				<li class="logo">
 					<a style="height:auto;" class="brand-logo" id="logo-container" href="/participo/">
@@ -145,10 +149,16 @@ function getHtmlEventTable($eventList){
 				</li>
 				<?php require_once("sidenav/loginStatus.php");?><!-- brings its own li -->
 				<li class="bold">
-					<a class="waves-effect waves-teal right-align" href="#AppList">Apps</a>
+					<a class="waves-effect waves-teal right-align" href="#mitmachApps">Mitmachen<i class="material-icons">accessibility</i></a>
 				</li>
 				<li class="bold">
-					<a class="waves-effect waves-teal right-align" href="#Configs">UserInfos</a>
+					<a class="waves-effect waves-teal right-align" href="#infoApps">Informationen<i class="material-icons">info</i></a>
+				</li>
+				<li class="bold">
+					<a class="waves-effect waves-teal right-align" href="#lexiApps">Nachschlagen<i class="material-icons">book</i></a>
+				</li>
+				<li class="bold">
+					<a class="waves-effect waves-teal right-align" href="#configApps">Einstellen<i class="material-icons">manage_accounts</i></a>
 				</li>
 <?php if( isUserAdmin($dbConnection, $userData['id']) ){?>
 				<li class="bold">
@@ -163,19 +173,10 @@ if($_SESSION['login']){
 ?>
 		<main>
 			<!-- List of Mitmach-Apps -->
-			<div class="row" id="AppList">
+			<h2>Zum Mitmachen</h2>
+			<div class="row" id="mitmachApps">
 <?php 
-//var_dump(getCommingWkEvents($dbConnection));
 echo(
-	AppCard::fromArray([
-		'link'       => "kyu",
-		'title'      => "Kyu",
-		'description'=> "Die Prüfungsprogamme der einzelnen Gürtelstufen in Bild, Ton und Text",
-		'imgUrl'     => "images/obi.svg",
-		'actions'    => [
-			AppCardAction::fromArray(['caption'=>"Kyu-Programme", 'link'=>"kyu"]),
-		],
-	])->htmlCode().
 	AppCard::fromArray([
 		'link'       => "/machs",
 		'title'      => "<em>M</em>ein <em>Ach</em>ievement <em>S</em>ystem",
@@ -193,7 +194,15 @@ echo(
 		'actions'    => [
 			AppCardAction::fromArray(['caption'=>"Planer", 'link'=>"/pages/desktop/wkParticipo"]),
 		],
-	])->htmlCode().
+	])->htmlCode()
+)
+?>
+			</div> <!-- mitmachApps -->
+
+			<h2>Zur Information</h2>
+			<div class="row" id="infoApps">
+<?php
+echo(
 	AppCard::fromArray([
 		'link'       => "infoZettel",
 		'title'      => "Infozettel",
@@ -204,13 +213,40 @@ echo(
 		],
 	])->htmlCode()
 );
+// @todo attendanceApp
 ?>
-			</div><!-- End of MitmachApps -->
-			
-			<div class="divider"></div>
+			</div> <!-- infoApps -->
+
+			<h2>Zum Nachschlagen</h2>
+			<div class="row" id="lexiApps">
+<?php
+echo(
+	AppCard::fromArray([
+		'link'       => "kyu",
+		'title'      => "Kyu",
+		'description'=> "Die Prüfungsprogamme der einzelnen Gürtelstufen in Bild, Ton und Text",
+		'imgUrl'     => "images/obi.svg",
+		'actions'    => [
+			AppCardAction::fromArray(['caption'=>"Kyu-Programme", 'link'=>"kyu"]),
+		],
+	])->htmlCode().
+	AppCard::fromArray([
+		'link'       => "/JudoWiki",
+		'title'      => "JudoWiki",
+		'description'=> "Ein Wiki zum Thema Judo",
+		'imgUrl'     => "http://cwsvjudo.bplaced.net/ressourcen/graphiken/icons/wikipediaW.svg",
+		'actions'    => [
+			AppCardAction::fromArray(['caption'=>"JudoWiki", 'link'=>"/JudoWiki"]),
+		],
+	])->htmlCode()
+);
+// @todo horstWolf
+?>
+			</div><!-- lexiApps -->
 
 			<!-- List of ConfigStuff -->
-			<div class="row" id="Configs">
+			<h2>Zum Einstellen</h2>
+			<div class="row" id="configApps">
 <?php
 echo(
 	AppCard::fromArray([
@@ -223,17 +259,22 @@ echo(
 		],
 	])->htmlCode()
 );
+?>
+			</div> <!-- configApps -->
+<?php
 // AdminStuff, thats only visible for Admins
 if( isUserAdmin($dbConnection, $userData['id']) ){
 	echo(
+		"<h2>AdminStuff</h2>".
+		"<div id=\"admiStuff\" class=\"row\">".
 		AppCard::fromArray([
 			'title' =>"lastLogins",
 			'description' => "</p>".lastLoginTable()."</p>"
-		])->htmlCode()
+		])->htmlCode().
+		"</div>"
 	);
 }
 ?>
-			</div><!-- End of ConfigStuff -->
 		</main>
 <?php
 }
diff --git a/homepage/participo/shared/imports.php b/homepage/participo/shared/imports.php
index e305237..2871f23 100644
--- a/homepage/participo/shared/imports.php
+++ b/homepage/participo/shared/imports.php
@@ -1,8 +1,8 @@
 <!-- MaterializeCss -->
 <!-- - Compiled and minified CSS -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@1.1.0-alpha/dist/css/materialize.min.css">
+<link rel="stylesheet" href="/ressourcen/materializeCss/css/materialize.min.css">
 <!-- Compiled and minified JavaScript -->
-<script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@1.1.0-alpha/dist/js/materialize.min.js"></script>
+<script src="/ressourcen/materializeCss/js/materialize.min.js"></script>
 <!--Import Google Icon Font-->
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 
