diff --git a/DieJudoGürtelprüfung/kyu.php b/DieJudoGürtelprüfung/kyu.php
index 7f81c3a..31494b2 100644
--- a/DieJudoGürtelprüfung/kyu.php
+++ b/DieJudoGürtelprüfung/kyu.php
@@ -52,9 +52,20 @@ return
 					." height=\"".$article['yaml']['video']['height']."\""
 					." controls"
 				."></video>"
-				."<span class=\"card-title\">".$article['yaml']['title']."</span>"
 			."</div>"
-			."<div class=\"card-content white-text\">".$Parsedown->text($article['mdText'])."</div>"
+			."<div class=\"card-content white-text\">"
+				."<span class=\"card-title activator\">"
+					.$article['yaml']['title']
+					."<i class=\"right\">+</i>"
+				."</span>"
+			."</div>"
+			."<div class=\"card-reveal\">"
+				."<span class=\"card-title\">"
+					.$article['yaml']['title']
+					."<i class=\"right\">X</i>"
+				."</span>"
+				.$Parsedown->text($article['mdText'])
+			."</div>"
 		."</div>"
 	."</div>";
 }
@@ -100,40 +111,42 @@ return
 			<li><a href="kyu.php?kyu=7">7. Kyu - gelb</a></li>
 		</ul>
 		<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
-
-		<div class="row">
 			<?php
 			$kyuMetadata = Spyc::YAMLLoad( $mdRoot."/meta.yaml" );
 			echo("<h1>".$kyuMetadata['title']."</h1>");
-			$dirIterator = new DirectoryIterator( $mdRoot );
-				foreach ( $dirIterator as $path ) {
-					if(!$path->isDir()) continue;
-					if( $path->isDot()) continue;
-					
-					$sectionMetadata = Spyc::YAMLLoad( $mdRoot."/".$path->__toString()."/meta.yaml" );
-					echo("<h2>".$sectionMetadata['title']."</h2>");
-					$fileIterator = new DirectoryIterator($mdRoot."/".$path->__toString());
 
-					foreach($fileIterator as $filePath){
-						if(!$filePath->isFile()) continue;
-						$article = loadMarkdownFile(
-							$mdRoot."/".$path->__toString()."/".$filePath->__toString()
-						);
-						echo( htmlCardCode($article, $Parsedown) );
-					}
-				};
+			$dirNames = [];
+			$dirIterator = new DirectoryIterator( $mdRoot );			
+			foreach ( $dirIterator as $dirInfo ) {
+				if(!$dirInfo->isDir() || $dirInfo->isDot()) continue;
+				$dirNames[] = $dirInfo->__toString();
+			}
+			sort($dirNames);
+			foreach($dirNames as $dirName){
+				$fullDirName = $mdRoot."/".$dirName;
+				$sectionMetadata = Spyc::YAMLLoad( $fullDirName."/meta.yaml" );
+				echo("<div class=\"row\">");
+				echo("<h2>".$sectionMetadata['title']."</h2>");
+
+				$fileIterator = new DirectoryIterator($fullDirName);				
+				$fileNames = [];
+				foreach($fileIterator as $fileInfo){
+					if(!$fileInfo->isFile()) continue;
+					$fileNames[] = $fileInfo->__toString();
+				}
+				sort($fileNames);
+				foreach( $fileNames as $fileName){
+					$fullFileName = $fullDirName."/".$fileName; 
+					$article = loadMarkdownFile( $fullFileName );
+					echo( htmlCardCode($article, $Parsedown) );
+				}
+				echo("</div>");
+			};
 			?>
-		</div>
 
 		<footer class="page-footer">
 			<div class="container">
-				<div class="row">
-				<div class="col l6 s12">
-					<h5 class="white-text">Footer Content</h5>
-					<p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
-				</div>
 				<div class="col l4 offset-l2 s12">
-					<h5 class="white-text">Links</h5>
 					<ul>
 						<li>
 							<a 
@@ -147,18 +160,8 @@ return
 								style="height:1em;display:inline;vertical-align:middle;">
 							</a>
 						</li>
-						<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
-						<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
-						<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
 					</ul>
 				</div>
-				</div>
-			</div>
-			<div class="footer-copyright">
-				<div class="container">
-				© 2014 Copyright Text
-				<a class="grey-text text-lighten-4 right" href="#!">More Links</a>
-				</div>
 			</div>
 		</footer>