diff --git a/preferences/templates/preferences/display_preferences.html b/preferences/templates/preferences/display_preferences.html
index 96d3fe16..a5ee9f8d 100644
--- a/preferences/templates/preferences/display_preferences.html
+++ b/preferences/templates/preferences/display_preferences.html
@@ -31,50 +31,53 @@ with this program; if not, write to the Free Software Foundation, Inc.,
 {% block title %}{% trans "Preferences" %}{% endblock %}
 
 {% block content %}
-    <h4>{% trans "User preferences" %}</h4>
-    <a class="btn btn-primary btn-sm" role="button" href="{% url 'preferences:edit-options' 'OptionalUser' %}">
+<div id="accordion">
+	
+	<div class="panel panel-default" id="general">
+	<div class="panel-heading">
+    	<h4 class="panel-title" id="general">
+        	<a data-toggle="collapse" href="#collapse_general">{% trans "General preferences" %}</a>
+		</h4>
+		</div>
+
+    <div id="collapse_general" class="panel-collapse collapse">
+		<a class="btn btn-primary btn-sm" role="button" href="{% url 'preferences:edit-options' 'GeneralOption' %}">
         <i class="fa fa-edit"></i>
         {% trans "Edit" %}
-    </a>
-    <p>
-    </p>
-    <h5>{% trans "General preferences" %}</h5>
+    	</a>	
+
     <table class="table table-striped">
         <tr>
-            <th>{% trans "Creation of members by everyone" %}</th>
-            <td>{{ useroptions.all_can_create_adherent|tick }}</td>
-            <th>{% trans "Creation of clubs by everyone" %}</th>
-            <td>{{ useroptions.all_can_create_club|tick }}</td>
+            <th>{% trans "Website name" %}</th>
+            <td>{{ generaloptions.site_name }}</td>
+            <th>{% trans "Email address for automatic emailing" %}</th>
+            <td>{{ generaloptions.email_from }}</td>
         </tr>
         <tr>
-            <th>{% trans "Self registration" %}</th>
-            <td>{{ useroptions.self_adhesion|tick }}</td>
-            <th>{% trans "Delete not yet active users after" %}</th>
-            <td>{{ useroptions.delete_notyetactive }} days</td>
+            <th>{% trans "Number of results displayed when searching" %}</th>
+            <td>{{ generaloptions.search_display_page }}</td>
+            <th>{% trans "Number of items per page (standard size)" %}</th>
+            <td>{{ generaloptions.pagination_number }}</td>
+        </tr>
+        <tr>
+            <th>{% trans "Number of items per page (large size)" %}</th>
+            <td>{{ generaloptions.pagination_large_number }}</td>
+            <th>{% trans "Time before expiration of the reset password link (in hours)" %}</th>
+            <td>{{ generaloptions.req_expire_hrs }}</td>
+        </tr>
+        <tr>
+            <th>{% trans "General message displayed on the website" %}</th>
+            <td>{{ generaloptions.general_message }}</td>
+ 	    <th>{% trans "Main site url" %}</th>
+            <td>{{ generaloptions.main_site_url }}</td>  
+	</tr>
+        <tr>
+	    <th>{% trans "Summary of the General Terms of Use" %}</th>
+            <td>{{ generaloptions.GTU_sum_up }}</td>
+            <th>{% trans "General Terms of Use" %}</th>
+            <td>{{ generaloptions.GTU }}</th>
         </tr>
     </table>
-
-    <h5>{% trans "Users general permissions" %}</h5>
-    <table class="table table-striped">
-        <tr>
-            <th>{% trans "Default shell for users" %}</th>
-            <td>{{ useroptions.shell_default }}</td>
-            <th>{% trans "Users can edit their shell" %}</th>
-            <td>{{ useroptions.self_change_shell|tick }}</td>
-        </tr>
-        <tr>
-            <th>{% trans "Users can edit their room" %}</th>
-            <td>{{ useroptions.self_change_room|tick }}</td>
-            <th>{% trans "Telephone number required" %}</th>
-            <td>{{ useroptions.is_tel_mandatory|tick }}</td>
-        </tr>
-        <tr>
-            <th>{% trans "GPG fingerprint field" %}</th>
-            <td>{{ useroptions.gpg_fingerprint|tick }}</td>
-        </tr>
-    </table>
-
-    <h5>{% trans "Email accounts preferences" %}</h5>
     <table class="table table-striped">
         <tr>
             <th>{% trans "Local email accounts enabled" %}</th>
@@ -87,7 +90,66 @@ with this program; if not, write to the Free Software Foundation, Inc.,
             <td>{{ useroptions.max_email_address }}</td>
         </tr>
     </table>
-    <h4>{% trans "Machines preferences" %}</h4>
+	</div>
+	</div>
+
+	<div class="panel panel-default" id="users">
+    	<div class="panel-heading">
+      		<h4 class="panel-title">
+        	<a data-toggle="collapse" href="#collapse_users">{% trans "User preferences" %}</a>
+      		</h4>
+     	</div>
+     	
+		<div id="collapse_users" class="panel-collapse collapse">
+			<a class="btn btn-primary btn-sm" role="button" href="{% url 'preferences:edit-options' 'OptionalUser' %}">
+			<i class="fa fa-edit"></i>
+			{% trans "Edit" %}
+			</a>
+        <table class="table table-striped">
+            <tr>
+                <th>{% trans "Creation of members by everyone" %}</th>
+                <td>{{ useroptions.all_can_create_adherent|tick }}</td>
+                <th>{% trans "Creation of clubs by everyone" %}</th>
+                <td>{{ useroptions.all_can_create_club|tick }}</td>
+            </tr>
+            <tr>
+                <th>{% trans "Self registration" %}</th>
+                <td>{{ useroptions.self_adhesion|tick }}</td>
+                <th>{% trans "Delete not yet active users after" %}</th>
+                <td>{{ useroptions.delete_notyetactive }} days</td>
+            </tr>
+            </table>
+
+            <h4 id="users">{% trans "Users general permissions" %}</h4>
+            <table class="table table-striped">
+            <tr>
+                <th>{% trans "Default shell for users" %}</th>
+                <td>{{ useroptions.shell_default }}</td>
+                <th>{% trans "Users can edit their shell" %}</th>
+                <td>{{ useroptions.self_change_shell|tick }}</td>
+            </tr>
+            <tr>
+                <th>{% trans "Users can edit their room" %}</th>
+                <td>{{ useroptions.self_change_room|tick }}</td>
+                <th>{% trans "Telephone number required" %}</th>
+                <td>{{ useroptions.is_tel_mandatory|tick }}</td>
+            </tr>
+            <tr>
+                <th>{% trans "GPG fingerprint field" %}</th>
+                <td>{{ useroptions.gpg_fingerprint|tick }}</td>
+            </tr>
+        </table>
+        </div>
+        </div>
+    </div>
+	
+	<div class="panel panel-default" id="machines">
+	<div class="panel-heading">
+    	<h4 class ="panel-title">
+			<a data-toggle="collapse" href="#collapse_machines">{% trans "Machines preferences" %}</a>
+		</h4>
+	</div>
+	<div id="collapse_machines" class="panel-collapse collapse">
     <a class="btn btn-primary btn-sm" role="button" href="{% url 'preferences:edit-options' 'OptionalMachine' %}">
         <i class="fa fa-edit"></i>
         {% trans "Edit" %}
@@ -112,7 +174,16 @@ with this program; if not, write to the Free Software Foundation, Inc.,
             <td>{{ machineoptions.create_machine|tick }}</td>
         </tr>
     </table>
-    <h4>{% trans "Topology preferences" %}</h4>
+	</div>
+	</div>
+
+	<div  class="panel panel-default" id="topo">
+	<div class="panel-heading">
+		<h4 class="panel-title">
+			<a data-toggle="collapse" href="#collapse_topo">{% trans "Topology preferences" %}</a>
+		</h4>
+	</div>
+	<div id="collapse_topo" class="panel-collapse collapse">
         <a class="btn btn-primary btn-sm" role="button" href="{% url 'preferences:edit-options' 'OptionalTopologie' %}">
             <i class="fa fa-edit"></i>
             {% trans "Edit" %}
@@ -138,13 +209,22 @@ with this program; if not, write to the Free Software Foundation, Inc.,
 	</tr>
     </table>
 
-	<h6>Clef radius</h6>
+    <h4>Clef radius</h4>
 	  {% can_create RadiusKey%}
 	  <a class="btn btn-primary btn-sm" role="button" href="{% url 'preferences:add-radiuskey'  %}"><i class="fa fa-plus"></i> Ajouter une clef radius</a>
 	  {% acl_end %}
 	  {%  include "preferences/aff_radiuskey.html" with  radiuskey_list=radiuskey_list %}
+	
+	</div>
+	</div>
 
-    <h4>Configuration des switches</h4>
+	<div  class="panel panel-default" id="switches">
+    <div class="panel-heading">
+		<h4 class="panel-title">
+			<a data-toggle="collapse" href="#collapse_switches">Configuration des Switches</a>
+		</h4>
+	</div>
+	<div id="collapse_switches" class="panel-collapse collapse">
     <table class="table table-striped">
 	<tr>
             <th>Web management, activé si provision automatique</th>
@@ -192,49 +272,12 @@ with this program; if not, write to the Free Software Foundation, Inc.,
           </p>
           {% if switchmanagementcred_list %}<span class="label label-success"> OK{% else %}<span class="label label-danger">Manquant{% endif %}</span>
           {%  include "preferences/aff_switchmanagementcred.html" with  switchmanagementcred_list=switchmanagementcred_list %}
+	</div>
+	</div>
 
 
 
-    <h4>{% trans "General preferences" %}</h4>
-        <a class="btn btn-primary btn-sm" role="button" href="{% url 'preferences:edit-options' 'GeneralOption' %}">
-            <i class="fa fa-edit"></i>
-            {% trans "Edit" %}
-        </a>
-    <p>
-    </p>
-    <table class="table table-striped">
-        <tr>
-            <th>{% trans "Website name" %}</th>
-            <td>{{ generaloptions.site_name }}</td>
-            <th>{% trans "Email address for automatic emailing" %}</th>
-            <td>{{ generaloptions.email_from }}</td>
-        </tr>
-        <tr>
-            <th>{% trans "Number of results displayed when searching" %}</th>
-            <td>{{ generaloptions.search_display_page }}</td>
-            <th>{% trans "Number of items per page (standard size)" %}</th>
-            <td>{{ generaloptions.pagination_number }}</td>
-        </tr>
-        <tr>
-            <th>{% trans "Number of items per page (large size)" %}</th>
-            <td>{{ generaloptions.pagination_large_number }}</td>
-            <th>{% trans "Time before expiration of the reset password link (in hours)" %}</th>
-            <td>{{ generaloptions.req_expire_hrs }}</td>
-        </tr>
-        <tr>
-            <th>{% trans "General message displayed on the website" %}</th>
-            <td>{{ generaloptions.general_message }}</td>
- 	    <th>{% trans "Main site url" %}</th>
-            <td>{{ generaloptions.main_site_url }}</td>  
-	</tr>
-        <tr>
-	    <th>{% trans "Summary of the General Terms of Use" %}</th>
-            <td>{{ generaloptions.GTU_sum_up }}</td>
-            <th>{% trans "General Terms of Use" %}</th>
-            <td>{{ generaloptions.GTU }}</th>
-        </tr>
-    </table>
-    <h4>{% trans "Information about the organisation" %}</h4>
+    <h4 id="asso">{% trans "Information about the organisation" %}</h4>
         <a class="btn btn-primary btn-sm" role="button" href="{% url 'preferences:edit-options' 'AssoOption' %}">
             <i class="fa fa-edit"></i>
             {% trans "Edit" %}
@@ -269,7 +312,7 @@ with this program; if not, write to the Free Software Foundation, Inc.,
             <td>{{ assooptions.description|safe }}</td>
         </tr>
     </table>
-    <h4>{% trans "Custom email message" %}</h4>
+    <h4 id="mail">{% trans "Custom email message" %}</h4>
         <a class="btn btn-primary btn-sm" role="button" href="{% url 'preferences:edit-options' 'MailMessageOption' %}">
             <i class="fa fa-edit"></i>
             {% trans "Edit" %}
@@ -286,13 +329,13 @@ with this program; if not, write to the Free Software Foundation, Inc.,
             <td>{{ mailmessageoptions.welcome_mail_en|safe }}</td>
         </tr>
     </table>
-    <h4>Options pour le mail de fin d'adhésion</h2>
+    <h4 id="reminders">Options pour le mail de fin d'adhésion</h2>
         {% can_create preferences.Reminder%}
         <a class="btn btn-primary btn-sm" role="button" href="{% url 'preferences:add-reminder'  %}"><i class="fa fa-plus"></i> Ajouter un rappel</a>
         {% acl_end %}
         {%  include "preferences/aff_reminder.html" with  reminder_list=reminder_list %}
 
-    <h4>{% trans "List of services and homepage preferences" %}</h4>
+    <h4 id="services">{% trans "List of services and homepage preferences" %}</h4>
         {% can_create preferences.Service%}
         <a class="btn btn-primary btn-sm" role="button" href="{% url 'preferences:add-service'  %}"><i class="fa fa-plus"></i>{% trans " Add a service" %}</a>
         {% acl_end %}
@@ -301,7 +344,7 @@ with this program; if not, write to the Free Software Foundation, Inc.,
             <i class="fa fa-edit"></i>
             {% trans "Edit" %}
         </a>
-    <h2>{% trans "List of contact email addresses" %}</h2>
+    <h4 id="contact">{% trans "List of contact email addresses" %}</h4>
         {% can_create preferences.MailContact %}
         <a class="btn btn-primary btn-sm" role="button" href="{% url 'preferences:add-mailcontact'  %}"><i class="fa fa-plus"></i>{% trans "Add an address" %}</a>
         {% acl_end %}
@@ -321,5 +364,7 @@ with this program; if not, write to the Free Software Foundation, Inc.,
             <td>{{ homeoptions.facebook_url }}</td>
         </tr>
     </table>
+
+</div>
 {% endblock %}