diff --git a/static/css/freelancer.css b/static/css/freelancer.css
index 86a18dc..ff8afe1 100644
--- a/static/css/freelancer.css
+++ b/static/css/freelancer.css
@@ -176,7 +176,7 @@ a:hover {
 .navbar-fixed-top .navbar-brand {
 	padding:1%;
 }
-.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
+.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus  {
     color: #1A7AC5;
     background-color: transparent;
 }
diff --git a/templates/index.html b/templates/index.html
index c0192a6..7597f0e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,7 +2,7 @@
 {% load staticfiles %}
 {% block content %}
 <!-- Club Section -->
-    <section id="club" class="success">
+<section id="club" class="success">
         <div class="container">
             <div class="row">
                 <div class="col-lg-12 text-center">
@@ -70,6 +70,9 @@ dont le mandat commun est de promouvoir l’industrie du jeu vidéo</p>
                     <hr class="star-light">
                 </div>
             </div>
+						<br/>
+			<br/>			<br/>
+			<br/>
 			 <div class="row">
                 <div class="col-sm-3">
                     <img src="{% static 'img/jams/globalgamejam.PNG' %}" class="hidden-xs img-responsive imgJams"  alt="">
@@ -97,8 +100,62 @@ dont le mandat commun est de promouvoir l’industrie du jeu vidéo</p>
 					<p class="visible-xs">Asylum Jam</p>
                 </div>
 		</div>
-			
+
 		</div>
+    </section>
+	    <!-- Contact Section -->
+    <section id="contact">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-12 text-center">
+                    <h2>Nous Rejoindre</h2>
+                    <hr class="star-primary">
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-8 col-lg-offset-2">
+                    <!-- To configure the contact form email address, go to mail/contact_me.php and update the email address in the PHP file on line 19. -->
+                    <!-- The form should work on most web servers, but if the form is not working you may need to configure your web server differently. -->
+                    <form name="sentMessage" id="contactForm" novalidate>
+                        <div class="row control-group">
+                            <div class="form-group col-xs-12 floating-label-form-group controls">
+                                <label>Nom</label>
+                                <input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Veuillez fournir un nom.">
+                                <p class="help-block text-danger"></p>
+                            </div>
+                        </div>
+                        <div class="row control-group">
+                            <div class="form-group col-xs-12 floating-label-form-group controls">
+                                <label>Adresse couriel</label>
+                                <input type="email" class="form-control" placeholder="Adresse couriel" id="email" required data-validation-required-message="Veuillez fournir une adresse couriel">
+                                <p class="help-block text-danger"></p>
+                            </div>
+                        </div>
+                        <!--div class="row control-group">
+                            <div class="form-group col-xs-12 floating-label-form-group controls">
+                                <label>Numero de telephone</label>
+                                <input type="tel" class="form-control" placeholder="Numero de telephone" id="phone" required data-validation-required-message="Please enter your phone number.">
+                                <p class="help-block text-danger"></p>
+                            </div>
+                        </div-->
+                        <div class="row control-group">
+                            <div class="form-group col-xs-12 floating-label-form-group controls">
+                                <label>Message</label>
+                                <textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Veuillez entrer un message."></textarea>
+                                <p class="help-block text-danger"></p>
+                            </div>
+                        </div>
+                        <br>
+                        <div id="success"></div>
+                        <div class="row">
+                            <div class="form-group col-xs-12">
+                                <button type="submit" class="btn btn-outline btn-lg">Send</button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
     </section>
 
 {% endblock %}
diff --git a/templates/template.html b/templates/template.html
index ee3bb79..f4de91c 100644
--- a/templates/template.html
+++ b/templates/template.html
@@ -21,17 +21,19 @@
     <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
     <link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
   </head>
-  <body id="page-top" class="index">
+  <body id="page-top"  data-spy="scroll" data-target="#menu">
         <!-- Navigation -->
-		<nav class="navbar navbar-default navbar-fixed-top">
+		::before
+		<nav class="navbar navbar-default navbar-fixed-top" id="menu">
         <div class="container">
-            <!-- Brand and toggle get grouped for better mobile display -->
+            <!-- Brand and toggle get grouped for better mobile display-->
             <div class="navbar-header page-scroll">
-                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                     <span class="sr-only">Toggle navigation</span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
+					<span class="icon-bar"></span>
                 </button>
                 <a class="navbar-brand"  href="#page-top"> <img class="logo"/></a>
             </div>
@@ -42,23 +44,20 @@
                     <li class="hidden">
                         <a href="#page-top"></a>
                     </li>
-                  <ul class="nav navbar-nav">
-                <!--li><a href="{% url 'index' %}">Accueil</a></li-->
-				<li><a href="#page-top">acceuil</a></li>
-				<li><a href="#club">Club</a></li>
-				<li><a href="#mtlgj">MTLGJ</a></li>
-				<li><a href="#jams">Jams</a></li>
-                <!--li><a href="{% url 'project:index' %}">Projets</a></li>
-				<li><a href="{% url 'member:index' %}">Membres</a></li-->
+					
+					<li class="page-scroll"><a href="#club">Club</a></li>
+					<li class="page-scroll"><a href="#mtlgj">MTLGJ</a></li>
+					<li class="page-scroll"><a href="#jams">Jams</a></li>
+					<li class="page-scroll"><a href="#contact">Contact</a></li>
               </ul>
                 </ul>
             </div>
-            <!-- /.navbar-collapse -->
+            <!-- /.navbar-collapse-->
         </div>
         <!-- /.container-fluid -->
     </nav>
-	<!--/.navbar -->
 
+	<!--/.navbar -->
     {% block content %}{% endblock %}
 
     <!-- Footer -->
@@ -68,10 +67,10 @@
                 <div class="row">
                     <div class="footer-col col-md-6">
                         <h3>Emplacement</h3>
-                        <p>local A-1744<br><a href="mailto:Conjure@ens.etsmtl.ca">Conjure@ens.etsmtl.ca</a><br>(514) 396-8800 poste: #7713</p>
+                        <p>local A-1744<br>(514) 396-8800 poste: #7713</p>
                     </div>
                     <div class="footer-col col-md-6">
-                        <h3>Nous Contacter</h3>
+                        <h3>Sur le web</h3>
                         <ul class="list-inline">
                             <li>
                                 <a href="https://www.facebook.com/ConjureETS" class="btn-social btn-outline"><i class="fa fa-fw fa-facebook"></i></a>
@@ -83,7 +82,7 @@
                                 <a href="https://twitter.com/conjureets" class="btn-social btn-outline"><i class="fa fa-fw fa-twitter"></i></a>
                             </li>
                             <li>
-                                <a href="mailto:Conjure@ens.etsmtl.ca" class="btn-social btn-outline"><i class="fa fa-fw fa-send"></i></a>
+                                <a href="https://www.linkedin.com/groups/1156197" class="btn-social btn-outline"><i class="fa fa-fw fa-linkedin"></i></a>
                             </li>
                         </ul>
                     </div>
@@ -94,7 +93,7 @@
             <div class="container">
                 <div class="row">
                     <div class="col-lg-12">
-                        Copyright &copy; Conjure 
+                        Copyright &copy; Conjure 2015
                     </div>
                 </div>
             </div>