diff --git a/idp/templates/left-col.html b/idp/templates/left-col.html
index 172fbad..a7aac9b 100644
--- a/idp/templates/left-col.html
+++ b/idp/templates/left-col.html
@@ -57,7 +57,11 @@
 				<ul>
                 {% blurp "services" %}
                     {% for item in menu %}
-                         {% if item.title == "Espace conservatoire" and user.is_authenticated %}
+                        {% if item.title == "Espace famille" and user.is_authenticated %}
+                            <li><a href="{{ item.link }}">{{ item.title }}</a></li>
+                            {% elif item.title == "Espace médiathèque" and user.is_authenticated %}
+                            <li><a href="{{ item.link }}">{{ item.title }}</a></li>
+                            {% elif item.title == "Espace conservatoire" and user.is_authenticated %}
                             <li><a href="{{ conservatoire_url }}Default.aspx">{{ item.title }}</a></li>
                             {% else %}
                             <li><a href="{{ item.link }}">{{ item.title }}</a></li>
diff --git a/portail-citoyen/static/portail_citoyen/css/entrouvert.css b/portail-citoyen/static/portail_citoyen/css/entrouvert.css
index db12e07..3ba7f38 100755
--- a/portail-citoyen/static/portail_citoyen/css/entrouvert.css
+++ b/portail-citoyen/static/portail_citoyen/css/entrouvert.css
@@ -677,3 +677,8 @@ form .submit-button, form .cancel-button, #rub_service form .submit-button, #rub
 #content h2 {
     color: #d91a80;
 }
+
+.cgu {
+    height: 100px;
+    overflow-x: auto;
+}
diff --git a/portail-citoyen/static/portail_citoyen/css/surclass.css b/portail-citoyen/static/portail_citoyen/css/surclass.css
index 974e836..26d673a 100644
--- a/portail-citoyen/static/portail_citoyen/css/surclass.css
+++ b/portail-citoyen/static/portail_citoyen/css/surclass.css
@@ -195,3 +195,163 @@ form, .right {
         padding: 32px 0 50px 25px;*/
         background: url(../img/cont-bg.png) no-repeat 0 5px;
     }
+
+/************************ Page contact *****************************/
+
+div#contact_title {
+    background: url(../img/fond_barre_contact.png) repeat-x;
+    background-position: 0px 5px;
+    margin: 0px 0px 10px 0px;
+    padding: 3px 0px 0px 0px;
+    width: 100%;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+div#contact_title h2{
+    background: url(../img/logo_contact.png) #ffffff no-repeat;
+    background-position: 215px;
+    width: 255px;
+    padding-top: 5px;
+    padding-bottom: 10px;
+    margin-top: 0px;
+    margin-bottom: 0px;
+    border: none;
+}
+
+div.contact_block {
+    width: 50%; 
+    float: left;
+    margin-top: 20px;
+}
+
+div.contact_block div {
+    background: url(../img/contact_defaut.jpg) no-repeat;
+    width: 300px;
+    padding-top: 50px;
+    height: 110px;
+    margin: auto;
+}
+
+#content  div.contact_block div a h3 {
+    color: #545454;
+    text-decoration: none;
+}
+
+#content div.contact_block div a:hover h3 {
+    color: #d91c81;
+    
+}
+
+
+#content  div.contact_block div h3:hover {
+    background: #ffffff;
+    text-decoration: none;
+}
+
+
+#content  div.contact_block div h3 {
+    background: rgba(255, 255, 255, 0.8);
+    height: 40px;
+    width: 100%;
+    padding: 5px 5px 5px 5px;
+    font-weight: normal;
+    font-size: 15px;
+    vertical-align: bottom;
+    text-decoration: none;
+}
+
+div.contact_block div.enfance {
+    background: url(../img/contact_enfance.png) no-repeat;
+}
+
+div.contact_block div.petite_enfance {
+    background: url(../img/contact_petite_enfance.png) no-repeat;
+}
+
+div.contact_block div.contact_technique {
+    background: url(../img/contact_technique.png) no-repeat;
+}
+
+div.contact_block div.contact_elus {
+    background: url(../img/contact_elus.png) no-repeat;
+}
+
+div.contact_block div.contact_AS {
+    background: url(../img/contact_AS.png) no-repeat;
+}
+
+div.contact_block div.contact_affaires_generales {
+    background: url(../img/contact_affaires_generales.png) no-repeat;
+}
+
+
+/************************* catforms ************************/
+
+.catforms > h3:first-child {
+    margin-top: 15px;
+}
+.catforms > ul {
+    display: block;
+    overflow: hidden;
+    width: 100%;
+}
+.catforms > ul > li {
+    display: block;
+    padding: 20px;
+    background: #FFF;
+    margin: 20px auto;
+    margin-bottom: 20px;
+    background-color: #FFF;
+    border: 1px solid rgba(0, 0, 0, 0);
+    border-color: #DDD;
+    border-radius: 4px;
+    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+    margin-bottom: 0;
+    text-align: left;
+    float: left;
+    height: 354px;
+    margin: 0 10px 20px;
+    width: 46%;
+}
+.catforms > ul > li > ul > li:before {
+    content: "\f0da";
+    display: inline-block;
+    font-family: FontAwesome;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    float: left;
+    margin-top: 3px;
+    margin-left: -14px;
+    font-size: 13px;
+    color: #D91A80;
+}
+.catforms a {
+    color: #D91A80;
+}
+.catforms > ul > li ul {
+    padding: 0 0 0 15px;
+}
+.catforms > ul > li > ul > li {
+    padding: 3px 0;
+    line-height: 1.25em;
+}
+.catforms > ul > li > strong {
+    padding-top: 0;
+    font-size: 24px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    margin-bottom: 15px;
+    padding-bottom: 8px;
+    margin-top: 0;
+    text-align: left;
+    font-size: 20px;
+    font-weight: 600;
+    margin-top: -5px;
+    display: block;
+    line-height: 1em;
+}
+.catforms > ul > li > strong a {
+    color: #333;
+}
diff --git a/portail-citoyen/static/portail_citoyen/img/contact_AS.png b/portail-citoyen/static/portail_citoyen/img/contact_AS.png
new file mode 100644
index 0000000..bbfbab3
Binary files /dev/null and b/portail-citoyen/static/portail_citoyen/img/contact_AS.png differ
diff --git a/portail-citoyen/static/portail_citoyen/img/contact_affaires_generales.png b/portail-citoyen/static/portail_citoyen/img/contact_affaires_generales.png
new file mode 100644
index 0000000..0fcdd3f
Binary files /dev/null and b/portail-citoyen/static/portail_citoyen/img/contact_affaires_generales.png differ
diff --git a/portail-citoyen/static/portail_citoyen/img/contact_defaut.jpg b/portail-citoyen/static/portail_citoyen/img/contact_defaut.jpg
new file mode 100644
index 0000000..8ba41df
Binary files /dev/null and b/portail-citoyen/static/portail_citoyen/img/contact_defaut.jpg differ
diff --git a/portail-citoyen/static/portail_citoyen/img/contact_elus.png b/portail-citoyen/static/portail_citoyen/img/contact_elus.png
new file mode 100644
index 0000000..dc5b7d5
Binary files /dev/null and b/portail-citoyen/static/portail_citoyen/img/contact_elus.png differ
diff --git a/portail-citoyen/static/portail_citoyen/img/contact_enfance.png b/portail-citoyen/static/portail_citoyen/img/contact_enfance.png
new file mode 100644
index 0000000..00bb84b
Binary files /dev/null and b/portail-citoyen/static/portail_citoyen/img/contact_enfance.png differ
diff --git a/portail-citoyen/static/portail_citoyen/img/contact_petite_enfance.png b/portail-citoyen/static/portail_citoyen/img/contact_petite_enfance.png
new file mode 100644
index 0000000..a7b0426
Binary files /dev/null and b/portail-citoyen/static/portail_citoyen/img/contact_petite_enfance.png differ
diff --git a/portail-citoyen/static/portail_citoyen/img/contact_technique.png b/portail-citoyen/static/portail_citoyen/img/contact_technique.png
new file mode 100644
index 0000000..4235c9d
Binary files /dev/null and b/portail-citoyen/static/portail_citoyen/img/contact_technique.png differ
diff --git a/portail-citoyen/static/portail_citoyen/img/fond_barre_contact.png b/portail-citoyen/static/portail_citoyen/img/fond_barre_contact.png
new file mode 100644
index 0000000..478b29c
Binary files /dev/null and b/portail-citoyen/static/portail_citoyen/img/fond_barre_contact.png differ
diff --git a/portail-citoyen/static/portail_citoyen/img/logo_contact.png b/portail-citoyen/static/portail_citoyen/img/logo_contact.png
new file mode 100644
index 0000000..a271765
Binary files /dev/null and b/portail-citoyen/static/portail_citoyen/img/logo_contact.png differ
diff --git a/portail-citoyen/templates/base.html b/portail-citoyen/templates/base.html
index 778750e..e4f9901 100644
--- a/portail-citoyen/templates/base.html
+++ b/portail-citoyen/templates/base.html
@@ -5,7 +5,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta http-equiv="content-language" content="fr" />
     <link rel="shortcut icon" href="{{ portal_url }}{{ STATIC_URL }}portail_citoyen/img/favicon.ico" />
-    <title>Compte Citoyen :: {% page_attribute "page_title" %}</title>
+    <title>Compte Citoyen {% page_attribute "page_title" %}</title>
    
     
     {% render_block "css" %}
diff --git a/portail-citoyen/templates/header.html b/portail-citoyen/templates/header.html
index 9e27eee..484b163 100644
--- a/portail-citoyen/templates/header.html
+++ b/portail-citoyen/templates/header.html
@@ -19,7 +19,7 @@
                 <i class="fa fa-search"></i>
             </button>
 
-            <a id="contact_us" href="{{ site_vincennes_url }}/Contact" class="contact_us btn box">
+            <a id="contact_us" href="{{ portal_url }}/contact" class="contact_us btn box">
                 <i class="fa fa-envelope-o"></i>
                 <span class="hidden-xs hidden-sm">Nous contacter</span>
             </a>
diff --git a/portail-citoyen/templates/portail_citoyen/base_one_to_two_columns.html b/portail-citoyen/templates/portail_citoyen/base_one_to_two_columns.html
new file mode 100644
index 0000000..47207c4
--- /dev/null
+++ b/portail-citoyen/templates/portail_citoyen/base_one_to_two_columns.html
@@ -0,0 +1,24 @@
+{% extends "base.html" %}
+{% load cms_tags %}
+
+{% block content %}
+<div id="real-content">
+  <div id="center">
+    {% block center %}
+      {% placeholder "center" %}
+    {% endblock %}
+  </div>
+  </div>
+  <div id="left">
+    {% block left %}
+      {% placeholder "left" %}
+    {% endblock %}
+  </div>
+  <div id="right">
+    {% block right %}
+      {% placeholder "right" %}
+    {% endblock %}
+  </div>
+  <br style="clear"/>
+</div>
+{% endblock %}