diff --git a/app/assets/css/app.css b/app/assets/css/app.css
index 40484b180..25e3e257c 100644
--- a/app/assets/css/app.css
+++ b/app/assets/css/app.css
@@ -482,12 +482,6 @@ json-tree .branch-preview {
 .pagination > li > span:focus {
   background-color: var(--bg-pagination-hover-color);
   border-color: var(--border-pagination-hover-color);
-}
-
-.pagination > li > a:hover,
-.pagination > li > span:hover,
-.pagination > li > a:focus,
-.pagination > li > span:focus {
   color: var(--text-pagination-span-hover-color);
 }
 
diff --git a/app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html b/app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html
index 77ce34153..aafdcb42f 100644
--- a/app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html
+++ b/app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html
@@ -73,7 +73,11 @@
                 </button>
               </td>
             </tr>
-            <tr dir-paginate-end ng-show="$ctrl.itemCanExpand(value) && value.Expanded" ng-style="{ background: value.Highlighted ? '#d5e8f3' : '#f5f5f5' }">
+            <tr
+              dir-paginate-end
+              ng-show="$ctrl.itemCanExpand(value) && value.Expanded"
+              ng-style="{ background: value.Highlighted ? 'var(--bg-item-highlighted-color)' : 'var(--bg-item-highlighted-null-color)' }"
+            >
               <td colspan="1"></td>
               <td colspan="1">
                 {{ value.GlobalIPv6Address }}
diff --git a/app/docker/components/datatables/networks-datatable/networksDatatable.html b/app/docker/components/datatables/networks-datatable/networksDatatable.html
index bf54ca837..59ae18ad1 100644
--- a/app/docker/components/datatables/networks-datatable/networksDatatable.html
+++ b/app/docker/components/datatables/networks-datatable/networksDatatable.html
@@ -171,7 +171,16 @@
               allow-checkbox="true"
             >
             </tr>
-            <tr dir-paginate-end ng-show="item.Expanded" ng-repeat="it in item.Subs" style="background: #d5e8f3;" network-row-content item="it" parent-ctrl="$ctrl"> </tr>
+            <tr
+              dir-paginate-end
+              ng-show="item.Expanded"
+              ng-repeat="it in item.Subs"
+              style="background: var(--bg-item-highlighted-color);"
+              network-row-content
+              item="it"
+              parent-ctrl="$ctrl"
+            >
+            </tr>
             <tr ng-if="!$ctrl.dataset">
               <td colspan="9" class="text-center text-muted">Loading...</td>
             </tr>
diff --git a/app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.html b/app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.html
index 285f2263e..21b8498f9 100644
--- a/app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.html
+++ b/app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.html
@@ -1,4 +1,4 @@
-<div style="background-color: #d5e8f3; padding: 2px;">
+<div style="background-color: var(--bg-item-highlighted-color); padding: 2px;">
   <table class="table table-condensed table-hover nowrap-cells">
     <thead style="background-color: #e7f6ff;">
       <tr>
diff --git a/app/kubernetes/components/datatables/applications-ports-datatable/applicationsPortsDatatable.html b/app/kubernetes/components/datatables/applications-ports-datatable/applicationsPortsDatatable.html
index 814ff9ebf..d9095e660 100644
--- a/app/kubernetes/components/datatables/applications-ports-datatable/applicationsPortsDatatable.html
+++ b/app/kubernetes/components/datatables/applications-ports-datatable/applicationsPortsDatatable.html
@@ -106,7 +106,7 @@
             <tr
               dir-paginate-start="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | filter: $ctrl.isDisplayed | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit: $ctrl.tableKey))"
               ng-class="{ active: item.Checked }"
-              ng-style="{ background: item.Highlighted ? '#d5e8f3' : '' }"
+              ng-style="{ background: item.Highlighted ? 'var(--bg-item-highlighted-color)' : '' }"
               ng-click="$ctrl.expandItem(item, !item.Expanded)"
               pagination-id="$ctrl.tableKey"
             >
@@ -177,7 +177,11 @@
               </td>
             </tr>
             <!-- sub rows -->
-            <tr ng-show="item.Expanded" ng-repeat-start="port in item.Ports" ng-style="{ background: item.Highlighted ? '#d5e8f3' : '#f5f5f5' }">
+            <tr
+              ng-show="item.Expanded"
+              ng-repeat-start="port in item.Ports"
+              ng-style="{ background: item.Highlighted ? 'var(--bg-item-highlighted-color)' : 'var(--bg-item-highlighted-null-color)' }"
+            >
               <td ng-if="!$ctrl.portHasIngressRules(port)"></td>
               <td ng-if="!$ctrl.portHasIngressRules(port)">-</td>
               <td ng-if="!$ctrl.portHasIngressRules(port)">-</td>
@@ -190,7 +194,12 @@
               <td ng-if="!$ctrl.portHasIngressRules(port)">{{ port.TargetPort }}/{{ port.Protocol }}</td>
               <td ng-if="!$ctrl.portHasIngressRules(port)">-</td>
             </tr>
-            <tr ng-show="item.Expanded" ng-repeat-end ng-repeat="rule in port.IngressRules" ng-style="{ background: item.Highlighted ? '#d5e8f3' : '#f5f5f5' }">
+            <tr
+              ng-show="item.Expanded"
+              ng-repeat-end
+              ng-repeat="rule in port.IngressRules"
+              ng-style="{ background: item.Highlighted ? 'var(--bg-item-highlighted-color)' : 'var(--bg-item-highlighted-null-color)' }"
+            >
               <td></td>
               <td>-</td>
               <td>-</td>
diff --git a/app/kubernetes/components/datatables/applications-stacks-datatable/applicationsStacksDatatable.html b/app/kubernetes/components/datatables/applications-stacks-datatable/applicationsStacksDatatable.html
index d49c972c8..80a3d924e 100644
--- a/app/kubernetes/components/datatables/applications-stacks-datatable/applicationsStacksDatatable.html
+++ b/app/kubernetes/components/datatables/applications-stacks-datatable/applicationsStacksDatatable.html
@@ -110,7 +110,7 @@
             <tr
               dir-paginate-start="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | filter: $ctrl.isDisplayed | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit: $ctrl.tableKey))"
               ng-class="{ active: item.Checked }"
-              ng-style="{ background: item.Highlighted ? '#d5e8f3' : '' }"
+              ng-style="{ background: item.Highlighted ? 'var(--bg-item-highlighted-color)' : '' }"
               ng-click="$ctrl.expandItem(item, !item.Expanded)"
               pagination-id="$ctrl.tableKey"
             >
@@ -141,7 +141,12 @@
                 <a ui-sref="kubernetes.stacks.stack.logs({ namespace: item.ResourcePool, name: item.Name })"> <i class="fa fa-file-alt" aria-hidden="true"></i> Logs </a>
               </td>
             </tr>
-            <tr dir-paginate-end ng-show="item.Expanded" ng-repeat="app in item.Applications" ng-style="{ background: item.Highlighted ? '#d5e8f3' : '#f5f5f5' }">
+            <tr
+              dir-paginate-end
+              ng-show="item.Expanded"
+              ng-repeat="app in item.Applications"
+              ng-style="{ background: item.Highlighted ? 'var(--bg-item-highlighted-color)' : 'var(--bg-item-highlighted-null-color)' }"
+            >
               <td></td>
               <td colspan="4">
                 <a ui-sref="kubernetes.applications.application({ name: app.Name, namespace: app.ResourcePool })">{{ app.Name }}</a>
diff --git a/app/kubernetes/views/applications/edit/components/placements-datatable/template.html b/app/kubernetes/views/applications/edit/components/placements-datatable/template.html
index 50bd58670..33581dd21 100644
--- a/app/kubernetes/views/applications/edit/components/placements-datatable/template.html
+++ b/app/kubernetes/views/applications/edit/components/placements-datatable/template.html
@@ -76,7 +76,7 @@
             <tr
               dir-paginate-start="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | filter: $ctrl.isDisplayed | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit: $ctrl.tableKey))"
               ng-class="{ active: item.Checked }"
-              ng-style="{ background: item.Highlighted ? '#d5e8f3' : '' }"
+              ng-style="{ background: item.Highlighted ? 'var(--bg-item-highlighted-color)' : '' }"
               ng-click="$ctrl.expandItem(item, !item.Expanded)"
               pagination-id="$ctrl.tableKey"
             >
@@ -92,14 +92,23 @@
               </td>
             </tr>
             <!-- ADMIN + UNMET TAINTS -->
-            <tr ng-if="$ctrl.isAdmin" ng-show="item.Expanded" ng-repeat="taint in item.UnmetTaints" ng-style="{ background: item.Highlighted ? '#d5e8f3' : '#f5f5f5' }">
+            <tr
+              ng-if="$ctrl.isAdmin"
+              ng-show="item.Expanded"
+              ng-repeat="taint in item.UnmetTaints"
+              ng-style="{ background: item.Highlighted ? 'var(--bg-item-highlighted-color)' : 'var(--bg-item-highlighted-null-color)' }"
+            >
               <td colspan="2">
                 This application is missing a toleration for the taint <code>{{ taint.Key }}{{ taint.Value ? '=' + taint.Value : '' }}:{{ taint.Effect }}</code>
               </td>
             </tr>
             <!-- !ADMIN + UNMET TAINTS -->
             <!-- USER + UNMET TAINTS -->
-            <tr ng-if="!$ctrl.isAdmin && item.UnmetTaints.length" ng-show="item.Expanded" ng-style="{ background: item.Highlighted ? '#d5e8f3' : '#f5f5f5' }">
+            <tr
+              ng-if="!$ctrl.isAdmin && item.UnmetTaints.length"
+              ng-show="item.Expanded"
+              ng-style="{ background: item.Highlighted ? 'var(--bg-item-highlighted-color)' : 'var(--bg-item-highlighted-null-color)' }"
+            >
               <td colspan="2">
                 Placement constraint not respected for that node.
               </td>
@@ -110,7 +119,7 @@
               ng-if="$ctrl.isAdmin"
               ng-show="item.Expanded"
               ng-repeat="label in item.UnmatchedNodeSelectorLabels"
-              ng-style="{ background: item.Highlighted ? '#d5e8f3' : '#f5f5f5' }"
+              ng-style="{ background: item.Highlighted ? 'var(--bg-item-highlighted-color)' : 'var(--bg-item-highlighted-null-color)' }"
             >
               <td colspan="2">
                 This application can only be scheduled on a node where the label <code>{{ label.key }}</code> is set to <code>{{ label.value }}</code>
@@ -121,7 +130,7 @@
             <tr
               ng-if="!$ctrl.isAdmin && (item.UnmatchedNodeSelectorLabels.length || item.UnmatchedNodeAffinities.length)"
               ng-show="item.Expanded"
-              ng-style="{ background: item.Highlighted ? '#d5e8f3' : '#f5f5f5' }"
+              ng-style="{ background: item.Highlighted ? 'var(--bg-item-highlighted-color)' : 'var(--bg-item-highlighted-null-color)' }"
             >
               <td colspan="2">
                 Placement label not respected for that node.
@@ -129,7 +138,11 @@
             </tr>
             <!-- ! USER + UNMET NODE SELECTOR LABELS || UNMET NODE AFFINITIES -->
             <!-- ADMIN + UNMET NODE AFFINITIES -->
-            <tr ng-if="$ctrl.isAdmin" ng-show="item.Expanded && item.UnmatchedNodeAffinities.length" ng-style="{ background: item.Highlighted ? '#d5e8f3' : '#f5f5f5' }">
+            <tr
+              ng-if="$ctrl.isAdmin"
+              ng-show="item.Expanded && item.UnmatchedNodeAffinities.length"
+              ng-style="{ background: item.Highlighted ? 'var(--bg-item-highlighted-color)' : 'var(--bg-item-highlighted-null-color)' }"
+            >
               <td colspan="2">
                 This application can only be scheduled on nodes respecting one of the following labels combination:
               </td>
@@ -139,7 +152,7 @@
               ng-if="$ctrl.isAdmin"
               ng-show="item.Expanded"
               ng-repeat="aff in item.UnmatchedNodeAffinities"
-              ng-style="{ background: item.Highlighted ? '#d5e8f3' : '#f5f5f5' }"
+              ng-style="{ background: item.Highlighted ? 'var(--bg-item-highlighted-color)' : 'var(--bg-item-highlighted-null-color)' }"
             >
               <td></td>
               <td>
diff --git a/app/kubernetes/views/resource-pools/edit/components/ingresses-datatable/template.html b/app/kubernetes/views/resource-pools/edit/components/ingresses-datatable/template.html
index ef78e3734..d86e268e1 100644
--- a/app/kubernetes/views/resource-pools/edit/components/ingresses-datatable/template.html
+++ b/app/kubernetes/views/resource-pools/edit/components/ingresses-datatable/template.html
@@ -74,7 +74,7 @@
             <tr
               dir-paginate-start="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit: $ctrl.tableKey))"
               ng-class="{ active: item.Checked }"
-              ng-style="{ background: item.Highlighted ? '#d5e8f3' : '' }"
+              ng-style="{ background: item.Highlighted ? 'var(--bg-item-highlighted-color)' : '' }"
               ng-click="$ctrl.expandItem(item, !item.Expanded)"
               pagination-id="$ctrl.tableKey"
             >
@@ -84,7 +84,12 @@
                 >{{ item.Name }}
               </td>
             </tr>
-            <tr dir-paginate-end ng-show="item.Expanded" ng-repeat="path in item.Paths" ng-style="{ background: item.Highlighted ? '#d5e8f3' : '#f5f5f5' }">
+            <tr
+              dir-paginate-end
+              ng-show="item.Expanded"
+              ng-repeat="path in item.Paths"
+              ng-style="{ background: item.Highlighted ? 'var(--bg-item-highlighted-color)' : 'var(--bg-item-highlighted-null-color)' }"
+            >
               <td>
                 <a style="margin-left: 15px;" ng-href="http://{{ path.Host ? path.Host : path.IP }}{{ path.Path }}" target="_blank">
                   {{ path.Host ? path.Host : path.IP }}{{ path.Path }}
diff --git a/app/kubernetes/views/volumes/components/volumes-storages-datatable/template.html b/app/kubernetes/views/volumes/components/volumes-storages-datatable/template.html
index b0130ab5c..3b6e24a28 100644
--- a/app/kubernetes/views/volumes/components/volumes-storages-datatable/template.html
+++ b/app/kubernetes/views/volumes/components/volumes-storages-datatable/template.html
@@ -83,7 +83,7 @@
             <tr
               dir-paginate-start="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit: $ctrl.tableKey))"
               ng-class="{ active: item.Checked }"
-              ng-style="{ background: item.Highlighted ? '#d5e8f3' : '' }"
+              ng-style="{ background: item.Highlighted ? 'var(--bg-item-highlighted-color)' : '' }"
               ng-click="$ctrl.expandItem(item, !item.Expanded)"
               pagination-id="$ctrl.tableKey"
             >
@@ -95,7 +95,12 @@
               <td>{{ item.Name }}</td>
               <td>{{ item.Size }}</td>
             </tr>
-            <tr dir-paginate-end ng-show="item.Expanded" ng-repeat="vol in item.Volumes" ng-style="{ background: item.Highlighted ? '#d5e8f3' : '#f5f5f5' }">
+            <tr
+              dir-paginate-end
+              ng-show="item.Expanded"
+              ng-repeat="vol in item.Volumes"
+              ng-style="{ background: item.Highlighted ? 'var(--bg-item-highlighted-color)' : 'var(--bg-item-highlighted-null-color)' }"
+            >
               <td></td>
               <td>
                 <a ui-sref="kubernetes.volumes.volume({ name: vol.PersistentVolumeClaim.Name, namespace: vol.PersistentVolumeClaim.Namespace })">