diff --git a/cp/resources/views/partials/js-contacts.twig b/cp/resources/views/partials/js-contacts.twig
index 171ca93..28074a9 100644
--- a/cp/resources/views/partials/js-contacts.twig
+++ b/cp/resources/views/partials/js-contacts.twig
@@ -44,20 +44,36 @@
         ajaxResponse:function(url, params, response){
             return response.records;
         },
-        layout:"fitColumns",
-        responsiveLayout: "hide",
+        layout:"fitDataFill",
+        responsiveLayout: "collapse",
+        responsiveLayoutCollapseStartOpen:false,
+        resizableColumns:false,
         columns:[
-            {title:"Identifier", field:"identifier", headerSort:true, formatter: contactLinkFormatter},
-            {title:"Email", field:"email", headerSort:true, responsive:0},
-            {title:"Phone", field:"voice", headerSort:true, responsive:0},
-            {title:"Status", field:"contact_status", formatter: statusFormatter, headerSort:false, download:false},
-            {title: "Actions", formatter: actionsFormatter, headerSort: false, download:false, hozAlign: "center", cellClick:function(e, cell){ e.stopPropagation(); }},
+            {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
+            {title:"Identifier", field:"identifier", width:200, headerSort:true, formatter: contactLinkFormatter, responsive:0},
+            {title:"Email", field:"email", width:300, minWidth:200, headerSort:true, responsive:2},
+            {title:"Phone", field:"voice", width:300, minWidth:200, headerSort:true, responsive:2},
+            {title:"Status", field:"contact_status", width:300, minWidth:200, formatter: statusFormatter, headerSort:false, download:false, responsive:2},
+            {title: "Actions", formatter: actionsFormatter, headerSort: false, download:false, hozAlign: "center", responsive:0, cellClick:function(e, cell){ e.stopPropagation(); }},
         ],
     });
     var searchInput = document.getElementById("search-input");
-        searchInput.addEventListener("input", function(){
-            table.setFilter("identifier", "like", searchInput.value);
-        });
+    searchInput.addEventListener("input", function () {
+        var term = searchInput.value.toLowerCase();
+
+        if (term) { // Only apply filter when there's a term to search for
+            table.setFilter(function (data) {
+                return (
+                    String(data.identifier).toLowerCase().includes(term) ||
+                    String(data.email).toLowerCase().includes(term) ||
+                    String(data.voice).toLowerCase().includes(term) ||
+                    String(data.contact_status).toLowerCase().includes(term)
+                );
+            });
+        } else {
+            table.clearFilter(); // Clear the filter when the search box is emptied
+        }
+    });
     });
    
     function updateRecord(id) {
diff --git a/cp/resources/views/partials/js-dash.twig b/cp/resources/views/partials/js-dash.twig
index 26ed1c6..49e6cb3 100644
--- a/cp/resources/views/partials/js-dash.twig
+++ b/cp/resources/views/partials/js-dash.twig
@@ -1,595 +1 @@
-    <script src="/assets/libs/apexcharts/dist/apexcharts.min.js" defer></script>
-    <script src="/assets/libs/jsvectormap/dist/js/jsvectormap.min.js" defer></script>
-    <script src="/assets/libs/jsvectormap/dist/maps/world.js" defer></script>
-    <script src="/assets/libs/jsvectormap/dist/maps/world-merc.js" defer></script>
-    <!-- Tabler Core -->
-    <script src="/assets/js/tabler.min.js" defer></script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-revenue-bg'), {
-      		chart: {
-      			type: "area",
-      			fontFamily: 'inherit',
-      			height: 40.0,
-      			sparkline: {
-      				enabled: true
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      		},
-      		dataLabels: {
-      			enabled: false,
-      		},
-      		fill: {
-      			opacity: .16,
-      			type: 'solid'
-      		},
-      		stroke: {
-      			width: 2,
-      			lineCap: "round",
-      			curve: "smooth",
-      		},
-      		series: [{
-      			name: "Profits",
-      			data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67]
-      		}],
-      		tooltip: {
-      			theme: 'dark'
-      		},
-      		grid: {
-      			strokeDashArray: 4,
-      		},
-      		xaxis: {
-      			labels: {
-      				padding: 0,
-      			},
-      			tooltip: {
-      				enabled: false
-      			},
-      			axisBorder: {
-      				show: false,
-      			},
-      			type: 'datetime',
-      		},
-      		yaxis: {
-      			labels: {
-      				padding: 4
-      			},
-      		},
-      		labels: [
-      			'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19'
-      		],
-      		colors: [tabler.getColor("primary")],
-      		legend: {
-      			show: false,
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-new-clients'), {
-      		chart: {
-      			type: "line",
-      			fontFamily: 'inherit',
-      			height: 40.0,
-      			sparkline: {
-      				enabled: true
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      		},
-      		fill: {
-      			opacity: 1,
-      		},
-      		stroke: {
-      			width: [2, 1],
-      			dashArray: [0, 3],
-      			lineCap: "round",
-      			curve: "smooth",
-      		},
-      		series: [{
-      			name: "May",
-      			data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 4, 46, 39, 62, 51, 35, 41, 67]
-      		},{
-      			name: "April",
-      			data: [93, 54, 51, 24, 35, 35, 31, 67, 19, 43, 28, 36, 62, 61, 27, 39, 35, 41, 27, 35, 51, 46, 62, 37, 44, 53, 41, 65, 39, 37]
-      		}],
-      		tooltip: {
-      			theme: 'dark'
-      		},
-      		grid: {
-      			strokeDashArray: 4,
-      		},
-      		xaxis: {
-      			labels: {
-      				padding: 0,
-      			},
-      			tooltip: {
-      				enabled: false
-      			},
-      			type: 'datetime',
-      		},
-      		yaxis: {
-      			labels: {
-      				padding: 4
-      			},
-      		},
-      		labels: [
-      			'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19'
-      		],
-      		colors: [tabler.getColor("primary"), tabler.getColor("gray-600")],
-      		legend: {
-      			show: false,
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-active-users'), {
-      		chart: {
-      			type: "bar",
-      			fontFamily: 'inherit',
-      			height: 40.0,
-      			sparkline: {
-      				enabled: true
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      		},
-      		plotOptions: {
-      			bar: {
-      				columnWidth: '50%',
-      			}
-      		},
-      		dataLabels: {
-      			enabled: false,
-      		},
-      		fill: {
-      			opacity: 1,
-      		},
-      		series: [{
-      			name: "Profits",
-      			data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67]
-      		}],
-      		tooltip: {
-      			theme: 'dark'
-      		},
-      		grid: {
-      			strokeDashArray: 4,
-      		},
-      		xaxis: {
-      			labels: {
-      				padding: 0,
-      			},
-      			tooltip: {
-      				enabled: false
-      			},
-      			axisBorder: {
-      				show: false,
-      			},
-      			type: 'datetime',
-      		},
-      		yaxis: {
-      			labels: {
-      				padding: 4
-      			},
-      		},
-      		labels: [
-      			'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19'
-      		],
-      		colors: [tabler.getColor("primary")],
-      		legend: {
-      			show: false,
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-mentions'), {
-      		chart: {
-      			type: "bar",
-      			fontFamily: 'inherit',
-      			height: 240,
-      			parentHeightOffset: 0,
-      			toolbar: {
-      				show: false,
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      			stacked: true,
-      		},
-      		plotOptions: {
-      			bar: {
-      				columnWidth: '50%',
-      			}
-      		},
-      		dataLabels: {
-      			enabled: false,
-      		},
-      		fill: {
-      			opacity: 1,
-      		},
-      		series: [{
-      			name: "Web",
-      			data: [1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 2, 12, 5, 8, 22, 6, 8, 6, 4, 1, 8, 24, 29, 51, 40, 47, 23, 26, 50, 26, 41, 22, 46, 47, 81, 46, 6]
-      		},{
-      			name: "Social",
-      			data: [2, 5, 4, 3, 3, 1, 4, 7, 5, 1, 2, 5, 3, 2, 6, 7, 7, 1, 5, 5, 2, 12, 4, 6, 18, 3, 5, 2, 13, 15, 20, 47, 18, 15, 11, 10, 0]
-      		},{
-      			name: "Other",
-      			data: [2, 9, 1, 7, 8, 3, 6, 5, 5, 4, 6, 4, 1, 9, 3, 6, 7, 5, 2, 8, 4, 9, 1, 2, 6, 7, 5, 1, 8, 3, 2, 3, 4, 9, 7, 1, 6]
-      		}],
-      		tooltip: {
-      			theme: 'dark'
-      		},
-      		grid: {
-      			padding: {
-      				top: -20,
-      				right: 0,
-      				left: -4,
-      				bottom: -4
-      			},
-      			strokeDashArray: 4,
-      			xaxis: {
-      				lines: {
-      					show: true
-      				}
-      			},
-      		},
-      		xaxis: {
-      			labels: {
-      				padding: 0,
-      			},
-      			tooltip: {
-      				enabled: false
-      			},
-      			axisBorder: {
-      				show: false,
-      			},
-      			type: 'datetime',
-      		},
-      		yaxis: {
-      			labels: {
-      				padding: 4
-      			},
-      		},
-      		labels: [
-      			'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19', '2020-07-20', '2020-07-21', '2020-07-22', '2020-07-23', '2020-07-24', '2020-07-25', '2020-07-26'
-      		],
-      		colors: [tabler.getColor("primary"), tabler.getColor("primary", 0.8), tabler.getColor("green", 0.8)],
-      		legend: {
-      			show: false,
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:on
-      document.addEventListener("DOMContentLoaded", function() {
-      	const map = new jsVectorMap({
-      		selector: '#map-world',
-      		map: 'world',
-      		backgroundColor: 'transparent',
-      		regionStyle: {
-      			initial: {
-      				fill: tabler.getColor('body-bg'),
-      				stroke: tabler.getColor('border-color'),
-      				strokeWidth: 2,
-      			}
-      		},
-      		zoomOnScroll: false,
-      		zoomButtons: false,
-      		// -------- Series --------
-      		visualizeData: {
-      			scale: [tabler.getColor('bg-surface'), tabler.getColor('primary')],
-      			values: { "AF": 16, "AL": 11, "DZ": 158, "AO": 85, "AG": 1, "AR": 351, "AM": 8, "AU": 1219, "AT": 366, "AZ": 52, "BS": 7, "BH": 21, "BD": 105, "BB": 3, "BY": 52, "BE": 461, "BZ": 1, "BJ": 6, "BT": 1, "BO": 19, "BA": 16, "BW": 12, "BR": 2023, "BN": 11, "BG": 44, "BF": 8, "BI": 1, "KH": 11, "CM": 21, "CA": 1563, "CV": 1, "CF": 2, "TD": 7, "CL": 199, "CN": 5745, "CO": 283, "KM": 0, "CD": 12, "CG": 11, "CR": 35, "CI": 22, "HR": 59, "CY": 22, "CZ": 195, "DK": 304, "DJ": 1, "DM": 0, "DO": 50, "EC": 61, "EG": 216, "SV": 21, "GQ": 14, "ER": 2, "EE": 19, "ET": 30, "FJ": 3, "FI": 231, "FR": 2555, "GA": 12, "GM": 1, "GE": 11, "DE": 3305, "GH": 18, "GR": 305, "GD": 0, "GT": 40, "GN": 4, "GW": 0, "GY": 2, "HT": 6, "HN": 15, "HK": 226, "HU": 132, "IS": 12, "IN": 1430, "ID": 695, "IR": 337, "IQ": 84, "IE": 204, "IL": 201, "IT": 2036, "JM": 13, "JP": 5390, "JO": 27, "KZ": 129, "KE": 32, "KI": 0, "KR": 986, "KW": 117, "KG": 4, "LA": 6, "LV": 23, "LB": 39, "LS": 1, "LR": 0, "LY": 77, "LT": 35, "LU": 52, "MK": 9, "MG": 8, "MW": 5, "MY": 218, "MV": 1, "ML": 9, "MT": 7, "MR": 3, "MU": 9, "MX": 1004, "MD": 5, "MN": 5, "ME": 3, "MA": 91, "MZ": 10, "MM": 35, "NA": 11, "NP": 15, "NL": 770, "NZ": 138, "NI": 6, "NE": 5, "NG": 206, "NO": 413, "OM": 53, "PK": 174, "PA": 27, "PG": 8, "PY": 17, "PE": 153, "PH": 189, "PL": 438, "PT": 223, "QA": 126, "RO": 158, "RU": 1476, "RW": 5, "WS": 0, "ST": 0, "SA": 434, "SN": 12, "RS": 38, "SC": 0, "SL": 1, "SG": 217, "SK": 86, "SI": 46, "SB": 0, "ZA": 354, "ES": 1374, "LK": 48, "KN": 0, "LC": 1, "VC": 0, "SD": 65, "SR": 3, "SZ": 3, "SE": 444, "CH": 522, "SY": 59, "TW": 426, "TJ": 5, "TZ": 22, "TH": 312, "TL": 0, "TG": 3, "TO": 0, "TT": 21, "TN": 43, "TR": 729, "TM": 0, "UG": 17, "UA": 136, "AE": 239, "GB": 2258, "US": 4624, "UY": 40, "UZ": 37, "VU": 0, "VE": 285, "VN": 101, "YE": 30, "ZM": 15, "ZW": 5 },
-      		},
-      	});
-      	window.addEventListener("resize", () => {
-      		map.updateSize();
-      	});
-      });
-      // @formatter:off
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-activity'), {
-      		chart: {
-      			type: "radialBar",
-      			fontFamily: 'inherit',
-      			height: 40,
-      			width: 40,
-      			animations: {
-      				enabled: false
-      			},
-      			sparkline: {
-      				enabled: true
-      			},
-      		},
-      		tooltip: {
-      			enabled: false,
-      		},
-      		plotOptions: {
-      			radialBar: {
-      				hollow: {
-      					margin: 0,
-      					size: '75%'
-      				},
-      				track: {
-      					margin: 0
-      				},
-      				dataLabels: {
-      					show: false
-      				}
-      			}
-      		},
-      		colors: [tabler.getColor("blue")],
-      		series: [35],
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-development-activity'), {
-      		chart: {
-      			type: "area",
-      			fontFamily: 'inherit',
-      			height: 192,
-      			sparkline: {
-      				enabled: true
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      		},
-      		dataLabels: {
-      			enabled: false,
-      		},
-      		fill: {
-      			opacity: .16,
-      			type: 'solid'
-      		},
-      		stroke: {
-      			width: 2,
-      			lineCap: "round",
-      			curve: "smooth",
-      		},
-      		series: [{
-      			name: "Purchases",
-      			data: [3, 5, 4, 6, 7, 5, 6, 8, 24, 7, 12, 5, 6, 3, 8, 4, 14, 30, 17, 19, 15, 14, 25, 32, 40, 55, 60, 48, 52, 70]
-      		}],
-      		tooltip: {
-      			theme: 'dark'
-      		},
-      		grid: {
-      			strokeDashArray: 4,
-      		},
-      		xaxis: {
-      			labels: {
-      				padding: 0,
-      			},
-      			tooltip: {
-      				enabled: false
-      			},
-      			axisBorder: {
-      				show: false,
-      			},
-      			type: 'datetime',
-      		},
-      		yaxis: {
-      			labels: {
-      				padding: 4
-      			},
-      		},
-      		labels: [
-      			'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19'
-      		],
-      		colors: [tabler.getColor("primary")],
-      		legend: {
-      			show: false,
-      		},
-      		point: {
-      			show: false
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-1'), {
-      		chart: {
-      			type: "line",
-      			fontFamily: 'inherit',
-      			height: 24,
-      			animations: {
-      				enabled: false
-      			},
-      			sparkline: {
-      				enabled: true
-      			},
-      		},
-      		tooltip: {
-      			enabled: false,
-      		},
-      		stroke: {
-      			width: 2,
-      			lineCap: "round",
-      		},
-      		series: [{
-      			color: tabler.getColor("primary"),
-      			data: [17, 24, 20, 10, 5, 1, 4, 18, 13]
-      		}],
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-2'), {
-      		chart: {
-      			type: "line",
-      			fontFamily: 'inherit',
-      			height: 24,
-      			animations: {
-      				enabled: false
-      			},
-      			sparkline: {
-      				enabled: true
-      			},
-      		},
-      		tooltip: {
-      			enabled: false,
-      		},
-      		stroke: {
-      			width: 2,
-      			lineCap: "round",
-      		},
-      		series: [{
-      			color: tabler.getColor("primary"),
-      			data: [13, 11, 19, 22, 12, 7, 14, 3, 21]
-      		}],
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-3'), {
-      		chart: {
-      			type: "line",
-      			fontFamily: 'inherit',
-      			height: 24,
-      			animations: {
-      				enabled: false
-      			},
-      			sparkline: {
-      				enabled: true
-      			},
-      		},
-      		tooltip: {
-      			enabled: false,
-      		},
-      		stroke: {
-      			width: 2,
-      			lineCap: "round",
-      		},
-      		series: [{
-      			color: tabler.getColor("primary"),
-      			data: [10, 13, 10, 4, 17, 3, 23, 22, 19]
-      		}],
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-4'), {
-      		chart: {
-      			type: "line",
-      			fontFamily: 'inherit',
-      			height: 24,
-      			animations: {
-      				enabled: false
-      			},
-      			sparkline: {
-      				enabled: true
-      			},
-      		},
-      		tooltip: {
-      			enabled: false,
-      		},
-      		stroke: {
-      			width: 2,
-      			lineCap: "round",
-      		},
-      		series: [{
-      			color: tabler.getColor("primary"),
-      			data: [6, 15, 13, 13, 5, 7, 17, 20, 19]
-      		}],
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-5'), {
-      		chart: {
-      			type: "line",
-      			fontFamily: 'inherit',
-      			height: 24,
-      			animations: {
-      				enabled: false
-      			},
-      			sparkline: {
-      				enabled: true
-      			},
-      		},
-      		tooltip: {
-      			enabled: false,
-      		},
-      		stroke: {
-      			width: 2,
-      			lineCap: "round",
-      		},
-      		series: [{
-      			color: tabler.getColor("primary"),
-      			data: [2, 11, 15, 14, 21, 20, 8, 23, 18, 14]
-      		}],
-      	})).render();
-      });
-      // @formatter:on
-    </script>
-    <script>
-      // @formatter:off
-      document.addEventListener("DOMContentLoaded", function () {
-      	window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-6'), {
-      		chart: {
-      			type: "line",
-      			fontFamily: 'inherit',
-      			height: 24,
-      			animations: {
-      				enabled: false
-      			},
-      			sparkline: {
-      				enabled: true
-      			},
-      		},
-      		tooltip: {
-      			enabled: false,
-      		},
-      		stroke: {
-      			width: 2,
-      			lineCap: "round",
-      		},
-      		series: [{
-      			color: tabler.getColor("primary"),
-      			data: [22, 12, 7, 14, 3, 21, 8, 23, 18, 14]
-      		}],
-      	})).render();
-      });
-      // @formatter:on
-    </script>
+<script src="/assets/js/tabler.min.js" defer></script>
\ No newline at end of file
diff --git a/cp/resources/views/partials/js-domains.twig b/cp/resources/views/partials/js-domains.twig
index f8782bd..e19f9af 100644
--- a/cp/resources/views/partials/js-domains.twig
+++ b/cp/resources/views/partials/js-domains.twig
@@ -48,22 +48,36 @@
         ajaxResponse:function(url, params, response){
             return response.records;
         },
-        layout:"fitColumns",
-        responsiveLayout: "hide",
+        layout:"fitDataFill",
+        responsiveLayout: "collapse",
+        responsiveLayoutCollapseStartOpen:false,
+        resizableColumns:false,
         columns:[
-            {title:"Name", field:"name", headerSort:true, formatter: domainLinkFormatter},
-            {title:"Registrant", field:"registrant.identifier", headerSort:true, responsive:0},
-            {title:"Creation Date", field:"crdate", headerSort:true, responsive:0},
-            {title:"Expiration Date", field:"exdate", headerSort:true},
-            {title:"Status", field:"domain_status", formatter: statusFormatter, headerSort:false, download:false},
-            {title: "Actions", formatter: actionsFormatter, headerSort: false, download:false, hozAlign: "center", cellClick:function(e, cell){ e.stopPropagation(); }},
+            {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
+            {title:"Name", field:"name", width:150, headerSort:true, formatter: domainLinkFormatter, responsive:0},
+            {title:"Registrant", width:200, field:"registrant.identifier", headerSort:true, responsive:2},
+            {title:"Creation Date", width:250, field:"crdate", headerSort:true, responsive:2},
+            {title:"Expiration Date", width:250, field:"exdate", headerSort:true, responsive:2},
+            {title:"Status", width:200, field:"domain_status", formatter: statusFormatter, headerSort:false, download:false, responsive:2},
+            {title: "Actions", formatter: actionsFormatter, headerSort: false, download:false, hozAlign: "center", responsive:0, cellClick:function(e, cell){ e.stopPropagation(); }},
         ],
     });
     var searchInput = document.getElementById("search-input");
-        searchInput.addEventListener("input", function(){
-            table.setFilter("name", "like", searchInput.value);
+    searchInput.addEventListener("input", function () {
+        var term = searchInput.value;
+
+        table.setFilter(function (data) {
+            // Convert data fields to strings and check if they include the term
+            return (
+                String(data.name).toLowerCase().includes(term.toLowerCase()) ||
+                String(data['registrant.identifier']).toLowerCase().includes(term.toLowerCase()) ||
+                String(data.crdate).toLowerCase().includes(term.toLowerCase()) ||
+                String(data.exdate).toLowerCase().includes(term.toLowerCase()) ||
+                String(data.domain_status).toLowerCase().includes(term.toLowerCase())
+            );
         });
     });
+    });
    
     function updateRecord(id) {
         console.log("Updating record with ID: " + id);
diff --git a/cp/resources/views/partials/js-hosts.twig b/cp/resources/views/partials/js-hosts.twig
index 0bb52c9..b27cbef 100644
--- a/cp/resources/views/partials/js-hosts.twig
+++ b/cp/resources/views/partials/js-hosts.twig
@@ -44,19 +44,34 @@
         ajaxResponse:function(url, params, response){
             return response.records;
         },
-        layout:"fitColumns",
-        responsiveLayout: "hide",
+        layout:"fitDataFill",
+        responsiveLayout: "collapse",
+        responsiveLayoutCollapseStartOpen:false,
+        resizableColumns:false,
         columns:[
-            {title:"Name", field:"name", headerSort:true, formatter: hostLinkFormatter},
-            {title:"Creation Date", field:"crdate", headerSort:true, responsive:0},
-            {title:"Status", field:"host_status", formatter: statusFormatter, headerSort:false, download:false},
-            {title: "Actions", formatter: actionsFormatter, headerSort: false, download:false, hozAlign: "center", cellClick:function(e, cell){ e.stopPropagation(); }},
+            {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
+            {title:"Name", field:"name", width:200, headerSort:true, formatter: hostLinkFormatter, responsive:0},
+            {title:"Creation Date", field:"crdate", width:300, minWidth:200, headerSort:true, responsive:2},
+            {title:"Status", field:"host_status", width:300, minWidth:200, formatter: statusFormatter, headerSort:false, download:false, responsive:2},
+            {title: "Actions", formatter: actionsFormatter, headerSort: false, download:false, hozAlign: "center", responsive:0, cellClick:function(e, cell){ e.stopPropagation(); }},
         ],
     });
     var searchInput = document.getElementById("search-input");
-        searchInput.addEventListener("input", function(){
-            table.setFilter("identifier", "like", searchInput.value);
-        });
+    searchInput.addEventListener("input", function () {
+        var term = searchInput.value.toLowerCase();
+
+        if (term) { // Only apply filter when there's a term to search for
+            table.setFilter(function (data) {
+                return (
+                    String(data.name).toLowerCase().includes(term) ||
+                    String(data.crdate).toLowerCase().includes(term) ||
+                    String(data.host_status).toLowerCase().includes(term)
+                );
+            });
+        } else {
+            table.clearFilter(); // Clear the filter when the search box is emptied
+        }
+    });
     });
    
     function updateRecord(id) {
diff --git a/cp/resources/views/partials/js-logs.twig b/cp/resources/views/partials/js-logs.twig
index 4a369e9..b06213f 100644
--- a/cp/resources/views/partials/js-logs.twig
+++ b/cp/resources/views/partials/js-logs.twig
@@ -15,27 +15,49 @@
         ajaxResponse:function(url, params, response){
             return response.records;
         },
-        layout:"fitColumns",
-        responsiveLayout: "hide",
+        layout:"fitDataFill",
+        responsiveLayout: "collapse",
+        responsiveLayoutCollapseStartOpen:false,
+        resizableColumns:false,
         initialSort:[
             {column:"cldate", dir:"desc"}, // sorting by the "cldate" field in descending order
         ],
         columns:[
-            {title:"Date", field:"cldate", headerSort:true},
-            {title:"Registrar", field:"registrar_id", headerSort:true},
+            {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
+            {title:"Date", field:"cldate", headerSort:true, responsive:0},
+            {title:"Registrar", field:"registrar_id", headerSort:true, responsive:2},
             {title:"Command", field:"cmd", headerSort:true, responsive:0},
             {title:"Object Type", field:"obj_type", headerSort:true, responsive:0},
-            {title:"Object", field:"obj_id", headerSort:true, responsive:0},
-            {title:"Result", field:"code", headerSort:true},
-            {title:"Message", field:"msg", headerSort:true, responsive:0, download:false},
-            {title:"clTRID", field:"clTRID", headerSort:true, responsive:0, download:false},
-            {title:"Milliseconds", field:"svmicrosecond", headerSort:false, download:false},
+            {title:"Object", field:"obj_id", headerSort:true, responsive:2},
+            {title:"Result", field:"code", headerSort:true, responsive:2},
+            {title:"Message", field:"msg", headerSort:true, responsive:2, download:false},
+            {title:"clTRID", field:"clTRID", headerSort:true, responsive:2, download:false},
+            {title:"Milliseconds", field:"svmicrosecond", headerSort:false, download:false, responsive:2},
         ],
     });
     var searchInput = document.getElementById("search-input");
-        searchInput.addEventListener("input", function(){
-            table.setFilter("cmd", "like", searchInput.value);
-        });
+    searchInput.addEventListener("input", function () {
+        var term = searchInput.value.toLowerCase();
+
+        if (term) { // Only apply the filter when there's a term to search for
+            table.setFilter(function (data) {
+                // Check if any of the fields contain the search term
+                return (
+                    String(data.cldate).toLowerCase().includes(term) ||
+                    String(data.registrar_id).toLowerCase().includes(term) ||
+                    String(data.cmd).toLowerCase().includes(term) ||
+                    String(data.obj_type).toLowerCase().includes(term) ||
+                    String(data.obj_id).toLowerCase().includes(term) ||
+                    String(data.code).toLowerCase().includes(term) ||
+                    String(data.msg).toLowerCase().includes(term) ||
+                    String(data.clTRID).toLowerCase().includes(term) ||
+                    String(data.svmicrosecond).toLowerCase().includes(term)
+                );
+            });
+        } else {
+            table.clearFilter(); // Clear the filter when the search box is emptied
+        }
+    });
     });
    
     function downloadCSV() {
diff --git a/cp/resources/views/partials/js-overview.twig b/cp/resources/views/partials/js-overview.twig
index 17ab94c..52967b5 100644
--- a/cp/resources/views/partials/js-overview.twig
+++ b/cp/resources/views/partials/js-overview.twig
@@ -6,30 +6,48 @@
 <script>
     var table;
     document.addEventListener("DOMContentLoaded", function(){
+
     table = new Tabulator("#overviewTable", {
-        ajaxURL:"/api/records/payment_history", // Set the URL for your JSON data
+        ajaxURL:"/api/records/payment_history?join=registrar", // Set the URL for your JSON data
         ajaxConfig:"GET",
         pagination:"local",
         paginationSize:10,
         ajaxResponse:function(url, params, response){
             return response.records;
         },
-        layout:"fitColumns",
-        responsiveLayout: "hide",
+        layout:"fitDataFill",
+        responsiveLayout: "collapse",
+        responsiveLayoutCollapseStartOpen:false,
+        resizableColumns:false,
         initialSort:[
             {column:"date", dir:"desc"},
         ],
         columns:[
-            {title:"Registrar", field:"registrar_id", headerSort:true},
-            {title:"Date", field:"date", headerSort:true, responsive:0},
-            {title:"Description", field:"description", headerSort:true, responsive:0},
-            {title:"Amount", field:"amount", headerSort:true, download:false},
+            {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
+            {title:"Registrar", field:"registrar_id.name", headerSort:true, responsive:0},
+            {title:"Date", field:"date", headerSort:true, responsive:2},
+            {title:"Description", field:"description", headerSort:true, responsive:2},
+            {title:"Amount", field:"amount", headerSort:true, download:false, responsive:0},
         ],
     });
     var searchInput = document.getElementById("search-input");
-        searchInput.addEventListener("input", function(){
-            table.setFilter("description", "like", searchInput.value);
-        });
+    searchInput.addEventListener("input", function () {
+        var term = searchInput.value.toLowerCase();
+
+        if (term) { // Only apply the filter when there's a term to search for
+            table.setFilter(function (data) {
+                // Check if any of the fields contain the search term
+                return (
+                    String(data.registrar_id.name).toLowerCase().includes(term) ||
+                    String(data.date).toLowerCase().includes(term) ||
+                    String(data.description).toLowerCase().includes(term) ||
+                    String(data.amount).toString().toLowerCase().includes(term)
+                );
+            });
+        } else {
+            table.clearFilter(); // Clear the filter when the search box is emptied
+        }
+    });
     });
    
     function downloadCSV() {
diff --git a/cp/resources/views/partials/js-registrars.twig b/cp/resources/views/partials/js-registrars.twig
index abf6b13..24ab949 100644
--- a/cp/resources/views/partials/js-registrars.twig
+++ b/cp/resources/views/partials/js-registrars.twig
@@ -44,20 +44,36 @@
         ajaxResponse:function(url, params, response){
             return response.records;
         },
-        layout:"fitColumns",
-        responsiveLayout: "hide",
+        layout:"fitDataFill",
+        responsiveLayout: "collapse",
+        responsiveLayoutCollapseStartOpen:false,
+        resizableColumns:false,
         columns:[
-            {title:"Name", field:"name", headerSort:true, formatter: registrarLinkFormatter},
-            {title:"IANA ID", field:"iana_id", headerSort:true, responsive:0},
-            {title:"Email", field:"email", headerSort:true, responsive:0},
-            {title:"Balance", field:"accountBalance", headerSort:false, download:false},
-            {title: "Actions", formatter: actionsFormatter, headerSort: false, download:false, hozAlign: "center", cellClick:function(e, cell){ e.stopPropagation(); }},
+            {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
+            {title:"Name", field:"name", width:200, headerSort:true, formatter: registrarLinkFormatter, responsive:0},
+            {title:"IANA ID", field:"iana_id", width:300, headerSort:true, responsive:2},
+            {title:"Email", field:"email", width:300, headerSort:true, responsive:2},
+            {title:"Balance", field:"accountBalance", width:300, headerSort:false, download:false, responsive:2},
+            {title: "Actions", formatter: actionsFormatter, responsive:0, headerSort: false, download:false, hozAlign: "center", cellClick:function(e, cell){ e.stopPropagation(); }},
         ],
     });
     var searchInput = document.getElementById("search-input");
-        searchInput.addEventListener("input", function(){
-            table.setFilter("name", "like", searchInput.value);
-        });
+    searchInput.addEventListener("input", function () {
+        var term = searchInput.value.toLowerCase();
+
+        if (term) { // Only apply filter when there's a term to search for
+            table.setFilter(function (data) {
+                return (
+                    String(data.name).toLowerCase().includes(term) ||
+                    String(data.iana_id).toLowerCase().includes(term) ||
+                    String(data.email).toLowerCase().includes(term) ||
+                    String(data.accountBalance).toString().toLowerCase().includes(term)
+                );
+            });
+        } else {
+            table.clearFilter(); // Clear the filter when the search box is emptied
+        }
+    });
     });
    
     function updateRecord(id) {
diff --git a/cp/resources/views/partials/js-reports.twig b/cp/resources/views/partials/js-reports.twig
index 1054817..c5759da 100644
--- a/cp/resources/views/partials/js-reports.twig
+++ b/cp/resources/views/partials/js-reports.twig
@@ -15,25 +15,45 @@
         ajaxResponse:function(url, params, response){
             return response.records;
         },
-        layout:"fitColumns",
-        responsiveLayout: "hide",
+        layout:"fitDataFill",
+        responsiveLayout: "collapse",
+        responsiveLayoutCollapseStartOpen:false,
+        resizableColumns:false,
         initialSort:[
             {column:"date", dir:"desc"},
         ],
         columns:[
-            {title:"Date", field:"date", headerSort:true},
-            {title:"Total Domains", field:"total_domains", headerSort:true},
-            {title:"Created Domains", field:"created_domains", headerSort:true, responsive:0},
-            {title:"Renewed Domains", field:"renewed_domains", headerSort:true, responsive:0},
-            {title:"Transferred Domains", field:"transfered_domains", headerSort:true, responsive:0},
-            {title:"Deleted Domains", field:"deleted_domains", headerSort:true},
-            {title:"Restored Domains", field:"restored_domains", headerSort:true, responsive:0, download:false}
+            {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
+            {title:"Date", field:"date", headerSort:true, responsive:0},
+            {title:"Total Domains", field:"total_domains", headerSort:true, responsive:0},
+            {title:"Created Domains", field:"created_domains", headerSort:true, responsive:2},
+            {title:"Renewed Domains", field:"renewed_domains", headerSort:true, responsive:2},
+            {title:"Transferred Domains", field:"transfered_domains", headerSort:true, responsive:2},
+            {title:"Deleted Domains", field:"deleted_domains", headerSort:true, responsive:2},
+            {title:"Restored Domains", field:"restored_domains", headerSort:true, responsive:2, download:false}
         ],
     });
     var searchInput = document.getElementById("search-input");
-        searchInput.addEventListener("input", function(){
-            table.setFilter("date", "like", searchInput.value);
-        });
+    searchInput.addEventListener("input", function () {
+        var term = searchInput.value.toLowerCase();
+
+        if (term) { // Only apply the filter when there's a term to search for
+            table.setFilter(function (data) {
+                // Check if any of the fields contain the search term
+                return (
+                    String(data.date).toLowerCase().includes(term) ||
+                    data.total_domains.toString().includes(term) ||
+                    data.created_domains.toString().includes(term) ||
+                    data.renewed_domains.toString().includes(term) ||
+                    data.transfered_domains.toString().includes(term) ||
+                    data.deleted_domains.toString().includes(term) ||
+                    data.restored_domains.toString().includes(term)
+                );
+            });
+        } else {
+            table.clearFilter(); // Clear the filter when the search box is emptied
+        }
+    });
     });
    
     function downloadCSV() {
diff --git a/cp/resources/views/partials/js-transactions.twig b/cp/resources/views/partials/js-transactions.twig
index c7b4122..186d17e 100644
--- a/cp/resources/views/partials/js-transactions.twig
+++ b/cp/resources/views/partials/js-transactions.twig
@@ -6,34 +6,56 @@
 <script>
     var table;
     document.addEventListener("DOMContentLoaded", function(){
+
     table = new Tabulator("#transactionTable", {
-        ajaxURL:"/api/records/statement", // Set the URL for your JSON data
+        ajaxURL:"/api/records/statement?join=registrar", // Set the URL for your JSON data
         ajaxConfig:"GET",
         pagination:"local",
         paginationSize:10,
         ajaxResponse:function(url, params, response){
             return response.records;
         },
-        layout:"fitColumns",
-        responsiveLayout: "hide",
+        layout:"fitDataFill",
+        responsiveLayout: "collapse",
+        responsiveLayoutCollapseStartOpen:false,
+        resizableColumns:false,
         initialSort:[
             {column:"date", dir:"desc"},
         ],
         columns:[
-            {title:"Registrar", field:"registrar_id", headerSort:true},
-            {title:"Date", field:"date", headerSort:true, responsive:0},
-            {title:"Command", field:"command", headerSort:true, responsive:0},
-            {title:"Domain", field:"domain_name", headerSort:false, download:false},
-            {title:"Length", field:"length_in_months", headerSort:true},
-            {title:"From", field:"from", headerSort:true, responsive:0},
-            {title:"To", field:"to", headerSort:true, responsive:0},
-            {title:"Amount", field:"amount", headerSort:false, download:false},
+            {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
+            {title:"Registrar", field:"registrar_id.name", headerSort:true, responsive:0},
+            {title:"Date", field:"date", headerSort:true, responsive:2},
+            {title:"Command", field:"command", headerSort:true, responsive:2},
+            {title:"Domain", field:"domain_name", headerSort:false, download:false, responsive:0},
+            {title:"Length", field:"length_in_months", headerSort:true, responsive:2},
+            {title:"From", field:"from", headerSort:true, responsive:2},
+            {title:"To", field:"to", headerSort:true, responsive:2},
+            {title:"Amount", field:"amount", headerSort:false, download:false, responsive:2},
         ],
     });
     var searchInput = document.getElementById("search-input");
-        searchInput.addEventListener("input", function(){
-            table.setFilter("command", "like", searchInput.value);
-        });
+    searchInput.addEventListener("input", function () {
+        var term = searchInput.value.toLowerCase();
+
+        if (term) { // Only apply the filter when there's a term to search for
+            table.setFilter(function (data) {
+                // Check if any of the fields contain the search term
+                return (
+                    String(data.registrar_id.name).toLowerCase().includes(term) ||
+                    String(data.date).toLowerCase().includes(term) ||
+                    String(data.command).toLowerCase().includes(term) ||
+                    String(data.domain_name).toLowerCase().includes(term) ||
+                    String(data.length_in_months).toString().toLowerCase().includes(term) ||
+                    String(data.from).toLowerCase().includes(term) ||
+                    String(data.to).toLowerCase().includes(term) ||
+                    String(data.amount).toString().toLowerCase().includes(term)
+                );
+            });
+        } else {
+            table.clearFilter(); // Clear the filter when the search box is emptied
+        }
+    });
     });
    
     function downloadCSV() {
diff --git a/cp/resources/views/partials/js-transfers.twig b/cp/resources/views/partials/js-transfers.twig
index f7c9d37..317f4aa 100644
--- a/cp/resources/views/partials/js-transfers.twig
+++ b/cp/resources/views/partials/js-transfers.twig
@@ -32,20 +32,40 @@
         ajaxResponse:function(url, params, response){
             return response.records;
         },
-        layout:"fitColumns",
-        responsiveLayout: "hide",
+        layout:"fitDataFill",
+        responsiveLayout: "collapse",
+        responsiveLayoutCollapseStartOpen:false,
+        resizableColumns:false,
         columns:[
-            {title:"Name", field:"name", headerSort:true},
-            {title:"Registrant", field:"registrant", headerSort:true, responsive:0},
-            {title:"Phone", field:"trdate", headerSort:true, responsive:0},
-            {title:"Status", field:"trstatus", headerSort:false, download:false},
-            {title: "Actions", formatter: actionsFormatter, headerSort: false, download:false, hozAlign: "center", cellClick:function(e, cell){ e.stopPropagation(); }},
+            {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
+            {title:"Name", field:"name", headerSort:true, responsive:0},
+            {title:"Registrant", field:"registrant", headerSort:true, responsive:2},
+            {title:"Phone", field:"trdate", headerSort:true, responsive:2},
+            {title:"Status", field:"trstatus", headerSort:false, download:false, responsive:2},
+            {title: "Actions", formatter: actionsFormatter, headerSort: false, download:false, hozAlign: "center", responsive:0, cellClick:function(e, cell){ e.stopPropagation(); }},
         ],
+        placeholder:function(){
+            return this.getHeaderFilters().length ? "No Matching Data" : "No Data"; //set placeholder based on if there are currently any header filters
+        }
     });
     var searchInput = document.getElementById("search-input");
-        searchInput.addEventListener("input", function(){
-            table.setFilter("identifier", "like", searchInput.value);
-        });
+    searchInput.addEventListener("input", function () {
+        var term = searchInput.value.toLowerCase();
+
+        if (term) { // Only apply the filter when there's a term to search for
+            table.setFilter(function (data) {
+                // Check if any of the fields contain the search term
+                return (
+                    String(data.name).toLowerCase().includes(term) ||
+                    String(data.registrant).toLowerCase().includes(term) ||
+                    String(data.trdate).toLowerCase().includes(term) ||
+                    String(data.trstatus).toLowerCase().includes(term)
+                );
+            });
+        } else {
+            table.clearFilter(); // Clear the filter when the search box is emptied
+        }
+    });
     });
    
     function updateRecord(id) {