diff --git a/src/App.vue b/src/App.vue
index 35969d3a2f997651be6194bc71f4ce2e79adcff6..e70b202ab4fb3e43da2131ad05576ca1ed048ac3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -184,6 +184,15 @@ export default {
 
 .header-menu {
   min-width: 560px;
+  height: 61px;
+}
+
+main {
+  height: calc(100vh - 61px - 40px);
+}
+
+footer {
+  height: 40px;
 }
 
 .vertical {
diff --git a/src/views/feature/Feature_list.vue b/src/views/feature/Feature_list.vue
index 1475ee5faecf3da4e5ce1430a1f161bc8e0f9e0d..e18f7271f53fe88d135caa9bf3af6d84f06b3b41 100644
--- a/src/views/feature/Feature_list.vue
+++ b/src/views/feature/Feature_list.vue
@@ -125,7 +125,7 @@
       <SidebarLayers />
     </div>
 
-    <div v-show="!showMap" data-tab="list">
+    <div v-show="!showMap" data-tab="list" class="dataTables_wrapper no-footer">
       <table id="table-features" class="ui compact table">
         <thead>
           <tr>
@@ -138,7 +138,7 @@
         </thead>
         <tbody>
           <tr
-            v-for="(feature, index) in filteredFeatures"
+            v-for="(feature, index) in paginatedFeatures"
             :key="feature.feature_id + index"
           >
             <td class="dt-center" :data-order="feature.get_status_display">
@@ -201,6 +201,47 @@
           </tr>
         </tbody>
       </table>
+      <div
+        class="dataTables_info"
+        id="table-features_info"
+        role="status"
+        aria-live="polite"
+      >
+        Affichage de l'élément {{ pagination.start + 1 }} à
+        {{ pagination.end + 1 }} sur {{ filteredFeatures.length }} éléments
+      </div>
+      <div
+        class="dataTables_paginate paging_simple_numbers"
+        id="table-features_paginate"
+      >
+        <a
+          class="paginate_button previous disabled"
+          aria-controls="table-features"
+          data-dt-idx="0"
+          tabindex="0"
+          id="table-features_previous"
+          >Précédent</a
+        ><span
+          ><a
+            v-for="(page, index) in filteredFeatures.length"
+            :key="'page' + index"
+            class="paginate_button current"
+            aria-controls="table-features"
+            data-dt-idx="1"
+            tabindex="0"
+            >1</a
+          >
+          <span class="ellipsis">…</span>
+          <a
+            class="paginate_button next"
+            aria-controls="table-features"
+            data-dt-idx="7"
+            tabindex="0"
+            id="table-features_next"
+            >Suivant</a
+          >
+        </span>
+      </div>
     </div>
   </div>
 </template>
@@ -220,8 +261,6 @@ export default {
 
   data() {
     return {
-      showMap: true,
-      showAddSignal: false,
       form: {
         type: {
           selected: null,
@@ -255,8 +294,10 @@ export default {
       },
       pagination: {
         start: 0,
-        end: 10,
+        end: 14,
       },
+      showMap: true,
+      showAddSignal: false,
     };
   },
 
@@ -285,7 +326,10 @@ export default {
       return results;
     },
     paginatedFeatures: function () {
-      return this.features.slice(this.pagination.start, this.pagination.end);
+      return this.filteredFeatures.slice(
+        this.pagination.start,
+        this.pagination.end
+      );
     },
   },
 
@@ -340,4 +384,66 @@ export default {
     width: 100%;
   }
 }
-</style>
\ No newline at end of file
+/* datatables */
+.dataTables_wrapper {
+  position: relative;
+  clear: both;
+}
+.dataTables_wrapper .dataTables_length,
+.dataTables_wrapper .dataTables_filter,
+.dataTables_wrapper .dataTables_info,
+.dataTables_wrapper .dataTables_processing,
+.dataTables_wrapper .dataTables_paginate {
+  color: #333;
+}
+.dataTables_wrapper .dataTables_info {
+  clear: both;
+  float: left;
+  padding-top: 0.755em;
+}
+.dataTables_wrapper .dataTables_paginate {
+  float: right;
+  text-align: right;
+  padding-top: 0.25em;
+}
+.dataTables_wrapper .dataTables_paginate .paginate_button.current,
+.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
+  color: #333 !important;
+  border: 1px solid #979797;
+  background-color: white;
+  background: -webkit-gradient(
+    linear,
+    left top,
+    left bottom,
+    color-stop(0%, #fff),
+    color-stop(100%, #dcdcdc)
+  );
+  background: -webkit-linear-gradient(top, #fff 0%, #dcdcdc 100%);
+  background: -moz-linear-gradient(top, #fff 0%, #dcdcdc 100%);
+  background: -ms-linear-gradient(top, #fff 0%, #dcdcdc 100%);
+  background: -o-linear-gradient(top, #fff 0%, #dcdcdc 100%);
+  background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%);
+}
+.dataTables_wrapper .dataTables_paginate .paginate_button {
+  box-sizing: border-box;
+  display: inline-block;
+  min-width: 1.5em;
+  padding: 0.5em 1em;
+  margin-left: 2px;
+  text-align: center;
+  text-decoration: none !important;
+  cursor: pointer;
+  color: #333 !important;
+  border: 1px solid transparent;
+  border-radius: 2px;
+}
+.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
+.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
+  cursor: default;
+  color: #666 !important;
+  border: 1px solid transparent;
+  background: transparent;
+  box-shadow: none;
+}
+</style>
+