diff --git a/index.css b/index.css
index 5601a7d..9c9b8a4 100755
--- a/index.css
+++ b/index.css
@@ -56,23 +56,23 @@ nav .onglet:hover
 
 #hamburgerMenu
 {
-	background-color:#fff;
-	height:100%;
+    background-color:#fff;
+    height:100%;
 }
 
 #hamburgerMenu h2
 {
-	font-size:22px;
-	color:#2b2b2b;
-	margin-left:5%;
-	margin-top:5%;
+    font-size:22px;
+    color:#2b2b2b;
+    margin-left:5%;
+    margin-top:5%;
 }
 
 form
 {
-	margin-top:-20px;
-	margin-left:20%;
-	margin-bottom:-20px;
+    margin-top:-20px;
+    margin-left:20%;
+    margin-bottom:-20px;
 }
 
 input[type="checkbox"] {
@@ -93,47 +93,47 @@ input[type="checkbox"]:checked + label span {
 
 #AddEvent
 {
-	margin:0;
-	margin-top:45px;
-	text-align:center;
-	font-size: 20px;
-	padding-top:15px;
-	height: 40px;
-	width: 100%;
-	position:absolute;
-	color: #ffffff;
-	background-color: #2b2b2b;
+    margin:0;
+    margin-top:45px;
+    text-align:center;
+    font-size: 20px;
+    padding-top:15px;
+    height: 40px;
+    width: 100%;
+    position:absolute;
+    color: #ffffff;
+    background-color: #2b2b2b;
 }
 
 #container
 {
-	margin-top:120px;
+    margin-top:120px;
 }
 
 #AddEvent:hover
 {
-	color: #2b2b2b;
-	background-color: #40c1e6;
+    color: #2b2b2b;
+    background-color: #40c1e6;
 }
 
 #calendar
 {
-	height:100%;
-	margin:0;
-	margin-left:-10px;
-	background-color:#f1f1f1;
+    height:100%;
+    margin:0;
+    margin-left:-10px;
+    background-color:#f1f1f1;
 }
 
 #footer
 {
-	position:fixed;
-	background-color:#f1f1f1;
-	bottom:0px;
-	height:54px;
-	color:#2b2b2B;
-	margin:0;
-	width:100%;
-	border:1px solid #2b2b2b;
+    position:fixed;
+    background-color:#f1f1f1;
+    bottom:0px;
+    height:54px;
+    color:#2b2b2B;
+    margin:0;
+    width:100%;
+    border:1px solid #2b2b2b;
 }
 
 #Export
@@ -145,18 +145,18 @@ input[type="checkbox"]:checked + label span {
 
 #exMois
 {
-	margin-top:-10px;
-	height:30px;
-	width:30%;
-	margin-left:auto;
-	margin-right:auto;
+    margin-top:-10px;
+    height:30px;
+    width:30%;
+    margin-left:auto;
+    margin-right:auto;
 }
 
 #Mois
 {
-	text-align:center;
-	font-size: 30px;
-	margin-top:-45px;
+    text-align:center;
+    font-size: 30px;
+    margin-top:-45px;
 }
 
 #exLess
@@ -176,54 +176,55 @@ input[type="checkbox"]:checked + label span {
 
 
 /*Calendar*/
-table
-{
-  width:100%;
-  margin:0;
-  padding:0;
-  border-style:none;
-  table-layout: fixed;
+#calendar {
+    margin-top:60px;
 }
 
-tr
-{
-  height:250px;
-  border-style:none;
-  margin:0;
-  width:100%;
-  padding:0;
+#calendar .week {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+
+  -webkit-flex-flow: row wrap;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
-td
-{
-  border-style:none;
-  height:100%;
+#calendar .week .day {
+  padding: 5px;
+  width: 200px;
+  height: 200px;
   margin:0;
   padding:0;
+
+  border:1px solid #2b2b2b;
 }
 
-td:hover
-{
-    background-color: #40c1e6;
+#calendar .week .today {
+    background-color: #a5dff0;
 }
 
-tr #date
-{
-  font-size:30px;
-  margin:20px;
-  color:#2b2b2b;
+#calendar .week .day:hover {
+    background-color: #65ccea;
 }
 
-#calendar #event
-{
-  margin:0;
-  border:1px solid #2b2b2b;
-  height:100%;
-  width:100%;
+#calendar .week .day h2 {
+    font-size: 30px;
+    margin: 20px;
+    color: #2B2B2B;
 }
 
-#link
-{
-  margin-left:10px;
-  font-size:12px;
+#calendar .week .otherMonth h2 {
+    color: #4B4B4B;
+}
+
+#calendar .week .day ul {
+    margin-left: -20px;
+    font-size:12px;
 }
diff --git a/index.html b/index.html
index 877d7dc..ad2b457 100755
--- a/index.html
+++ b/index.html
@@ -32,41 +32,41 @@
             </div></a>
             <div id="container">
                 <h2>Conférences, Évènements</h2>
-                	<form name="confs" action="" method="POST">
-									<div align="left"><br>
-											<input type="checkbox" id="c1" name="cc" />
-											<label for="c1"><span></span>Biomédical</label><br>
-											<input type="checkbox" id="c2" name="cc" />
-											<label for="c2"><span></span>Domotique</label><br>
-											<input type="checkbox" id="c3" name="cc" />
-											<label for="c3"><span></span>Informatique</label><br>
-											<input type="checkbox" id="c4" name="cc" />
-											<label for="c4"><span></span>Matériaux</label><br>
-											<input type="checkbox" id="c5" name="cc" />
-											<label for="c5"><span></span>Télécommunication</label><br>
-											<input type="checkbox" id="c6" name="cc" />
-											<label for="c6"><span></span>Divers</label><br>
-										<br>
-									</div>
-									</form>
+                    <form name="confs" action="" method="POST">
+                                    <div align="left"><br>
+                                            <input type="checkbox" id="c1" name="cc" />
+                                            <label for="c1"><span></span>Biomédical</label><br>
+                                            <input type="checkbox" id="c2" name="cc" />
+                                            <label for="c2"><span></span>Domotique</label><br>
+                                            <input type="checkbox" id="c3" name="cc" />
+                                            <label for="c3"><span></span>Informatique</label><br>
+                                            <input type="checkbox" id="c4" name="cc" />
+                                            <label for="c4"><span></span>Matériaux</label><br>
+                                            <input type="checkbox" id="c5" name="cc" />
+                                            <label for="c5"><span></span>Télécommunication</label><br>
+                                            <input type="checkbox" id="c6" name="cc" />
+                                            <label for="c6"><span></span>Divers</label><br>
+                                        <br>
+                                    </div>
+                                    </form>
                 <h2>Clubs, associations</h2>
                 <form name="confs" action="" method="POST">
-									<div align="left"><br>
-											<input type="checkbox" id="c7" name="cc" />
-											<label for="c7"><span></span>Club Framboise</label><br>
-											<input type="checkbox" id="c8" name="cc" />
-											<label for="c8"><span></span>ESIRDuino</label><br>
-											<input type="checkbox" id="c9" name="cc" />
-											<label for="c9"><span></span>Club Tricot</label><br>
-											<input type="checkbox" id="c10" name="cc" />
-											<label for="c10"><span></span>Club Miam</label><br>
-											<input type="checkbox" id="c11" name="cc" />
-											<label for="c11"><span></span>Les lapins noirs</label><br>
-											<input type="checkbox" id="c12" name="cc" />
-											<label for="c12"><span></span>Club rigolo</label><br>
-										<br>
-									</div>
-									</form>
+                                    <div align="left"><br>
+                                            <input type="checkbox" id="c7" name="cc" />
+                                            <label for="c7"><span></span>Club Framboise</label><br>
+                                            <input type="checkbox" id="c8" name="cc" />
+                                            <label for="c8"><span></span>ESIRDuino</label><br>
+                                            <input type="checkbox" id="c9" name="cc" />
+                                            <label for="c9"><span></span>Club Tricot</label><br>
+                                            <input type="checkbox" id="c10" name="cc" />
+                                            <label for="c10"><span></span>Club Miam</label><br>
+                                            <input type="checkbox" id="c11" name="cc" />
+                                            <label for="c11"><span></span>Les lapins noirs</label><br>
+                                            <input type="checkbox" id="c12" name="cc" />
+                                            <label for="c12"><span></span>Club rigolo</label><br>
+                                        <br>
+                                    </div>
+                                    </form>
             </div>
         </nav>
 
@@ -75,90 +75,90 @@
 
         <div id="calendar">
         <ul class="flex-container">
-						<li class="flex-item"><div id="event"><div id="date">6</div>
-						<div id="link">10h : Conférence - Domotique</div></li>
-						<li class="flex-item"><div id="event"><div id="date">7</div>
-						</li>
-						<li class="flex-item"><div id="event"><div id="date">8</div>
-						</li>
-						<li class="flex-item"><div id="event"><div id="date">9</div>
-						<div id="link">20h : Club tricot</div></li>
-						<li class="flex-item"><div id="event"><div id="date">10</div>
-						<div id="link">21h : Soirée ISATI</div></li>
-						<li class="flex-item"><div id="event"><div id="date">11</div>
-						</li>
-						<li class="flex-item"><div id="event"><div id="date">12</div>
-						<div id="link">8h : Invasion de kakapos</div></li>
-						<li class="flex-item"><div id="event"><div id="date">6</div>
-						<div id="link">10h : Conférence - Sécurité</div>
-						<div id="link">14h : Conférence - Cryptographie</div></li>
-						<li class="flex-item"><div id="event"><div id="date">7</div>
-						</li>
-						<li class="flex-item"><div id="event"><div id="date">8</div>
-						</li>
-						<li class="flex-item"><div id="event"><div id="date">9</div>
-						<div id="link">20h : Club Jeux</div></li>
-						<li class="flex-item"><div id="event"><div id="date">10</div>
-						<div id="link">21h : Soirée ISATI</div></li>
-						<li class="flex-item"><div id="event"><div id="date">11</div>
-						</li>
-						<li class="flex-item"><div id="event"><div id="date">12</div>
-						<div id="link">8h : Invasion de zombies</div></li>
-						<li class="flex-item"><div id="event"><div id="date">6</div>
-						<div id="link">10h : Conférence - Compilation</div></li>
-						<li class="flex-item"><div id="event"><div id="date">7</div>
-						</li>
-						<li class="flex-item"><div id="event"><div id="date">8</div>
-						</li>
-						<li class="flex-item"><div id="event"><div id="date">9</div>
-						<div id="link">20h : Club robotique</div></li>
-						<li class="flex-item"><div id="event"><div id="date">10</div>
-						<div id="link">21h : Soirée ISATI</div></li>
-						<li class="flex-item"><div id="event"><div id="date">11</div>
-						</li>
-						<li class="flex-item"><div id="event"><div id="date">12</div>
-						<div id="link">8h : Invasion de bananes</div></li>
-						<li class="flex-item"><div id="event"><div id="date">6</div>
-						<div id="link">10h : Conférence - Imagerie numérique</div></li>
-						<li class="flex-item"><div id="event"><div id="date">7</div>
-						</li>
-						<li class="flex-item"><div id="event"><div id="date">8</div>
-						</li>
-						<li class="flex-item"><div id="event"><div id="date">9</div>
-						<div id="link">20h : Club tarot</div></li>
-						<li class="flex-item"><div id="event"><div id="date">10</div>
-						<div id="link">21h : Soirée ISATI</div></li>
-						<li class="flex-item"><div id="event"><div id="date">11</div>
-						</li>
-						<li class="flex-item"><div id="event"><div id="date">12</div>
-						<div id="link">8h : Invasion de kakapos</div></li>
-						<li class="flex-item"><div id="event"><div id="date">6</div>
-						<div id="link">10h : Conférence - Communication</div></li>
-						<li class="flex-item"><div id="event"><div id="date">7</div>
-						</li>
-						<li class="flex-item"><div id="event"><div id="date">8</div>
-						</li>
-						<li class="flex-item"><div id="event"><div id="date">9</div>
-						<div id="link">20h : Club Saucisson</div></li>
-						<li class="flex-item"><div id="event"><div id="date">10</div>
-						<div id="link">21h : Soirée ISATI</div></li>
-						<li class="flex-item"><div id="event"><div id="date">11</div>
-						</li>
-						<li class="flex-item"><div id="event"><div id="date">12</div>
-						<div id="link">8h : Invasion de nuages</div></li>
-				</ul>
+                        <li class="flex-item"><div id="event"><div id="date">6</div>
+                        <div id="link">10h : Conférence - Domotique</div></li>
+                        <li class="flex-item"><div id="event"><div id="date">7</div>
+                        </li>
+                        <li class="flex-item"><div id="event"><div id="date">8</div>
+                        </li>
+                        <li class="flex-item"><div id="event"><div id="date">9</div>
+                        <div id="link">20h : Club tricot</div></li>
+                        <li class="flex-item"><div id="event"><div id="date">10</div>
+                        <div id="link">21h : Soirée ISATI</div></li>
+                        <li class="flex-item"><div id="event"><div id="date">11</div>
+                        </li>
+                        <li class="flex-item"><div id="event"><div id="date">12</div>
+                        <div id="link">8h : Invasion de kakapos</div></li>
+                        <li class="flex-item"><div id="event"><div id="date">6</div>
+                        <div id="link">10h : Conférence - Sécurité</div>
+                        <div id="link">14h : Conférence - Cryptographie</div></li>
+                        <li class="flex-item"><div id="event"><div id="date">7</div>
+                        </li>
+                        <li class="flex-item"><div id="event"><div id="date">8</div>
+                        </li>
+                        <li class="flex-item"><div id="event"><div id="date">9</div>
+                        <div id="link">20h : Club Jeux</div></li>
+                        <li class="flex-item"><div id="event"><div id="date">10</div>
+                        <div id="link">21h : Soirée ISATI</div></li>
+                        <li class="flex-item"><div id="event"><div id="date">11</div>
+                        </li>
+                        <li class="flex-item"><div id="event"><div id="date">12</div>
+                        <div id="link">8h : Invasion de zombies</div></li>
+                        <li class="flex-item"><div id="event"><div id="date">6</div>
+                        <div id="link">10h : Conférence - Compilation</div></li>
+                        <li class="flex-item"><div id="event"><div id="date">7</div>
+                        </li>
+                        <li class="flex-item"><div id="event"><div id="date">8</div>
+                        </li>
+                        <li class="flex-item"><div id="event"><div id="date">9</div>
+                        <div id="link">20h : Club robotique</div></li>
+                        <li class="flex-item"><div id="event"><div id="date">10</div>
+                        <div id="link">21h : Soirée ISATI</div></li>
+                        <li class="flex-item"><div id="event"><div id="date">11</div>
+                        </li>
+                        <li class="flex-item"><div id="event"><div id="date">12</div>
+                        <div id="link">8h : Invasion de bananes</div></li>
+                        <li class="flex-item"><div id="event"><div id="date">6</div>
+                        <div id="link">10h : Conférence - Imagerie numérique</div></li>
+                        <li class="flex-item"><div id="event"><div id="date">7</div>
+                        </li>
+                        <li class="flex-item"><div id="event"><div id="date">8</div>
+                        </li>
+                        <li class="flex-item"><div id="event"><div id="date">9</div>
+                        <div id="link">20h : Club tarot</div></li>
+                        <li class="flex-item"><div id="event"><div id="date">10</div>
+                        <div id="link">21h : Soirée ISATI</div></li>
+                        <li class="flex-item"><div id="event"><div id="date">11</div>
+                        </li>
+                        <li class="flex-item"><div id="event"><div id="date">12</div>
+                        <div id="link">8h : Invasion de kakapos</div></li>
+                        <li class="flex-item"><div id="event"><div id="date">6</div>
+                        <div id="link">10h : Conférence - Communication</div></li>
+                        <li class="flex-item"><div id="event"><div id="date">7</div>
+                        </li>
+                        <li class="flex-item"><div id="event"><div id="date">8</div>
+                        </li>
+                        <li class="flex-item"><div id="event"><div id="date">9</div>
+                        <div id="link">20h : Club Saucisson</div></li>
+                        <li class="flex-item"><div id="event"><div id="date">10</div>
+                        <div id="link">21h : Soirée ISATI</div></li>
+                        <li class="flex-item"><div id="event"><div id="date">11</div>
+                        </li>
+                        <li class="flex-item"><div id="event"><div id="date">12</div>
+                        <div id="link">8h : Invasion de nuages</div></li>
+                </ul>
 
 
-		      <div id="footer">
-							<div id="TextFooter">
-							<div id="exMois">
-								<a id="ancherMore" href="#More" onclick="alert('Click on More');"><img id="exMore" alt="expand less" src="images/expand_less.png" /></a>
-								<div id="Mois">Mars 2015</div>
-								<a id="ancherLess" href="#Less" onclick="alert('Click on Less');"><img id="exLess" alt="expand more" src="images/expand_more.png" /></a>
-							</div>
-						  <div id="Export">Exporter en <a href="#RSS">RSS</a>, <a href="#iCal">iCal</a>, <a href="#webCal">WebCal</a></div>
-						  </div>
-		      <div>
+              <div id="footer">
+                            <div id="TextFooter">
+                            <div id="exMois">
+                                <a id="ancherMore" href="#More" onclick="alert('Click on More');"><img id="exMore" alt="expand less" src="images/expand_less.png" /></a>
+                                <div id="Mois">Mars 2015</div>
+                                <a id="ancherLess" href="#Less" onclick="alert('Click on Less');"><img id="exLess" alt="expand more" src="images/expand_more.png" /></a>
+                            </div>
+                          <div id="Export">Exporter en <a href="#RSS">RSS</a>, <a href="#iCal">iCal</a>, <a href="#webCal">WebCal</a></div>
+                          </div>
+              <div>
         </div>
         <script src="hamburger.js"></script>
     </body>
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..60e75b1
--- /dev/null
+++ b/index.php
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Kiwi Calendar</title>
+        <meta charset="utf-8" />
+        <link rel="stylesheet" href="./index.css" />
+        <link rel="stylesheet" href="./main.css" />
+        <link rel="icon" type="image/png" href="favicon.png" />
+        <!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /><![endif]-->
+    </head>
+    <body>
+        <header id="title">
+            <a id="hamburgerButton" href="#"><img alt="menu" src="./images/menu.png" /></a>
+            <img alt="logo ESIR" src="./images/esir.png" />
+            <img class="rightLogo" alt="logo Kiwi" src="./images/KiWiCalendar.png" />
+        </header>
+
+
+        <nav id="hamburgerMenu">
+        <a id="ancherESIR" href="#ESIR" onclick="alert('Click on ESIR');">
+            <div class="onglet" id="onglet-esir">
+                Esir
+            </div>
+         </a>
+         <a id="ancherRennes" href="#Rennes" onclick="alert('Click on Rennes');">
+            <div class="onglet" id="onglet-ext">
+                Rennes
+            </div>
+         </a>
+            <a id="ancherEvent" href="#addEvent" onclick="alert('Ajoute un evenement');"><div class="Button" id="AddEvent">
+                + Ajouter un Évènement
+            </div></a>
+            <div id="container">
+                <h2>Conférences, Évènements</h2>
+                    <form name="confs" action="" method="POST">
+                                    <div align="left"><br>
+                                            <input type="checkbox" id="c1" name="cc" />
+                                            <label for="c1"><span></span>Biomédical</label><br>
+                                            <input type="checkbox" id="c2" name="cc" />
+                                            <label for="c2"><span></span>Domotique</label><br>
+                                            <input type="checkbox" id="c3" name="cc" />
+                                            <label for="c3"><span></span>Informatique</label><br>
+                                            <input type="checkbox" id="c4" name="cc" />
+                                            <label for="c4"><span></span>Matériaux</label><br>
+                                            <input type="checkbox" id="c5" name="cc" />
+                                            <label for="c5"><span></span>Télécommunication</label><br>
+                                            <input type="checkbox" id="c6" name="cc" />
+                                            <label for="c6"><span></span>Divers</label><br>
+                                        <br>
+                                    </div>
+                                    </form>
+                <h2>Clubs, associations</h2>
+                <form name="confs" action="" method="POST">
+                                    <div align="left"><br>
+                                            <input type="checkbox" id="c7" name="cc" />
+                                            <label for="c7"><span></span>Club Framboise</label><br>
+                                            <input type="checkbox" id="c8" name="cc" />
+                                            <label for="c8"><span></span>ESIRDuino</label><br>
+                                            <input type="checkbox" id="c9" name="cc" />
+                                            <label for="c9"><span></span>Club Tricot</label><br>
+                                            <input type="checkbox" id="c10" name="cc" />
+                                            <label for="c10"><span></span>Club Miam</label><br>
+                                            <input type="checkbox" id="c11" name="cc" />
+                                            <label for="c11"><span></span>Les lapins noirs</label><br>
+                                            <input type="checkbox" id="c12" name="cc" />
+                                            <label for="c12"><span></span>Club rigolo</label><br>
+                                        <br>
+                                    </div>
+                                    </form>
+            </div>
+        </nav>
+
+
+
+
+        <div id="calendar">
+    <?php
+        for($week = 0; $week < 5; ++$week)
+        {
+            echo('
+            <ul class="week">');
+            for($date = strtotime('last monday +'.$week.' weeks'); $date < strtotime('next monday +'.$week.' weeks'); $date = strtotime('+1 day', $date))
+            {
+                $class = '';
+                if(date('m', $date) != date('m'))
+                    $class .= ' otherMonth';
+
+                if(date('Y-m-d', $date) == date('Y-m-d'))
+                    $class .= ' today';
+
+                echo('
+                <li class="day'.$class.'">
+                    <h2>'.date("d", $date).'</h2>
+                    <ul>
+                        <li class="calendar-link">10h : Conférence - Domotique</li>
+                    </ul>
+                </li>');
+            }
+            echo('
+            </ul>'."\n");
+        }
+    ?>
+
+              <div id="footer">
+                            <div id="TextFooter">
+                            <div id="exMois">
+                                <a id="ancherMore" href="#More" onclick="alert('Click on More');"><img id="exMore" alt="expand less" src="images/expand_less.png" /></a>
+                                <div id="Mois">Mars 2015</div>
+                                <a id="ancherLess" href="#Less" onclick="alert('Click on Less');"><img id="exLess" alt="expand more" src="images/expand_more.png" /></a>
+                            </div>
+                          <div id="Export">Exporter en <a href="#RSS">RSS</a>, <a href="#iCal">iCal</a>, <a href="#webCal">WebCal</a></div>
+                          </div>
+              <div>
+        </div>
+        <script src="hamburger.js"></script>
+    </body>
+</html>
diff --git a/main.css b/main.css
index 96441c8..3929601 100755
--- a/main.css
+++ b/main.css
@@ -19,67 +19,22 @@ body, html {
 
 a
 {
-	color:#5fd0f1;
-	text-decoration:none;
+    color:#5fd0f1;
+    text-decoration:none;
 }
 
 #title img
 {
-	padding-top:10px;
-	height: 50px;
+    padding-top:10px;
+    height: 50px;
 }
 
 #title .rightLogo
 {
-	float:right;
-	margin-right:25px;
-}
-
-.flex-container {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  
-  -webkit-flex-flow: row wrap;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-.flex-item {
-  padding: 5px;
-  width: 200px;
-  height: 200px;
-  margin:0;
-  padding:0;
-}
-
-#date {
-    font-size: 30px;
-    margin: 20px;
-    color: #2B2B2B;
+    float:right;
+    margin-right:25px;
 }
 
-#link {
-    margin-left: 10px;
-    font-size: 12px;
-}
-
-#calendar #event:hover {
-    background-color: #65ccea;
-}
-
-#calendar {
-    margin-top:60px;
-}
-
-
-
 @media only screen and (max-width: 1000px) and (max-height: 500px){
 
 #title
@@ -89,8 +44,8 @@ a
 
 #title img
 {
-	padding-top:10px;
-	height: 30px;
+    padding-top:10px;
+    height: 30px;
 }
 
 }