diff --git a/server.py b/server.py
index 85eadccdee85394ade7c784b1e70ff13547f1745..25cd235b69bcdba75908ee19b5d38ce4d0c94c9c 100755
--- a/server.py
+++ b/server.py
@@ -4,7 +4,7 @@ app = Flask(__name__)
 
 @app.route('/')
 def index():
-	return render_template('index.html', site_title="Video AG")
+	return render_template('index.html', latestvideos=[{'talk':{'title':'talktitle','thumbnail':'https://videoag.fsmpi.rwth-aachen.de/pub/thumbnails/16ss-hyp-160802-Geophysical_models_IV.jpg','id':123,'comment':'comment','date':'date'},'event':{'title':'eventtitle'}},{'talk':{'title':'talktitle','thumbnail':'https://videoag.fsmpi.rwth-aachen.de/pub/thumbnails/16ss-hyp-160802-Geophysical_models_IV.jpg','id':123,'comment':'comment','date':'date'},'event':{'title':'eventtitle'}},{'talk':{'title':'talktitle','thumbnail':'https://videoag.fsmpi.rwth-aachen.de/pub/thumbnails/16ss-hyp-160802-Geophysical_models_IV.jpg','id':123,'comment':'comment','date':'date'},'event':{'title':'eventtitle'}},{'talk':{'title':'talktitle','thumbnail':'https://videoag.fsmpi.rwth-aachen.de/pub/thumbnails/16ss-hyp-160802-Geophysical_models_IV.jpg','id':123,'comment':'comment','date':'date'},'event':{'title':'eventtitle'}}])
 
 if __name__ == '__main__':
 	app.debug = True
diff --git a/static/style.css b/static/style.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..6883d678b56e38ee4f2200f34aa49bede4e4fed3 100644
--- a/static/style.css
+++ b/static/style.css
@@ -0,0 +1 @@
+.videopreview li:nth-child(odd) { background: #f5f5f5; }
diff --git a/templates/header.html b/templates/header.html
index 39764bbcf941eb700d8dbcd1e7b165463886a5b1..bc2d3ddbcd51ccebb0295373850e7022be785c7a 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -7,7 +7,6 @@
 			<div class="col-md-11">
 				<div class="row" style="">
 					<ul class="list-inline col-xs-12">
-						<!---
 						<li>
 							<a href="#">Vampir</a>
 						</li>
@@ -23,7 +22,6 @@
 						<li>
 							<a href="#">Twitter</a>
 						</li>
-						!--->
 					</ul>
 				</div>
 				<div class="row">
diff --git a/templates/index.html b/templates/index.html
index 9b98230f5f3460c027c3a5e10ce1cb117da03f17..3b2ec056578c1777bec53ab2345973c6b72f0fdc 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,76 +1,46 @@
+{% from 'macros.html' import preview %}
 {% extends "base.html" %}
 {% block content %}
 <div class="container-fluid">
 	<div class="row">
-		<div class="col-md-6">
-			<div>
-				<h1>Video AG</h1>
-				<p>Wir machen Vorlesungsvideos, damit du dir deine Vorlesungen angucken kannst, wann, wo und so oft <strong>du</strong> willst ;)</p>
-				<p><strong>Probleme?</strong><a href="http://google.de"> Hier gehts zur FAQ</a></p>
-				<p>Wenn du die Videos nützlich fandest, schreib doch bitte den Dozenten eine kurze E-Mail. Waren die Videos grauenhaft? Kritik an uns.</p>
-				<p>Wenn du mitmachen willst, Fragen oder Anregungen hast, oder nur mal schauen möchtest, komm zu unserem AG-Treffen oder schreib uns eine E-Mail.
-				Insbesondere freuen wir uns über Studis der Mathematik und Physik, die ihre Vorlesungen filmen wollen.
-				Die nächste Sitzung der AG findet am 10.08.2016 ab 18:00 Uhr in den Räumlichkeiten der Fachschaft im Augustinerbach 2a, 1. Obergeschoss statt.
-				</p>
+		<div class="col-md-6 panel-group">
+			<div class="panel panel-default">
+				<div class="panel-heading">
+					<h1>Video AG</h1>
+				</div>
+				<div class="panel-body">
+					<p>Wir machen Vorlesungsvideos, damit du dir deine Vorlesungen angucken kannst, wann, wo und so oft <strong>du</strong> willst ;)</p>
+					<p><strong>Probleme?</strong><a href="http://google.de"> Hier gehts zur FAQ</a></p>
+					<p>Wenn du die Videos nützlich fandest, schreib doch bitte den Dozenten eine kurze E-Mail. Waren die Videos grauenhaft? Kritik an uns.</p>
+					<p>Wenn du mitmachen willst, Fragen oder Anregungen hast, oder nur mal schauen möchtest, komm zu unserem AG-Treffen oder schreib uns eine E-Mail.
+					Insbesondere freuen wir uns über Studis der Mathematik und Physik, die ihre Vorlesungen filmen wollen.</p>
+					<p>Die nächste Sitzung der AG findet am <strong>10.08.2016 ab 18:00 Uhr in den Räumlichkeiten der Fachschaft im Augustinerbach 2a, 1. Obergeschoss</strong> statt.
+					</p>
+				</div>
 			</div>
-			<div>
-				<h1>Featured</h1>
-				<h3>Collegium Musicum</h3>
-				<img style="width:100%" src="http://www.cm.rwth-aachen.de/typo3/typo3temp/pics/c1d685f56a.jpg">
+			<div class="panel panel-default">
+				<div class="panel-heading">
+					<h1>Featured</h1>
+				</div>
+				<div class="panel-body">
+					<h3>Collegium Musicum</h3>
+					<img style="width:100%" src="http://www.cm.rwth-aachen.de/typo3/typo3temp/pics/c1d685f56a.jpg">
+				</div>
 			</div>
 		</div>
 		<div class="col-md-6">
-			<h1>Neueste Videos</h1>
-			<ul class="list-group">
-				<li class="list-group-item">
-					<div class="row">
-						<a href="?view=player&amp;lectureid=7359#content" title="HYP2016">
-							<img class="col-xs-4" src="https://video.fsmpi.rwth-aachen.de/pub/thumbnails/16ss-hyp-160802-720p.jpg" alt="Vorschaubild">
-							<div class="col-xs-4">
-								<span title="HYP2016">HYP2016</span>
-								<span title="02.08.16 18:00">02.08.16</span>
-								<p>The classical limit of quantum observables in conservation laws of fluid dynamics</p>
-							</div>
-							<div class="col-xs-4">
-								<div class="comment">Quantum mechanics II</div>
-								<div class="comment">Gehalten von Anders Szepessy</div>
-							</div>
-						</a>
-					</div>
-				</li>
-				<li class="list-group-item">
-					<div class="row">
-						<a href="?view=player&amp;lectureid=7359#content" title="HYP2016">
-							<img class="col-xs-4" src="https://video.fsmpi.rwth-aachen.de/pub/thumbnails/16ss-hyp-160802-720p.jpg" alt="Vorschaubild">
-							<div class="col-xs-4">
-								<span title="HYP2016">HYP2016</span>
-								<span title="02.08.16 18:00">02.08.16</span>
-								<p>The classical limit of quantum observables in conservation laws of fluid dynamics</p>
-							</div>
-							<div class="col-xs-4">
-								<div class="comment">Quantum mechanics II</div>
-								<div class="comment">Gehalten von Anders Szepessy</div>
-							</div>
-						</a>
-					</div>
-				</li>
-				<li class="list-group-item">
-					<div class="row">
-						<a href="?view=player&amp;lectureid=7359#content" title="HYP2016">
-							<img class="col-xs-4" src="https://video.fsmpi.rwth-aachen.de/pub/thumbnails/16ss-hyp-160802-720p.jpg" alt="Vorschaubild">
-							<div class="col-xs-4">
-								<span title="HYP2016">HYP2016</span>
-								<span title="02.08.16 18:00">02.08.16</span>
-								<p>The classical limit of quantum observables in conservation laws of fluid dynamics</p>
-							</div>
-							<div class="col-xs-4">
-								<div class="comment">Quantum mechanics II</div>
-								<div class="comment">Gehalten von Anders Szepessy</div>
-							</div>
-						</a>
-					</div>
-				</li>
-			</ul>
+			<div class="panel panel-default">
+				<div class="panel-heading">
+					<h1>Neueste Videos</h1>
+				</div>
+				<div class="panel-body">
+					<ul class="list-group videopreview">
+						{% for i in latestvideos %}
+							{{ preview(i['talk'],i['event']) }}
+						{% endfor %}
+					</ul>
+				</div>
+			</div>
 		</div>
 	</div>
 </div>
diff --git a/templates/macros.html b/templates/macros.html
new file mode 100644
index 0000000000000000000000000000000000000000..c625fa03fb723f4f72de47d12f1885ee1bf94f2d
--- /dev/null
+++ b/templates/macros.html
@@ -0,0 +1,19 @@
+{% macro preview(talk,event) %}
+<li class="list-group-item">
+	<div class="row">
+		<a href="?view=player&amp;lectureid={{ talk['id'] }}#content" title="{{ event['title'] }}">
+			<img class="col-xs-4" src="{{ talk['thumbnail'] }}" alt="Vorschaubild">
+			<div class="col-xs-4">
+				<span>{{ event['title'] }}</span>
+				<span>{{ talk['date'] }}</span>
+				<p>{{ talk['title'] }}</p>
+			</div>
+			<div class="col-xs-4">
+				<div class="comment">{{ talk['comment']  }}</div>
+				<div class="comment">Gehalten von {{ talk['speaker']|default('unbekannt') }} </div>
+			</div>
+		</a>
+	</div>
+</li>
+
+{% endmacro %}: