diff --git a/css/style.css b/css/style.css
index 9304a061d584d258c6f3303ac43ce7999243a242..b337d1077a0b4c184b82e44f67ae963113fd5cef 100644
--- a/css/style.css
+++ b/css/style.css
@@ -48,6 +48,35 @@
 	margin-bottom:  0.5rem !important;
 }
 
+.trainmap {
+	margin-top: 50px;
+}
+
+.train-circle{
+	margin: auto;
+	width: 30px !important;
+	height: 30px !important;
+	border-radius: 50%;
+}
+
+.train-circle-light{
+	background-color: #64b5f6 !important;
+}
+
+.train-line{
+	margin: auto;
+	width: 8px !important;
+	border-left: 8px solid #2196f3;
+}
+
+.dotted{
+	border-left: 8px dashed #64b5f6 !important;
+}
+
+.version-entry-title:hover{
+	cursor: pointer;
+}
+
 #headline{
 	margin-top: 2.5rem;
 	margin-bottom: 2.2rem;
diff --git a/index.php b/index.php
index fc4079900196ba1e64233a2312648f503d1bed74..d97b217592b667eff36f60633da34778479e8a30 100644
--- a/index.php
+++ b/index.php
@@ -23,117 +23,239 @@
 			<div class="container">
 				<h2 class="center-align" id="headline">PlayWall Roadmap</h2>
 				<div class="row">
-					<div class="col s12 m6">
-						<div class="card padding white">
-							<div class="card-content">
-								<div class="amber lighten-2 center-align margin-bottom">
-									<span class="card-title bold">Current Version (v1.5.7)</span>
-								</div>
-								<div class="white progress-container">
-									<div class="progress grey lighten-2 high-progress margin-bottom">
-										<div class="determinate green" style="width: 40%"></div>
-									</div>
-								</div>
-								<div class="row">
-									<div class="col s6 valign-wrapper">
-										<i class="material-icons valign">event</i><span class="valign margin-left">Due by 25.06.16</span>
+					<div class="col s12">
+						<div class="row">
+							<div class="col s2 m2 l2 offset-m1 offset-l1 trainmap">
+								<div class="train-circle train-circle-light"></div>
+								<div class="train-line dotted"></div>
+								<div class="train-circle blue"></div>
+								<div class="train-line"></div>
+								<div class="train-circle blue"></div>
+								<div class="train-line"></div>
+								<div class="train-circle blue"></div>
+								<div class="train-line"></div>
+								<div class="train-circle blue"></div>
+							</div>
+						<div class="col s10 m7 l6">
+							<div class="card padding white version-entry">
+								<div class="card-content">
+									<div class="blue lighten-2 center-align margin-bottom">
+										<span class="card-title bold version-entry-title truncate">v1.6.0 - Next Version</span>
 									</div>
-									<div class="col s6 valign-wrapper">
-										<i class="material-icons valign">settings</i><span class="valign margin-left">40% Done</span>
+									<div class="version-entry-content">
+										<div class="white progress-container">
+											<div class="progress grey lighten-2 high-progress margin-bottom">
+												<div class="determinate green" style="width: 40%"></div>
+											</div>
+										</div>
+										<div class="row">
+											<div class="col s6 valign-wrapper">
+												<i class="material-icons valign">event</i><span class="valign margin-left">Due by 25.06.16</span>
+											</div>
+											<div class="col s6 valign-wrapper">
+												<i class="material-icons valign">settings</i><span class="valign margin-left">40% Done</span>
+											</div>
+										</div>
+										<ul class="collapsible white" data-collapsible="accordion">
+											<li>
+												<div class="collapsible-header bold"><i class="material-icons red-text">build</i>Layout<span class="right">1/3</span></div>
+												<div class="collapsible-body">
+
+													<ul class="collapsible white margin-left-and-right no-shadow margin-top-and-bottom" data-collapsible="accordion">
+														<li>
+															<div class="collapsible-header bold"><span class="left">1</span><i class="material-icons green-text margin-left">check</i>Layout Einstellungen</div>
+															<div class="collapsible-body"><p>PlayWall ermöglicht es nun Audio und andere Medien im Hintergrund wiederzugeben, während eine andere Seite offen ist.</p></div>
+														</li>
+														<li>
+															<div class="collapsible-header bold"><span class="left">2</span><i class="material-icons red-text margin-left">build</i>Layout Cards</div>
+															<div class="collapsible-body"><p>PlayWall ermöglicht es nun Audio und andere Medien im Hintergrund wiederzugeben, während eine andere Seite offen ist.</p></div>
+														</li>
+														<li>
+															<div class="collapsible-header bold"><span class="left">3</span><i class="material-icons red-text margin-left">build</i>Layout Equalizer</div>
+															<div class="collapsible-body"><p>PlayWall ermöglicht es nun Audio und andere Medien im Hintergrund wiederzugeben, während eine andere Seite offen ist.</p></div>
+														</li>
+													</ul>
+
+												</div>
+											</li>
+											<li>
+												<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Live Mode</div>
+												<div class="collapsible-body"><p>Mit dem neuen Livemode ist ein noch einfach die Kontrolle während Veranstaltungen zu behalten.</p></div>
+											</li>
+											<li>
+												<div class="collapsible-header bold"><i class="material-icons red-text">build</i>Trigger</div>
+												<div class="collapsible-body"><p>Mit dem neuen Livemode ist ein noch einfach die Kontrolle während Veranstaltungen zu behalten.</p></div>
+											</li>
+										</ul>
 									</div>
 								</div>
-								<ul class="collapsible white" data-collapsible="accordion">
-									<li>
-										<div class="collapsible-header bold"><i class="material-icons red-text">build</i>Layout<span class="right">1/3</span></div>
-										<div class="collapsible-body">
+							</div>
 
-											<ul class="collapsible white margin-left-and-right no-shadow margin-top-and-bottom" data-collapsible="accordion">
-												<li>
-													<div class="collapsible-header bold"><span class="left">1</span><i class="material-icons green-text margin-left">check</i>Layout Einstellungen</div>
-													<div class="collapsible-body"><p>PlayWall ermöglicht es nun Audio und andere Medien im Hintergrund wiederzugeben, während eine andere Seite offen ist.</p></div>
-												</li>
-												<li>
-													<div class="collapsible-header bold"><span class="left">2</span><i class="material-icons red-text margin-left">build</i>Layout Cards</div>
-													<div class="collapsible-body"><p>PlayWall ermöglicht es nun Audio und andere Medien im Hintergrund wiederzugeben, während eine andere Seite offen ist.</p></div>
-												</li>
-												<li>
-													<div class="collapsible-header bold"><span class="left">3</span><i class="material-icons red-text margin-left">build</i>Layout Equalizer</div>
-													<div class="collapsible-body"><p>PlayWall ermöglicht es nun Audio und andere Medien im Hintergrund wiederzugeben, während eine andere Seite offen ist.</p></div>
-												</li>
-											</ul>
 
+							<div class="card padding white version-entry">
+								<div class="card-content">
+									<div class="amber lighten-2 center-align margin-bottom">
+										<span class="card-title bold  version-entry-title truncate">v1.5.7 - Current Version</span>
+									</div>
+									<div class="version-entry-content">
+										<div class="row">
+											<div class="col s6 valign-wrapper">
+												<i class="material-icons valign">event</i><span class="valign margin-left">Due by 25.06.16</span>
+											</div>
+											<div class="col s6 valign-wrapper">
+												<i class="material-icons valign">event</i><span class="valign margin-left">Done at 25.06.16</span>
+											</div>
 										</div>
-									</li>
-									<li>
-										<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Play in Background</div>
-										<div class="collapsible-body"><p>PlayWall ermöglicht es nun Audio und andere Medien im Hintergrund wiederzugeben, während eine andere Seite offen ist.</p></div>
-									</li>
-									<li>
-										<div class="collapsible-header bold"><i class="material-icons red-text">build</i>Live Mode</div>
-										<div class="collapsible-body"><p>Mit dem neuen Livemode ist ein noch einfach die Kontrolle während Veranstaltungen zu behalten.</p></div>
-									</li>
-								</ul>
+										<ul class="collapsible white" data-collapsible="accordion">
+											<li>
+												<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Play in Background</div>
+												<div class="collapsible-body"><p>PlayWall ermöglicht es nun Audio und andere Medien im Hintergrund wiederzugeben, während eine andere Seite offen ist.</p></div>
+											</li>
+											<li>
+												<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Live Mode</div>
+												<div class="collapsible-body"><p>Mit dem neuen Livemode ist ein noch einfach die Kontrolle während Veranstaltungen zu behalten.</p></div>
+											</li>
+										</ul>
+									</div>
+								</div>
 							</div>
-						</div>
-					</div>
-					<div class="col s12 m6">
-						<div class="card padding white">
-							<div class="card-content">
-								<div class="grey lighten-2 center-align margin-bottom">
-									<span class="card-title bold">Next Version (v1.6.0)</span>
+
+							<div class="card padding white version-entry">
+								<div class="card-content">
+									<div class="grey lighten-2 center-align">
+										<span class="card-title bold  version-entry-title truncate">v1.3.0 - Third Version</span>
+									</div>
+									<div class="version-entry-content hide">
+										<div class="row">
+											<div class="col s6 valign-wrapper">
+												<i class="material-icons valign">event</i><span class="valign margin-left">Due by 25.06.16</span>
+											</div>
+											<div class="col s6 valign-wrapper">
+												<i class="material-icons valign">event</i><span class="valign margin-left">Done at 25.06.16</span>
+											</div>
+										</div>
+										<ul class="collapsible white" data-collapsible="accordion">
+											<li>
+												<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Play in Background</div>
+												<div class="collapsible-body"><p>PlayWall ermöglicht es nun Audio und andere Medien im Hintergrund wiederzugeben, während eine andere Seite offen ist.</p></div>
+											</li>
+											<li>
+												<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Live Mode</div>
+												<div class="collapsible-body"><p>Mit dem neuen Livemode ist ein noch einfach die Kontrolle während Veranstaltungen zu behalten.</p></div>
+											</li>
+											<li>
+												<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Live Mode</div>
+												<div class="collapsible-body"><p>Mit dem neuen Livemode ist ein noch einfach die Kontrolle während Veranstaltungen zu behalten.</p></div>
+											</li>
+											<li>
+												<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Live Mode</div>
+												<div class="collapsible-body"><p>Mit dem neuen Livemode ist ein noch einfach die Kontrolle während Veranstaltungen zu behalten.</p></div>
+											</li>
+											<li>
+												<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Live Mode</div>
+												<div class="collapsible-body"><p>Mit dem neuen Livemode ist ein noch einfach die Kontrolle während Veranstaltungen zu behalten.</p></div>
+											</li>
+											<li>
+												<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Live Mode</div>
+												<div class="collapsible-body"><p>Mit dem neuen Livemode ist ein noch einfach die Kontrolle während Veranstaltungen zu behalten.</p></div>
+											</li>
+
+										</ul>
+									</div>
 								</div>
-								<div class="white progress-container">
-									<div class="progress grey lighten-2 high-progress margin-bottom">
-										<div class="determinate green" style="width: 0%"></div>
+							</div>
+
+							<div class="card padding white version-entry">
+								<div class="card-content">
+									<div class="grey lighten-2 center-align">
+										<span class="card-title bold  version-entry-title truncate">v1.1.0 - Second Version</span>
+									</div>
+									<div class="version-entry-content hide">
+										<div class="row">
+											<div class="col s6 valign-wrapper">
+												<i class="material-icons valign">event</i><span class="valign margin-left">Due by 25.06.16</span>
+											</div>
+											<div class="col s6 valign-wrapper">
+												<i class="material-icons valign">event</i><span class="valign margin-left">Done at 25.06.16</span>
+											</div>
+										</div>
+										<ul class="collapsible white" data-collapsible="accordion">
+											<li>
+												<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Play in Background</div>
+												<div class="collapsible-body"><p>PlayWall ermöglicht es nun Audio und andere Medien im Hintergrund wiederzugeben, während eine andere Seite offen ist.</p></div>
+											</li>
+											<li>
+												<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Live Mode</div>
+												<div class="collapsible-body"><p>Mit dem neuen Livemode ist ein noch einfach die Kontrolle während Veranstaltungen zu behalten.</p></div>
+											</li>
+											<li>
+												<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Live Mode</div>
+												<div class="collapsible-body"><p>Mit dem neuen Livemode ist ein noch einfach die Kontrolle während Veranstaltungen zu behalten.</p></div>
+											</li>
+											<li>
+												<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Live Mode</div>
+												<div class="collapsible-body"><p>Mit dem neuen Livemode ist ein noch einfach die Kontrolle während Veranstaltungen zu behalten.</p></div>
+											</li>
+											<li>
+												<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Live Mode</div>
+												<div class="collapsible-body"><p>Mit dem neuen Livemode ist ein noch einfach die Kontrolle während Veranstaltungen zu behalten.</p></div>
+											</li>
+											<li>
+												<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Live Mode</div>
+												<div class="collapsible-body"><p>Mit dem neuen Livemode ist ein noch einfach die Kontrolle während Veranstaltungen zu behalten.</p></div>
+											</li>
+
+										</ul>
 									</div>
 								</div>
-								<div class="row">
-									<div class="col s6 valign-wrapper">
-										<i class="material-icons valign">event</i><span class="valign margin-left">&lt;No Due Date&gt;</span>
+							</div>
+
+							<div class="card padding white version-entry">
+								<div class="card-content">
+									<div class="grey lighten-2 center-align">
+										<span class="card-title bold  version-entry-title truncate">v1.0.0 - First Version</span>
 									</div>
-									<div class="col s6 valign-wrapper">
-										<i class="material-icons valign">settings</i><span class="valign margin-left">0% Done</span>
+									<div class="version-entry-content hide">
+										<div class="row">
+											<div class="col s6 valign-wrapper">
+												<i class="material-icons valign">event</i><span class="valign margin-left">Due by 25.06.16</span>
+											</div>
+											<div class="col s6 valign-wrapper">
+												<i class="material-icons valign">event</i><span class="valign margin-left">Done at 25.06.16</span>
+											</div>
+										</div>
+										<ul class="collapsible white" data-collapsible="accordion">
+											<li>
+												<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Play in Background</div>
+												<div class="collapsible-body"><p>PlayWall ermöglicht es nun Audio und andere Medien im Hintergrund wiederzugeben, während eine andere Seite offen ist.</p></div>
+											</li>
+											<li>
+												<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Live Mode</div>
+												<div class="collapsible-body"><p>Mit dem neuen Livemode ist ein noch einfach die Kontrolle während Veranstaltungen zu behalten.</p></div>
+											</li>
+											<li>
+												<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Live Mode</div>
+												<div class="collapsible-body"><p>Mit dem neuen Livemode ist ein noch einfach die Kontrolle während Veranstaltungen zu behalten.</p></div>
+											</li>
+											<li>
+												<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Live Mode</div>
+												<div class="collapsible-body"><p>Mit dem neuen Livemode ist ein noch einfach die Kontrolle während Veranstaltungen zu behalten.</p></div>
+											</li>
+											<li>
+												<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Live Mode</div>
+												<div class="collapsible-body"><p>Mit dem neuen Livemode ist ein noch einfach die Kontrolle während Veranstaltungen zu behalten.</p></div>
+											</li>
+											<li>
+												<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Live Mode</div>
+												<div class="collapsible-body"><p>Mit dem neuen Livemode ist ein noch einfach die Kontrolle während Veranstaltungen zu behalten.</p></div>
+											</li>
+										</ul>
 									</div>
 								</div>
-								<ul class="collapsible white" data-collapsible="accordion">
-									<li>
-										<div class="collapsible-header bold"><i class="material-icons red-text">build</i>Trigger</div>
-										<div class="collapsible-body"><p>PlayWall bietet nur die Möglichkeit Kacheln und anderen Einstellungen eventbasiert zu steuern. </p></div>
-									</li>
-									<li>
-										<div class="collapsible-header bold"><i class="material-icons red-text">build</i>Updates</div>
-										<div class="collapsible-body"><p>Noch nie war es so einfach Updates zu erhalten. Mit dem neuen Updater können Plugins und das Programm im handumdrehen aktualisiert werden. </p></div>
-									</li>
-									<li>
-										<div class="collapsible-header bold"><i class="material-icons red-text">build</i>Lock</div>
-										<div class="collapsible-body"><p>Sichere deine Einstellungen ganz einfach mit nur einem Klick.</p></div>
-									</li>
-									<li>
-										<div class="collapsible-header bold"><i class="material-icons red-text">build</i>Beta Update Kanal</div>
-										<div class="collapsible-body"><p>Es ist jetzt möglich, direkt Beta Versionen zu installieren und zu aktualisieren.</p></div>
-									</li>
-									<li>
-										<div class="collapsible-header bold"><i class="material-icons red-text">build</i>Neues Logo</div>
-										<div class="collapsible-body"><p>Das Programm hat ein neues Logo erhalten.</p></div>
-									</li>
-								</ul>
 							</div>
 						</div>
 					</div>
 				</div>
-
-				<div class="hide-on-med-and-up center-align">
-					<a class="btn-flat no-transform blue-text margin-bottom" id="button-previousVersions1">Show Previous Versions</a>
-				</div>
-
-				<div class="hide-on-small-only">
-					<a class="btn-flat no-transform blue-text margin-bottom" id="button-previousVersions2">Show Previous Versions</a>
-				</div>
-
-				<div class="hide" id="previousVersions">
-					<?php include('history.php'); ?>
-				</div>
-
 			</div>
 		</div>
 	</body>
diff --git a/js/main.js b/js/main.js
index eb0935a882c9a6710ba7ff570092b697a6f4a9cd..d7f0e6b7b472ccbe7cb2356bafe07281fcc2be8b 100644
--- a/js/main.js
+++ b/js/main.js
@@ -3,41 +3,15 @@ $(document).ready(function(){
 		accordion : false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
 	});
 
-	$('#button-previousVersions1').click(function()
+	$('.version-entry-title').click(function()
 	{
-		togglePreviousVersions();
+		toggleDetail($(this).get(0));
+		createTrainMap();
 	});
 
-	$('#button-previousVersions2').click(function()
-	{
-		togglePreviousVersions();
-	});
+	createTrainMap();
 });
 
-var hidden = true;
-var buttonPreviousVersionShow = "Show Previous Versions";
-var buttonPreviousVersionHide = "Hide Previous Versions";
-
-function togglePreviousVersions()
-{
-	var element = document.getElementById('previousVersions');
-
-	if(hidden)
-	{
-		hideElement(element, false);
-		document.getElementById('button-previousVersions1').innerHTML = buttonPreviousVersionHide;
-		document.getElementById('button-previousVersions2').innerHTML = buttonPreviousVersionHide;
-		hidden = false;
-	}
-	else
-	{
-		hideElement(element, true);
-		document.getElementById('button-previousVersions1').innerHTML = buttonPreviousVersionShow;
-		document.getElementById('button-previousVersions2').innerHTML = buttonPreviousVersionShow;
-		hidden = true;
-	}
-}
-
 function isNull(object)
 {
 	if(object != "" && object != undefined)
@@ -78,4 +52,43 @@ function fadeIn(element)
 		element.style.opacity = op;
 		op += 0.1;
 	}, 50);
+}
+
+function createTrainMap()
+{
+	var entries = document.getElementsByClassName('version-entry');
+	var lines = document.getElementsByClassName('train-line');
+
+	for(var i = 0; i < entries.length - 1; i++)
+	{
+		var height = entries[i].offsetHeight - 16;
+		lines[i].style.height = height + "px";
+	}
+}
+
+function toggleDetail(element)
+{
+	var container = element.parentElement.parentElement.childNodes[3];
+	var cardHeader = element.parentElement;
+
+	if(container.classList.contains("hide"))
+	{
+		hideElement(container, false);
+
+		fadeIn(container);
+
+		if(!cardHeader.classList.contains("margin-bottom"))
+		{
+			cardHeader.classList.add("margin-bottom");
+		}
+	}
+	else
+	{
+		hideElement(container, true);
+
+		if(cardHeader.classList.contains("margin-bottom"))
+		{
+			cardHeader.classList.remove("margin-bottom");
+		}
+	}
 }
\ No newline at end of file