diff --git a/src/main/resources/public/css/main.css b/src/main/resources/public/css/main.css
index afd5e55d..358b17bd 100644
--- a/src/main/resources/public/css/main.css
+++ b/src/main/resources/public/css/main.css
@@ -163,7 +163,7 @@ body {
 
 @media (max-width:413px){
     #realPaymentMethods{
-        overflow-x: scroll; 
+        overflow-x: scroll;
     }
 
 }
@@ -191,4 +191,54 @@ body {
     .unauthenticated a:nth-child(2){
         width:52%;
     }
-}
\ No newline at end of file
+}
+
+/*Tables footer customization. */
+[id$=_paginate].dataTables_paginate {
+    padding: 0 !important;
+    align-items: center !important;
+    justify-content: center !important;
+    display: flex !important;
+    float: right !important;
+    margin-top: 4px;
+}
+
+[id$=_paginate] > a.paginate_button {
+    padding: 0 !important;
+    height: 2.5em !important;
+    width: 2.5em !important;
+    display: inline-flex  !important;
+    align-items: center  !important;
+    justify-content: center  !important;
+}
+
+[id$=_paginate] > span .paginate_button {
+    padding: 0px !important;
+    height: 2.5em !important;
+    width: 2.5em !important;
+    display: inline-flex  !important;
+    align-items: center  !important;
+    justify-content: center  !important;
+}
+
+[id$=_length]{
+    margin: 0 !important;
+    margin-left: 8px !important;
+    padding: 0 !important;
+    height: 100% !important;
+}
+
+[id$=_length] > label {
+    display: inline-flex !important;
+    flex-direction: column;
+    align-items: center !important;
+    justify-content: center !important;
+    font-size: 14px !important;
+    font-weight: normal !important;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+.dataTables_info {
+    text-align: center;
+}
diff --git a/src/main/resources/public/js/getAndAddContracts.js b/src/main/resources/public/js/getAndAddContracts.js
index 3aac743c..b325377b 100644
--- a/src/main/resources/public/js/getAndAddContracts.js
+++ b/src/main/resources/public/js/getAndAddContracts.js
@@ -23,8 +23,26 @@ var projectContractsCount = -1;
         )
         $("#tasks").show();
         $("#tasksTable").DataTable({
+            dom: "<'row w-100 align-items-center'<'col-sm-12 col-md-12 justify-content-end'Q>>" +
+            "<'row w-100'<'col-sm-12'tr>>" +
+            "<'row w-100 align-items-center'<'col-sm-12 col-md-4 justify-content-end mb-1'i><'col-sm-12 col-md-8 d-flex justify-content-end align-items-center'lp>>",
+            searchBuilder: {
+                columns: [1, 2],
+            },
             language: {
-                loadingRecords: '<img src="/images/loading.svg" height="100">'
+                loadingRecords: '<img src="/images/loading.svg" height="100">',
+                searchBuilder:{
+                    add: "+",
+                    title: {
+                        0: 'Date filters',
+                        _: 'Date filters (%d)'
+                    },
+                },
+                lengthMenu: "<div style='margin-bottom: 2px'>Show entries</div><div>_MENU_</div>",
+                paginate: {
+                    next: "<i class='fa fa-fw fa-chevron-right'></i>",
+                    previous: "<i class='fa fa-fw fa-chevron-left'></i>"
+                },
             },
             ajax: {
                 url: "/api/projects/"
@@ -55,10 +73,12 @@ var projectContractsCount = -1;
                 },
                 {
                     data: "assignmentDate",
+                    type: 'date',
                     render: (data) => data.split('T')[0]
                 },
                 {
                     data: "deadline",
+                    type: 'date',
                     render: (data) => data.split('T')[0]
                 },
                 {
@@ -81,9 +101,31 @@ var projectContractsCount = -1;
         )
         $("#invoices").show();
         $("#invoicesTable").DataTable({
+            dom: "<'row w-100 align-items-center'<'col-sm-12 col-md-12 justify-content-end'Q>>" +
+            "<'row w-100'<'col-sm-12'tr>>" +
+            "<'row w-100 align-items-center'<'col-sm-12 col-md-4 justify-content-end mb-1'i><'col-sm-12 col-md-8 d-flex justify-content-end align-items-center'lp>>",
+            searchBuilder: {
+                columns: [1],
+            },
             language: {
-                loadingRecords: '<img src="/images/loading.svg" height="100">'
+                loadingRecords: '<img src="/images/loading.svg" height="100">',
+                lengthMenu: "<div style='margin-bottom: 2px'>Show entries</div><div>_MENU_</div>",
+                paginate: {
+                    next: "<i class='fa fa-fw fa-chevron-right'></i>",
+                    previous: "<i class='fa fa-fw fa-chevron-left'></i>"
+                },
+                searchBuilder:{
+                    add: "+",
+                    title: {
+                        0: 'Date filters',
+                        _: 'Date filters (%d)'
+                    },
+                },
             },
+            columnDefs: [
+                { targets: [4], orderable: false },
+                { targets: 1, type: 'date'}
+            ],
             ajax: function(data, callback){
                 $.ajax(
                     "/api/projects/"
@@ -231,9 +273,23 @@ var projectContractsCount = -1;
         function loadContracts() {
             $("#contracts").dataTable().fnDestroy();
             $("#contracts").dataTable({
+                dom: "<'row w-100 align-items-center'<'col-sm-12 col-md-12 justify-content-end'f>>" +
+                     "<'row w-100'<'col-sm-12'tr>>" +
+                     "<'row w-100 align-items-center mt-1'<'col-sm-12 col-md-4 justify-content-end mb-1'i><'col-sm-12 col-md-8 d-flex justify-content-end align-items-center'lp>>",
                 language: {
-                    loadingRecords: '<img src="/images/loading.svg" height="100">'
+                    loadingRecords: '<img src="/images/loading.svg" height="100">',
+                    lengthMenu: "<div style='margin-bottom: 2px'>Show entries</div><div>_MENU_</div>",
+                    paginate: {
+                        next: "<i class='fa fa-fw fa-chevron-right'></i>",
+                        previous: "<i class='fa fa-fw fa-chevron-left'></i>"
+                    },
+                    searchPlaceholder: " Contributor..."
                 },
+                "columnDefs": [
+                    { "targets": [0], "searchable": true },
+                    { "targets": [1, 2, 3, 4], "searchable": false },
+                    { "targets": [4], "orderable": false }
+                ],
                 ajax: function (data, callback) {
                     contractsService
                         .getAll(project)
diff --git a/src/main/resources/templates/head.html b/src/main/resources/templates/head.html
index 7d8a8050..2d0b6c32 100644
--- a/src/main/resources/templates/head.html
+++ b/src/main/resources/templates/head.html
@@ -11,10 +11,12 @@
     <link href="https://unpkg.com/@primer/css/dist/primer.css" rel="stylesheet" />
     <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/searchbuilder/1.0.1/css/searchBuilder.dataTables.min.css"/>
 
     <script type="text/javascript" src="/webjars/jquery/jquery.min.js"></script>
     <script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
     <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
+    <script type="text/javascript" src="https://cdn.datatables.net/searchbuilder/1.0.1/js/dataTables.searchBuilder.min.js"></script>
     <script type="text/javascript" src="/webjars/bootstrap/js/bootstrap.bundle.min.js "></script>
     <script type="text/javascript" src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
     <script type="text/javascript" src="/webjars/js-cookie/js.cookie.js"></script>