diff --git a/assets/css/common.css b/assets/css/common.css
new file mode 100644
index 0000000000000000000000000000000000000000..e18abb58954cc6a6a78a437a67a64254c2a3e7b6
--- /dev/null
+++ b/assets/css/common.css
@@ -0,0 +1,70 @@
+@font-face {
+    font-family: 'Roboto';
+    src: url('font/Roboto-Regular.ttf');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'RobotoBold';
+    src: url('font/Roboto-Bold.ttf');
+    font-weight: normal;
+    font-style: normal;
+}
+
+body {
+    font-family: 'Roboto';
+    color: #111111;
+    background: #A9A9A9;
+}
+
+div.header {
+    text-align: center;
+    font-size: 3.5em;
+    margin-bottom: 30px;
+}
+
+div.content {
+    width: 940px;
+    margin: auto;
+}
+
+table.calendar {
+    width: 30%;
+    text-align: center;
+}
+
+div.content table {
+    border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
+    margin-left: auto;
+    margin-right:auto;
+}
+
+div.content table tr.table_header {
+    font-family: 'RobotoBold';
+    text-align: center;
+}
+
+div.content table td {
+    border: 1px solid black;
+    padding: 5px;
+}
+
+div.content table td img {
+    vertical-align: middle;
+}
+
+div.retour {
+    text-align: center;
+    margin-top: 30px;
+    font-size: 1.5em;
+}
+
+div.tags {
+    text-align: justify;
+}
+
+div.header {
+	margin:auto;
+	width:800px;
+	text-align:center
+}
diff --git a/index.php b/index.php
index 6a14f29659851811eeb6b1feabc328f825919919..fda78a89abed63073da3898cd83fa7350ed02590 100644
--- a/index.php
+++ b/index.php
@@ -3,21 +3,64 @@ require 'Slim/Slim.php';
 
 \Slim\Slim::registerAutoloader();
 $app = new \Slim\Slim();
-
+$bdd = new PDO('mysql:host=mysql.iiens.net;dbname=assoce_nightiies', 'assoce_nightiies', 'VwuQREP5JwJQTF5h', array(
+		PDO::ATTR_ERRMODE => PDO::ERRMODE_WARNING));
 $samPics = array('sam1.jpg', 'sam2.jpg', 'sam3.jpg');
 
 $app->get(
     '/',
     function () {
 		global $samPics;
+		global $bdd;
+
 		$sam = $samPics[array_rand($samPics)];
 
+		$events = $bdd->prepare('SELECT id, title, date, place, description
+			FROM sam
+			ORDER BY date');
+		$events->execute();
+
 		echo <<<EOF
 <html>
+	<head>
+		<link rel="stylesheet" type="text/css" href="/links/common.css">
+	</head>
 	<body>
-		<div style="margin:auto; width:800px; text-align:center">
+		<div class="header">
 			<img src="assets/sam/$sam" style="margin:auto">
 		</div>
+		<div class="content">
+			<table class="calendar">
+				<thead>
+					<tr>
+						<th>id</th>
+						<th>Date</th>
+						<th>Titre</th>
+						<th>Description</th>
+						<th>Salle</th>
+					</tr>
+				</thead>
+				<tbody>
+EOF;
+
+		while ($event = $events->fetch()) {
+			$date = date('d/m/y', $event[2]);
+			$description = preg_replace("#(^|[\n ])(http://[\w\#$%&~/.\-;:=,?@\[\]+]+)#is", "\\1<a href=\"\\2\" target=\"_blank\">\\2</a>", $event[4]);
+			echo <<<EOF
+					<tr>
+						<td>$event[0]</td>
+						<td>$date</td>
+						<td>$event[1]</td>
+						<td>$description</td>
+						<td>$event[3]</td>
+					</tr>
+EOF;
+		}
+
+		echo <<<EOF
+				</tbody>
+			</table>
+		</div>
 	</body>
 </html>
 EOF;