diff --git a/index.css b/index.css
index c65ea37..6f2da1d 100644
--- a/index.css
+++ b/index.css
@@ -1,6 +1,7 @@
 body
 {
-    padding:0px;
+    padding:0px;    
+    overflow:hidden;
 }
 
 #title
@@ -143,11 +144,12 @@ input[type="checkbox"]:checked + label span {
 	height:100%;
 	margin:0;
 	margin-left:-10px;
+	background-color:#f1f1f1;
 }
 
 #footer
 {
-	position:absolute;
+	position:fixed;
 	background-color:#f1f1f1;
 	bottom:0px;
 	height:54px;
@@ -163,12 +165,387 @@ input[type="checkbox"]:checked + label span {
   margin-right:25px;
 }
 
+#exMois
+{
+	margin-bottom:-10px;
+	margin-top:-10px;
+	height:30px;
+	width:30%;
+	margin-left:auto;
+	margin-right:auto;
+}
+
 #Mois
 {
 	text-align:center;
-	margin-top:10px;
 	font-size: 30px;
 	margin-bottom:-30px;
 }
 
+#exLess
+{
+  width:40px;
+  height:40px;
+  margin-top:-5px;
+  margin-left:290px;
+}
+
+#exMore
+{
+  width:40px;
+  height:40px;
+	margin-bottom:-45px;
+	margin-left:80px;
+}
+
+
+/*Calendar*/
+table
+{
+  width:100%;
+  margin:0;
+  padding:0;
+  border-style:none;
+  table-layout: fixed;
+}
+
+tr
+{
+  height:250px;  
+  border-style:none;
+  margin:0;
+  width:100%;
+  padding:0;
+}
+
+td
+{
+  border-style:none;
+  height:100%;
+  margin:0;
+  padding:0;
+}
+
+td:hover
+{
+    background-color: #40c1e6;
+}
+
+tr #date
+{
+  font-size:30px;
+  margin:20px;
+  color:#2b2b2b;
+}
+
+#calendar #event
+{
+  margin:0;
+  border:1px solid #2b2b2b;
+  height:100%;
+  width:100%;
+}
 
+#link
+{
+  margin-left:10px;
+  font-size:12px;
+}
+
+
+
+/*BURGER BUTTON*/
+.items {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+  margin-bottom: 24px;
+}
+
+.item {
+  margin: 12px;
+}
+
+/* =============================================================================
+  MENU TOGGLE SWITCHES
+============================================================================= */
+/**
+ * Toggle Switch Globals
+ *
+ * All switches should take on the class `cmn-toggle-switch` as well as their
+ * variant that will give them unique properties. This class is an overview
+ * class that acts as a reset for all versions of the icon.
+ */
+.cmn-toggle-switch {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+  width: 108px;
+  height: 96px;
+  font-size: 0;
+  text-indent: -9999px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  box-shadow: none;
+  border-radius: none;
+  border: none;
+  cursor: pointer;
+  -webkit-transition: background 0.3s;
+          transition: background 0.3s;
+}
+
+.cmn-toggle-switch:focus {
+  outline: none;
+}
+
+.cmn-toggle-switch span {
+  display: block;
+  position: absolute;
+  top: 45px;
+  left: 18px;
+  right: 18px;
+  height: 6px;
+  background: white;
+}
+
+.cmn-toggle-switch span::before,
+.cmn-toggle-switch span::after {
+  position: absolute;
+  display: block;
+  left: 0;
+  width: 100%;
+  height: 6px;
+  background-color: #fff;
+  content: "";
+}
+
+.cmn-toggle-switch span::before {
+  top: -27px;
+}
+
+.cmn-toggle-switch span::after {
+  bottom: -27px;
+}
+
+/**
+ * Style 1
+ *
+ * Rotating hamburger icon (rot), that simply rotates 90 degrees when activated.
+ * Nothing too fancy, simple transition.
+ */
+.cmn-toggle-switch__rot {
+  background-color: #28aadc;
+}
+
+.cmn-toggle-switch__rot span {
+  -webkit-transition: -webkit-transform 0.3s;
+          transition: transform 0.3s;
+}
+
+/* active state, i.e. menu open */
+.cmn-toggle-switch__rot.active {
+  background-color: #166888;
+}
+
+.cmn-toggle-switch__rot.active span {
+  -webkit-transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+
+/**
+ * Style 2
+ * 
+ * Hamburger to "x" (htx). Takes on a hamburger shape, bars slide
+ * down to center and transform into an "x".
+ */
+.cmn-toggle-switch__htx {
+  background-color: #ff3264;
+}
+
+.cmn-toggle-switch__htx span {
+  -webkit-transition: background 0 0.3s;
+          transition: background 0 0.3s;
+}
+
+.cmn-toggle-switch__htx span::before,
+.cmn-toggle-switch__htx span::after {
+  -webkit-transition-duration: 0.3s, 0.3s;
+          transition-duration: 0.3s, 0.3s;
+  -webkit-transition-delay: 0.3s, 0;
+          transition-delay: 0.3s, 0;
+}
+
+.cmn-toggle-switch__htx span::before {
+  -webkit-transition-property: top, -webkit-transform;
+          transition-property: top, transform;
+}
+
+.cmn-toggle-switch__htx span::after {
+  -webkit-transition-property: bottom, -webkit-transform;
+          transition-property: bottom, transform;
+}
+
+/* active state, i.e. menu open */
+.cmn-toggle-switch__htx.active {
+  background-color: #cb0032;
+}
+
+.cmn-toggle-switch__htx.active span {
+  background: none;
+}
+
+.cmn-toggle-switch__htx.active span::before {
+  top: 0;
+  -webkit-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+          transform: rotate(45deg);
+}
+
+.cmn-toggle-switch__htx.active span::after {
+  bottom: 0;
+  -webkit-transform: rotate(-45deg);
+      -ms-transform: rotate(-45deg);
+          transform: rotate(-45deg);
+}
+
+.cmn-toggle-switch__htx.active span::before,
+.cmn-toggle-switch__htx.active span::after {
+  -webkit-transition-delay: 0, 0.3s;
+          transition-delay: 0, 0.3s;
+}
+
+/**
+ * Style 3
+ *
+ * Hamburger to left-arrow (htla). Hamburger menu transforms to a left-pointing
+ * arrow. Usually indicates an off canvas menu sliding in from left that
+ * will be close on re-click of the icon.
+ */
+.cmn-toggle-switch__htla {
+  background-color: #32dc64;
+}
+
+.cmn-toggle-switch__htla span {
+  -webkit-transition: -webkit-transform 0.3s;
+          transition: transform 0.3s;
+}
+
+.cmn-toggle-switch__htla span::before {
+  -webkit-transform-origin: top right;
+      -ms-transform-origin: top right;
+          transform-origin: top right;
+  -webkit-transition: -webkit-transform 0.3s, width 0.3s, top 0.3s;
+          transition: transform 0.3s, width 0.3s, top 0.3s;
+}
+
+.cmn-toggle-switch__htla span::after {
+  -webkit-transform-origin: bottom right;
+      -ms-transform-origin: bottom right;
+          transform-origin: bottom right;
+  -webkit-transition: -webkit-transform 0.3s, width 0.3s, bottom 0.3s;
+          transition: transform 0.3s, width 0.3s, bottom 0.3s;
+}
+
+/* active state, i.e. menu open */
+.cmn-toggle-switch__htla.active {
+  background-color: #18903c;
+}
+
+.cmn-toggle-switch__htla.active span {
+  -webkit-transform: rotate(180deg);
+      -ms-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+
+.cmn-toggle-switch__htla.active span::before,
+.cmn-toggle-switch__htla.active span::after {
+  width: 50%;
+}
+
+.cmn-toggle-switch__htla.active span::before {
+  top: 0;
+  -webkit-transform: translateX(42px) translateY(3px) rotate(45deg);
+      -ms-transform: translateX(42px) translateY(3px) rotate(45deg);
+          transform: translateX(42px) translateY(3px) rotate(45deg);
+}
+
+.cmn-toggle-switch__htla.active span::after {
+  bottom: 0;
+  -webkit-transform: translateX(42px) translateY(-3px) rotate(-45deg);
+      -ms-transform: translateX(42px) translateY(-3px) rotate(-45deg);
+          transform: translateX(42px) translateY(-3px) rotate(-45deg);
+}
+
+/**
+ * Style 4
+ *
+ * Hamburger to right-arrow (htra). Hamburger menu transforms to a
+ * right-pointing arrow. Usually indicates an off canvas menu sliding in from 
+ * right that will be close on re-click of the icon.
+ */
+.cmn-toggle-switch__htra {
+  background-color: #ff9650;
+}
+
+.cmn-toggle-switch__htra span {
+  -webkit-transition: -webkit-transform 0.3s;
+          transition: transform 0.3s;
+}
+
+.cmn-toggle-switch__htra span::before {
+  -webkit-transform-origin: top left;
+      -ms-transform-origin: top left;
+          transform-origin: top left;
+  -webkit-transition: -webkit-transform 0.3s, width 0.3s, top 0.3s;
+          transition: transform 0.3s, width 0.3s, top 0.3s;
+}
+
+.cmn-toggle-switch__htra span::after {
+  -webkit-transform-origin: bottom left;
+      -ms-transform-origin: bottom left;
+          transform-origin: bottom left;
+  -webkit-transition: -webkit-transform 0.3s, width 0.3s, bottom 0.3s;
+          transition: transform 0.3s, width 0.3s, bottom 0.3s;
+}
+
+/* active state, i.e. menu open */
+.cmn-toggle-switch__htra.active {
+  background-color: #e95d00;
+}
+
+.cmn-toggle-switch__htra.active span {
+  -webkit-transform: rotate(180deg);
+      -ms-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+
+.cmn-toggle-switch__htra.active span::before,
+.cmn-toggle-switch__htra.active span::after {
+  width: 50%;
+}
+
+.cmn-toggle-switch__htra.active span::before {
+  top: 0;
+  -webkit-transform: translateX(-6px) translateY(3px) rotate(-45deg);
+      -ms-transform: translateX(-6px) translateY(3px) rotate(-45deg);
+          transform: translateX(-6px) translateY(3px) rotate(-45deg);
+}
+
+.cmn-toggle-switch__htra.active span::after {
+  bottom: 0;
+  -webkit-transform: translateX(-6px) translateY(-3px) rotate(45deg);
+      -ms-transform: translateX(-6px) translateY(-3px) rotate(45deg);
+          transform: translateX(-6px) translateY(-3px) rotate(45deg);
+}
diff --git a/index.html b/index.html
index 98fc314..6a75bb2 100644
--- a/index.html
+++ b/index.html
@@ -6,13 +6,6 @@
         <link rel="stylesheet" href="./index.css" />
         <link rel="icon" type="image/png" href="favicon.png" />
         <!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /><![endif]-->
-        
-        <!--Using jQuery and jQuery UI for display effects-->
-				<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
-				<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
-		 
-				<!--Using the hamburger menu display code-->
-				<script src="js/hamburger.js"></script>
     </head>
     <body>
         <header id="title">
@@ -74,10 +67,110 @@
                 + Ajouter un Évènement
             </div>
         </nav>
+
+        <div class="items">
+        <div class="item">
+          <button class="cmn-toggle-switch cmn-toggle-switch__rot">
+            <span>toggle menu</span>
+          </button>
+        </div>
+      </div>
+
+
+
+
         <div id="calendar">
+        <table border="1">
+					<tr>
+						<td><div id="event"><div id="date">6</div>
+						<div id="link">Conférence - Sécurité</div></td>
+						<td><div id="event"><div id="date">7</div>
+						</td>
+						<td><div id="event"><div id="date">8</div>
+						</td>
+						<td><div id="event"><div id="date">9</div>
+						<div id="link">Club tricot</div></td>
+						<td><div id="event"><div id="date">10</div>
+						<div id="link">Grosse soirée</div></td>
+						<td><div id="event"><div id="date">11</div>
+						</td>
+						<td><div id="event"><div id="date">12</div>
+						<div id="link">Invasion de kakapos</div></td>
+					</tr>
+					<tr>
+						<td><div id="event"><div id="date">6</div>
+						<div id="link">Conférence - Sécurité</div></td>
+						<td><div id="event"><div id="date">7</div>
+						</td>
+						<td><div id="event"><div id="date">8</div>
+						</td>
+						<td><div id="event"><div id="date">9</div>
+						<div id="link">Club tricot</div></td>
+						<td><div id="event"><div id="date">10</div>
+						<div id="link">Grosse soirée</div></td>
+						<td><div id="event"><div id="date">11</div>
+						</td>
+						<td><div id="event"><div id="date">12</div>
+						<div id="link">Invasion de kakapos</div></td>
+					</tr>
+					<tr>
+						<td><div id="event"><div id="date">6</div>
+						<div id="link">Conférence - Sécurité</div></td>
+						<td><div id="event"><div id="date">7</div>
+						</td>
+						<td><div id="event"><div id="date">8</div>
+						</td>
+						<td><div id="event"><div id="date">9</div>
+						<div id="link">Club tricot</div></td>
+						<td><div id="event"><div id="date">10</div>
+						<div id="link">Grosse soirée</div></td>
+						<td><div id="event"><div id="date">11</div>
+						</td>
+						<td><div id="event"><div id="date">12</div>
+						<div id="link">Invasion de kakapos</div></td>
+					</tr>
+					<tr>
+						<td><div id="event"><div id="date">6</div>
+						<div id="link">Conférence - Sécurité</div></td>
+						<td><div id="event"><div id="date">7</div>
+						</td>
+						<td><div id="event"><div id="date">8</div>
+						</td>
+						<td><div id="event"><div id="date">9</div>
+						<div id="link">Club tricot</div></td>
+						<td><div id="event"><div id="date">10</div>
+						<div id="link">Grosse soirée</div></td>
+						<td><div id="event"><div id="date">11</div>
+						</td>
+						<td><div id="event"><div id="date">12</div>
+						<div id="link">Invasion de kakapos</div></td>
+					</tr>
+					<tr>
+						<td><div id="event"><div id="date">6</div>
+						<div id="link">Conférence - Sécurité</div></td>
+						<td><div id="event"><div id="date">7</div>
+						</td>
+						<td><div id="event"><div id="date">8</div>
+						</td>
+						<td><div id="event"><div id="date">9</div>
+						<div id="link">Club tricot</div></td>
+						<td><div id="event"><div id="date">10</div>
+						<div id="link">Grosse soirée</div></td>
+						<td><div id="event"><div id="date">11</div>
+						</td>
+						<td><div id="event"><div id="date">12</div>
+						<div id="link">Invasion de kakapos</div></td>
+					</tr>
+				</table>
+        
+        
 		      <div id="footer">
 							<div id="TextFooter">
-						  <div id="Mois">Mars 2015</div>
+							<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>