diff --git a/src/UnicaenRenderer/Form/Macro/MacroHydrator.php b/src/UnicaenRenderer/Form/Macro/MacroHydrator.php
index bba2963097f31c0a8943f6cd1ffc8ec9c5350aec..9ae16b5f6c19aab3db4f49e1a79b70f2583a297d 100755
--- a/src/UnicaenRenderer/Form/Macro/MacroHydrator.php
+++ b/src/UnicaenRenderer/Form/Macro/MacroHydrator.php
@@ -11,7 +11,7 @@ class MacroHydrator implements HydratorInterface {
      * @param Macro $object
      * @return array
      */
-    public function extract($object)
+    public function extract(object $object) : array
     {
         $data = [
             'code' => $object->getCode(),
diff --git a/src/UnicaenRenderer/Form/Template/TemplateHydrator.php b/src/UnicaenRenderer/Form/Template/TemplateHydrator.php
index 6ab3dffbd6a518d9b3f878f4bb9fe4d76d8e6a25..1ed5c084e25bf65fdbce5b2185b2d17ead282d20 100755
--- a/src/UnicaenRenderer/Form/Template/TemplateHydrator.php
+++ b/src/UnicaenRenderer/Form/Template/TemplateHydrator.php
@@ -11,7 +11,7 @@ class TemplateHydrator implements HydratorInterface {
      * @param Template $object
      * @return array
      */
-    public function extract($object)
+    public function extract($object) : array
     {
         $data = [
             'code' => ($object)?$object->getCode():null,
diff --git a/view/unicaen-renderer/index/index.phtml b/view/unicaen-renderer/index/index.phtml
index 7757874797bd7662d511e02e7cee94b7eb35d57c..9ef99148f143118093425a708180000f03f3bf6d 100755
--- a/view/unicaen-renderer/index/index.phtml
+++ b/view/unicaen-renderer/index/index.phtml
@@ -60,7 +60,6 @@ $canTemplate = $this->isAllowed(DocumenttemplatePrivileges::getResourceId(Docume
     </div>
 <?php endif; ?>
 
-
 <?php if ($canRendu) : ?>
     <h2> Gestion des rendus </h2>
 
diff --git a/view/unicaen-renderer/macro/index.phtml b/view/unicaen-renderer/macro/index.phtml
index 5cfc961ebd242f18108fe900bb8c5f0b2f9dabc6..823245159e551757c0f42c77256ae21baf93bd4a 100755
--- a/view/unicaen-renderer/macro/index.phtml
+++ b/view/unicaen-renderer/macro/index.phtml
@@ -37,7 +37,7 @@ $this->headTitle("Index des macros");
         Générer le JSON des macros
     </a>
 
-    <table class="table table-condensed table-hover">
+    <table id='macro-liste' class="table table-condensed table-hover">
         <thead>
             <tr>
                 <th> Code </th>
@@ -74,7 +74,7 @@ $this->headTitle("Index des macros");
                                class="ajax-modal" data-event="modification" data-toggle="tooltip" data-html="true"
                                title="Suppression de la macro <span class='highlight macro'><?php echo $macro->getCode(); ?></span>"
                             >
-                                <span class="icon detruire"></span></a>
+                                <span class="icon detruire text-danger"></span></a>
                         <?php endif; ?>
                     </td>
                 </tr>
@@ -89,5 +89,28 @@ $this->headTitle("Index des macros");
             event.div.modal('hide');
             window.location.reload();
         });
+
+        if(jQuery().dataTable) {
+            $('#macro-liste').DataTable({
+                "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Tous"]],
+                "columnDefs": [
+                    {targets: 3, orderable: false, searchable: false},
+                ],
+                "language": {
+                    'lengthMenu': "Afficher _MENU_ &eacute;l&eacute;ments",
+                    "search": "Filtre de recherche : _INPUT_",
+                    "loadingRecords": "Chargement en cours...",
+                    'info': "<small class=\"text-highlight\">Affichage : <strong><i class=\"far fa-list-alt\"></i> _START_ - _END_ sur _TOTAL_</strong></small>",
+                    'infoEmpty': "",
+                    'infoFiltered': "<small class=\"text-highlight\">(_MAX_ &eacute;l&eacute;ments au total)</small>",
+                    'emptyTable': "Aucune donnée disponible.",
+                    'zeroRecords': "Aucun enregistrement trouvé.",
+                    "paginate": {
+                        "previous": "<i class=\"fas fa-chevron-left\"></i>",
+                        "next": "<i class=\"fas fa-chevron-right\"></i>"
+                    }
+                },
+            });
+        }
     });
 </script>
\ No newline at end of file
diff --git a/view/unicaen-renderer/macro/partial/filtre.phtml b/view/unicaen-renderer/macro/partial/filtre.phtml
index 316b1a6d8cee88c7f6dfc7d022b4ed88c57c4934..a11a240a09fd5086291acd112672ee1e93682325 100755
--- a/view/unicaen-renderer/macro/partial/filtre.phtml
+++ b/view/unicaen-renderer/macro/partial/filtre.phtml
@@ -10,20 +10,19 @@
 
 <div class="panel panel-default">
     <div class="panel-heading">
-        <span class="icon filtrer"></span> Filtre des macros
+        <h2>Filtrer les macros</h2>
     </div>
     <div class="panel-body">
         <form method="get" id="filtre" action="<?php echo $this->url(); ?>">
             <div class="row">
                 <!-- Variable -------------------------------------------------------- -->
-                <div class="col-md-3">
+                <div class="col-md-5">
                     <div class="form-group">
-                        <label for="variable">Variable associée :</label>
-                        <select id="variable" name="variable" class="selectpicker">
-                            <option value=""> Tous les variables </option>
-                            <?php foreach($variables as $variable) : ?>
+                        <select id="variable" name="variable" class="form-control selectpicker">
+                            <option value=""> Toutes les variables</option>
+                            <?php foreach ($variables as $variable) : ?>
                                 <option
-                                    value="<?php echo $variable; ?>"
+                                        value="<?php echo $variable; ?>"
                                     <?php if ($variable == $params['variable']) echo " selected "; ?>
                                 >
                                     <?php echo $variable; ?>
@@ -33,17 +32,16 @@
                     </div>
                 </div>
                 <!-- BOUTON -->
-                <div class="col-md-3">
-                    <br/>
-                    <div class="pull-right">
-                        <button class="btn btn-primary" id="clear">
-                            <span class="icon effacer"></span>
-                        </button>
-
-                        <button class="btn btn-primary" id="filter" style="width:20rem;">
+                <div class="col-md-7">
+                    <div class="form-group">
+                        <button class="btn btn-primary" id="filter">
                             <span class="icon filtrer"></span>
                             Filtrer
                         </button>
+                        <button class="btn btn-primary" id="clear">
+                            <span class="icon effacer"></span>
+                            Effacer
+                        </button>
                     </div>
                 </div>
             </div>
@@ -53,20 +51,27 @@
 
 
 <script>
-    $("form#filtre").submit(function(e){
-        e.preventDefault();
-    });
+    $(function () {
+        if (jQuery().selectpicker) {
+            $('#variable').selectpicker('render');
+        }
 
-    $('button#clear').click(function() {
-        window.location.href = 'macro';
-    });
+        $("form#filtre").submit(function (e) {
+            e.preventDefault();
+        });
+
+        $('button#clear').click(function () {
+            window.location.href = 'macro';
+        });
 
-    $('button#filter').click(function() {
-        let variableId = $('select#variable option:selected').val();
-        console.log( "variable=" + variableId);
+        $('button#filter').click(function () {
+            let variableId = $('select#variable option:selected').val();
+            console.log("variable=" + variableId);
 
-        let query = "";
-        query += "&variable=" + variableId;
-        window.location.href = 'macro?'+ query;
+            let query = "";
+            query += "&variable=" + variableId;
+            window.location.href = 'macro?' + query;
+        });
     });
+
 </script>
\ No newline at end of file
diff --git a/view/unicaen-renderer/rendu/index.phtml b/view/unicaen-renderer/rendu/index.phtml
index 4543d1f90ac4df24f7d7789faa7c4d08383465ba..644f3a4c60f0a05b4040b817448ce95e62940819 100644
--- a/view/unicaen-renderer/rendu/index.phtml
+++ b/view/unicaen-renderer/rendu/index.phtml
@@ -16,18 +16,17 @@ $canSupprimer = $this->isAllowed(DocumentcontenuPrivileges::getResourceId(Docume
 
 <h1 class="page-header">
     Index des rendus
-    <span class="badge"><?php echo count($rendus); ?> </span>
 </h1>
 
-<table class="table table-condensed table-hover">
+<table id='rendu-liste' class="table table-condensed table-hover">
     <thead>
-        <tr>
-            <th> Id </th>
-            <th> Template </th>
-            <th> Date de génération </th>
-            <th> Sujet </th>
-            <th> Action </th>
-        </tr>
+    <tr>
+        <th> Id</th>
+        <th> Template</th>
+        <th> Date de génération</th>
+        <th> Sujet</th>
+        <th> Action</th>
+    </tr>
     </thead>
     <tbody>
     <?php foreach ($rendus as $rendu) : ?>
@@ -42,15 +41,15 @@ $canSupprimer = $this->isAllowed(DocumentcontenuPrivileges::getResourceId(Docume
             <td>
                 <span title="<?php echo $rendu->getSujet(); ?>" data-toggle="tooltip" data-html="true">
                 <?php
-                    $sujet = $rendu->getSujet();
-                    if (strlen($sujet) > 50) $sujet = substr($rendu->getSujet(), 0, 46) . " ...";
-                    echo $sujet;
+                $sujet = $rendu->getSujet();
+                if (strlen($sujet) > 50) $sujet = substr($rendu->getSujet(), 0, 46) . " ...";
+                echo $sujet;
                 ?>
                 </span>
             </td>
             <td>
                 <?php if ($canVoir) : ?>
-                    <?php /** @see \UnicaenRenderer\Controller\RenduController::afficherAction() */?>
+                    <?php /** @see \UnicaenRenderer\Controller\RenduController::afficherAction() */ ?>
                     <a href="<?php echo $this->url('contenu/rendu/afficher', ['rendu' => $rendu->getId()], [], true); ?>"
                        title="Afficher le rendu" data-toggle="tooltip" data-html="true"
                        class="ajax-modal"
@@ -58,12 +57,12 @@ $canSupprimer = $this->isAllowed(DocumentcontenuPrivileges::getResourceId(Docume
                         <span class="icon voir"></span></a>
                 <?php endif; ?>
                 <?php if ($canSupprimer) : ?>
-                    <?php /** @see \UnicaenRenderer\Controller\RenduController::supprimerAction() */?>
+                    <?php /** @see \UnicaenRenderer\Controller\RenduController::supprimerAction() */ ?>
                     <a href="<?php echo $this->url('contenu/rendu/supprimer', ['rendu' => $rendu->getId()], [], true); ?>"
                        title="Supprimer le rendu" data-toggle="tooltip" data-html="true"
                        class="ajax-modal" data-event="modification"
                     >
-                        <span class="icon detruire"></span></a>
+                        <span class="icon detruire text-danger"></span></a>
                 <?php endif; ?>
             </td>
         </tr>
@@ -72,7 +71,30 @@ $canSupprimer = $this->isAllowed(DocumentcontenuPrivileges::getResourceId(Docume
 </table>
 
 <script>
-    $(function() {
+    $(function () {
+        if (jQuery().dataTable) {
+            $('#rendu-liste').DataTable({
+                "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Tous"]],
+                "columnDefs": [
+                    {targets: 4, orderable: false, searchable: false},
+                ],
+                "language": {
+                    'lengthMenu': "Afficher _MENU_ &eacute;l&eacute;ments",
+                    "search": "Filtre de recherche : _INPUT_",
+                    "loadingRecords": "Chargement en cours...",
+                    'info': "<small class=\"text-highlight\">Affichage : <strong><i class=\"far fa-list-alt\"></i> _START_ - _END_ sur _TOTAL_</strong></small>",
+                    'infoEmpty': "",
+                    'infoFiltered': "<small class=\"text-highlight\">(_MAX_ &eacute;l&eacute;ments au total)</small>",
+                    'emptyTable': "Aucune donnée disponible.",
+                    'zeroRecords': "Aucun enregistrement trouvé.",
+                    "paginate": {
+                        "previous": "<i class=\"fas fa-chevron-left\"></i>",
+                        "next": "<i class=\"fas fa-chevron-right\"></i>"
+                    }
+                },
+            });
+        }
+
         $("body").on("modification", function (event) {
             event.div.modal('hide');
             window.location.reload();
diff --git a/view/unicaen-renderer/template/index.phtml b/view/unicaen-renderer/template/index.phtml
index c739b74d7f8e5f3ce65b4ecb1a0d0c7b0a3e622b..fa591ef7aca74627bb94936cf5d5a74d7245aab1 100755
--- a/view/unicaen-renderer/template/index.phtml
+++ b/view/unicaen-renderer/template/index.phtml
@@ -29,7 +29,7 @@ $this->headTitle("Index des templates");
     </a>
 <?php endif; ?>
 
-<table class="table table-condensed table-hover">
+<table id='template-liste' class="table table-condensed table-hover">
     <thead>
         <tr>
             <th> Code </th>
@@ -69,7 +69,7 @@ $this->headTitle("Index des templates");
                         <a href="<?php echo $this->url('contenu/template/detruire', ['template' => $template->getId()], [], true); ?>"
                            class="ajax-modal" data-event="modification"
                         >
-                            <span class="icon detruire"></span></a>
+                            <span class="icon detruire text-danger"></span></a>
                     <?php endif; ?>
                 </td>
             </tr>
@@ -79,6 +79,29 @@ $this->headTitle("Index des templates");
 
 <script>
     $(function() {
+        if(jQuery().dataTable) {
+            $('#template-liste').DataTable({
+                "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Tous"]],
+                "columnDefs": [
+                    {targets: 2, orderable: false, searchable: false},
+                ],
+                "language": {
+                    'lengthMenu': "Afficher _MENU_ &eacute;l&eacute;ments",
+                    "search": "Filtre de recherche : _INPUT_",
+                    "loadingRecords": "Chargement en cours...",
+                    'info': "<small class=\"text-highlight\">Affichage : <strong><i class=\"far fa-list-alt\"></i> _START_ - _END_ sur _TOTAL_</strong></small>",
+                    'infoEmpty': "",
+                    'infoFiltered': "<small class=\"text-highlight\">(_MAX_ &eacute;l&eacute;ments au total)</small>",
+                    'emptyTable': "Aucune donnée disponible.",
+                    'zeroRecords': "Aucun enregistrement trouvé.",
+                    "paginate": {
+                        "previous": "<i class=\"fas fa-chevron-left\"></i>",
+                        "next": "<i class=\"fas fa-chevron-right\"></i>"
+                    }
+                },
+            });
+        }
+
         $("body").on("modification", function (event) {
             event.div.modal('hide');
             window.location.reload();