diff --git a/app/call_forward/resources/dashboard/call_forward.php b/app/call_forward/resources/dashboard/call_forward.php
index fd41ee96ad..e713081ac5 100644
--- a/app/call_forward/resources/dashboard/call_forward.php
+++ b/app/call_forward/resources/dashboard/call_forward.php
@@ -102,12 +102,12 @@
 //begin widget
 	echo "<div class='hud_box'>\n";
 
-	echo "	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 13px; background-color: ".$dashboard_number_background_color.";' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_call_forward_details').slideToggle('fast');\"").">\n";
-	echo "		<span class='hud_title' style='background-color: ".$dashboard_heading_background_color."; color: ".$dashboard_heading_text_color.";'>".$text['header-call_forward']."</span>\n";
+	echo "	<div class='hud_container' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_call_forward_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_name."')\"").">\n";
+	echo "		<span class='hud_title'>".$text['header-call_forward']."</span>\n";
 
 //doughnut chart
 	if ($dashboard_chart_type == "doughnut") {
-		echo "<div style='width: 275px; height: 150px; padding-top: 7px'><canvas id='call_forward_chart'></canvas></div>\n";
+		echo "<div class='hud_chart' style='width: 275px;'><canvas id='call_forward_chart'></canvas></div>\n";
 
 		echo "<script>\n";
 		echo "	const call_forward_chart = new Chart(\n";
@@ -192,62 +192,64 @@
 		echo "</script>\n";
 	}
 	if ($dashboard_chart_type == "none") {
-		echo "	<span class='hud_stat' style='color: ".$dashboard_number_text_color."; padding-bottom: 27px;'>".$stats['call_forward']."</span>";
+		echo "	<span class='hud_stat'>".$stats['call_forward']."</span>";
 	}
 	echo "	</div>\n";
 
 //details
-	echo "<div class='hud_details hud_box' id='hud_call_forward_details'>";
-	echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";
-	echo "<tr style='position: -webkit-sticky; position: sticky; z-index: 5; top: 0;'>\n";
-	echo "<th class='hud_heading'><a href='".$extension_link."'>".$text['label-extension']."</a></th>\n";
-	if (permission_exists('call_forward')) {
-		echo "	<th class='hud_heading' style='text-align: center;'><a href='".$call_forward_link."'>".$text['label-call_forward']."</a></th>\n";
-	}
-	if (permission_exists('follow_me')) {
-		echo "	<th class='hud_heading' style='text-align: center;'><a href='".$call_forward_link."'>".$text['label-follow_me']."</a></th>\n";
-	}
-	if (permission_exists('do_not_disturb')) {
-		echo "	<th class='hud_heading' style='text-align: center;'><a href='".$call_forward_link."'>".$text['label-dnd']."</a></th>\n";
-	}
-	echo "</tr>\n";
-	if (is_array($extensions) && @sizeof($extensions) != 0) {
-		foreach ($extensions as $row) {
-			$tr_link = PROJECT_PATH."/app/call_forward/call_forward_edit.php?id=".$row['extension_uuid'];
-			echo "<tr href='".$tr_link."'>\n";
-			echo "	<td valign='top' class='".$row_style[$c]." hud_text'><a href='".$tr_link."' title=\"".$text['button-edit']."\">".escape($row['extension'])."</a></td>\n";
-			if (permission_exists('call_forward')) {
-				echo "	<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".($row['forward_all_enabled'] == 'true' ? escape(format_phone($row['forward_all_destination'])) : '&nbsp;')."</td>\n";
-			}
-			if (permission_exists('follow_me')) {
-				//get destination count
-				$follow_me_destination_count = 0;
-				if ($row['follow_me_enabled'] == 'true' && is_uuid($row['follow_me_uuid'])) {
-					$sql = "select count(*) from v_follow_me_destinations ";
-					$sql .= "where follow_me_uuid = :follow_me_uuid ";
-					$sql .= "and domain_uuid = :domain_uuid ";
-					$parameters['follow_me_uuid'] = $row['follow_me_uuid'];
-					$parameters['domain_uuid'] = $_SESSION['domain_uuid'];
-					$database = new database;
-					$follow_me_destination_count = $database->select($sql, $parameters, 'column');
-					unset($sql, $parameters);
-				}
-				echo "	<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".($follow_me_destination_count ? $text['label-enabled'].' ('.$follow_me_destination_count.')' : '&nbsp;')."</td>\n";
-			}
-			if (permission_exists('do_not_disturb')) {
-				echo "	<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".($row['do_not_disturb'] == 'true' ? $text['label-enabled'] : '&nbsp;')."</td>\n";
-			}
-			echo "</tr>\n";
-			$c = ($c) ? 0 : 1;
+	if ($dashboard_details_state != 'disabled') {
+		echo "<div class='hud_details hud_box' id='hud_call_forward_details'>";
+		echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";
+		echo "<tr style='position: -webkit-sticky; position: sticky; z-index: 5; top: 0;'>\n";
+		echo "<th class='hud_heading'><a href='".$extension_link."'>".$text['label-extension']."</a></th>\n";
+		if (permission_exists('call_forward')) {
+			echo "	<th class='hud_heading' style='text-align: center;'><a href='".$call_forward_link."'>".$text['label-call_forward']."</a></th>\n";
 		}
-		unset($extensions);
+		if (permission_exists('follow_me')) {
+			echo "	<th class='hud_heading' style='text-align: center;'><a href='".$call_forward_link."'>".$text['label-follow_me']."</a></th>\n";
+		}
+		if (permission_exists('do_not_disturb')) {
+			echo "	<th class='hud_heading' style='text-align: center;'><a href='".$call_forward_link."'>".$text['label-dnd']."</a></th>\n";
+		}
+		echo "</tr>\n";
+		if (is_array($extensions) && @sizeof($extensions) != 0) {
+			foreach ($extensions as $row) {
+				$tr_link = PROJECT_PATH."/app/call_forward/call_forward_edit.php?id=".$row['extension_uuid'];
+				echo "<tr href='".$tr_link."'>\n";
+				echo "	<td valign='top' class='".$row_style[$c]." hud_text'><a href='".$tr_link."' title=\"".$text['button-edit']."\">".escape($row['extension'])."</a></td>\n";
+				if (permission_exists('call_forward')) {
+					echo "	<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".($row['forward_all_enabled'] == 'true' ? escape(format_phone($row['forward_all_destination'])) : '&nbsp;')."</td>\n";
+				}
+				if (permission_exists('follow_me')) {
+					//get destination count
+					$follow_me_destination_count = 0;
+					if ($row['follow_me_enabled'] == 'true' && is_uuid($row['follow_me_uuid'])) {
+						$sql = "select count(*) from v_follow_me_destinations ";
+						$sql .= "where follow_me_uuid = :follow_me_uuid ";
+						$sql .= "and domain_uuid = :domain_uuid ";
+						$parameters['follow_me_uuid'] = $row['follow_me_uuid'];
+						$parameters['domain_uuid'] = $_SESSION['domain_uuid'];
+						$database = new database;
+						$follow_me_destination_count = $database->select($sql, $parameters, 'column');
+						unset($sql, $parameters);
+					}
+					echo "	<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".($follow_me_destination_count ? $text['label-enabled'].' ('.$follow_me_destination_count.')' : '&nbsp;')."</td>\n";
+				}
+				if (permission_exists('do_not_disturb')) {
+					echo "	<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".($row['do_not_disturb'] == 'true' ? $text['label-enabled'] : '&nbsp;')."</td>\n";
+				}
+				echo "</tr>\n";
+				$c = ($c) ? 0 : 1;
+			}
+			unset($extensions);
+		}
+
+		echo "</table>\n";
+		echo "</div>";
+		//$n++;
+
+		echo "<span class='hud_expander' onclick=\"$('#hud_call_forward_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_name."')\"><span class='fas fa-ellipsis-h'></span></span>\n";
 	}
-
-	echo "</table>\n";
-	echo "</div>";
-	//$n++;
-
-	echo "<span class='hud_expander' onclick=\"$('#hud_call_forward_details').slideToggle('fast');\"><span class='fas fa-ellipsis-h'></span></span>\n";
 	echo "</div>\n";
 
 ?>
diff --git a/app/domain_limits/resources/dashboard/domain_limits.php b/app/domain_limits/resources/dashboard/domain_limits.php
index db9eb6be7a..7bac4f2b3b 100644
--- a/app/domain_limits/resources/dashboard/domain_limits.php
+++ b/app/domain_limits/resources/dashboard/domain_limits.php
@@ -110,12 +110,12 @@
 				$hud_stat_title = $text['label-destinations'];
 			}
 
-			echo "	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 13px; background-color: ".$dashboard_number_background_color.";' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_domain_limits_details').slideToggle('fast');\"").">\n";
-			echo "		<span class='hud_title' style='background-color: ".$dashboard_heading_background_color."; color: ".$dashboard_heading_text_color.";'>".$text['label-domain_limits']."</span>\n";
+			echo "	<div class='hud_container' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_domain_limits_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_name."')\"").">\n";
+			echo "		<span class='hud_title'>".$text['label-domain_limits']."</span>\n";
 
 		//doughnut chart
 			if ($dashboard_chart_type == "doughnut") {
-				echo "<div style='width: 275px; height: 150px; padding-top: 7px;'><canvas id='domain_limits_chart'></canvas></div>\n";
+				echo "<div class='hud_chart' style='width: 275px';><canvas id='domain_limits_chart'></canvas></div>\n";
 
 				echo "<script>\n";
 				echo "	const domain_limits_chart = new Chart(\n";
@@ -174,72 +174,74 @@
 				echo "</script>\n";
 			}
 			if ($dashboard_chart_type == "none") {
-				echo "	<span class='hud_stat' style='color: ".$dashboard_number_text_color."; padding-bottom: 27px;'>".$hud_stat_used."</span>";
+				echo "	<span class='hud_stat'>".$hud_stat_used."</span>";
 			}
 			echo "	</div>\n";
 
 		//details
-			echo "<div class='hud_details hud_box' id='hud_domain_limits_details'>";
+			if ($dashboard_details_state != 'disabled') {
+				echo "<div class='hud_details hud_box' id='hud_domain_limits_details'>";
 
-			echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";
-			echo "<tr style='position: -webkit-sticky; position: sticky; z-index: 5; top: 0;'>\n";
-			echo "<th class='hud_heading' width='50%'>".$text['label-feature']."</th>\n";
-			echo "<th class='hud_heading' width='50%' style='text-align: center;'>".$text['label-used']."</th>\n";
-			echo "<th class='hud_heading' style='text-align: center;'>".$text['label-total']."</th>\n";
-			echo "</tr>\n";
-
-		//data
-			foreach ($_SESSION['limit'] as $category => $value) {
-				$used = $usage[$category];
-				$limit = $value['numeric'];
-				switch ($category) {
-					case 'users':
-						if (!permission_exists('user_view')) { continue 2; }
-						$url = '/core/users/users.php';
-						break;
-					case 'call_center_queues':
-						if (!permission_exists('call_center_active_view')) { continue 2; }
-						$url = '/app/call_centers/call_center_queues.php';
-						break;
-					case 'destinations':
-						if (!permission_exists('destination_view')) { continue 2; }
-						$url = '/app/destinations/destinations.php';
-						break;
-					case 'devices':
-						if (!permission_exists('device_view')) { continue 2; }
-						$url = '/app/devices/devices.php';
-						break;
-					case 'extensions':
-						if (!permission_exists('extension_view')) { continue 2; }
-						$url = '/app/extensions/extensions.php';
-						break;
-					case 'gateways':
-						if (!permission_exists('gateway_view')) { continue 2; }
-						$url = '/app/gateways/gateways.php';
-						break;
-					case 'ivr_menus':
-						if (!permission_exists('ivr_menu_view')) { continue 2; }
-						$url = '/app/ivr_menus/ivr_menus.php';
-						break;
-					case 'ring_groups':
-						if (!permission_exists('ring_group_view')) { continue 2; }
-						$url = '/app/ring_groups/ring_groups.php';
-						break;
-				}
-				$tr_link = "href='".PROJECT_PATH.$url."'";
-				echo "<tr ".$tr_link." style='cursor: pointer;'>\n";
-				echo "<td valign='top' class='".$row_style[$c]." hud_text'><a ".$tr_link.">".$text['label-'.$category]."</a></td>\n";
-				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$used."</td>\n";
-				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$limit."</td>\n";
+				echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";
+				echo "<tr style='position: -webkit-sticky; position: sticky; z-index: 5; top: 0;'>\n";
+				echo "<th class='hud_heading' width='50%'>".$text['label-feature']."</th>\n";
+				echo "<th class='hud_heading' width='50%' style='text-align: center;'>".$text['label-used']."</th>\n";
+				echo "<th class='hud_heading' style='text-align: center;'>".$text['label-total']."</th>\n";
 				echo "</tr>\n";
-				$c = ($c) ? 0 : 1;
+
+			//data
+				foreach ($_SESSION['limit'] as $category => $value) {
+					$used = $usage[$category];
+					$limit = $value['numeric'];
+					switch ($category) {
+						case 'users':
+							if (!permission_exists('user_view')) { continue 2; }
+							$url = '/core/users/users.php';
+							break;
+						case 'call_center_queues':
+							if (!permission_exists('call_center_active_view')) { continue 2; }
+							$url = '/app/call_centers/call_center_queues.php';
+							break;
+						case 'destinations':
+							if (!permission_exists('destination_view')) { continue 2; }
+							$url = '/app/destinations/destinations.php';
+							break;
+						case 'devices':
+							if (!permission_exists('device_view')) { continue 2; }
+							$url = '/app/devices/devices.php';
+							break;
+						case 'extensions':
+							if (!permission_exists('extension_view')) { continue 2; }
+							$url = '/app/extensions/extensions.php';
+							break;
+						case 'gateways':
+							if (!permission_exists('gateway_view')) { continue 2; }
+							$url = '/app/gateways/gateways.php';
+							break;
+						case 'ivr_menus':
+							if (!permission_exists('ivr_menu_view')) { continue 2; }
+							$url = '/app/ivr_menus/ivr_menus.php';
+							break;
+						case 'ring_groups':
+							if (!permission_exists('ring_group_view')) { continue 2; }
+							$url = '/app/ring_groups/ring_groups.php';
+							break;
+					}
+					$tr_link = "href='".PROJECT_PATH.$url."'";
+					echo "<tr ".$tr_link." style='cursor: pointer;'>\n";
+					echo "<td valign='top' class='".$row_style[$c]." hud_text'><a ".$tr_link.">".$text['label-'.$category]."</a></td>\n";
+					echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$used."</td>\n";
+					echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$limit."</td>\n";
+					echo "</tr>\n";
+					$c = ($c) ? 0 : 1;
+				}
+
+				echo "</table>\n";
+				echo "</div>";
+				//$n++;
+
+				echo "<span class='hud_expander' onclick=\"$('#hud_domain_limits_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_name."')\"><span class='fas fa-ellipsis-h'></span></span>";
 			}
-
-			echo "</table>\n";
-			echo "</div>";
-			//$n++;
-
-			echo "<span class='hud_expander' onclick=\"$('#hud_domain_limits_details').slideToggle('fast');\"><span class='fas fa-ellipsis-h'></span></span>";
 			echo "</div>\n";
 	}
 
diff --git a/app/extensions/resources/dashboard/caller_id.php b/app/extensions/resources/dashboard/caller_id.php
index eb1c7199f0..aa2ba1b873 100644
--- a/app/extensions/resources/dashboard/caller_id.php
+++ b/app/extensions/resources/dashboard/caller_id.php
@@ -173,12 +173,12 @@
 		//caller id
 			echo "<div class='hud_box'>\n";
 
-			echo "	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 13px; background-color: ".$dashboard_number_background_color.";' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_caller_id_details').slideToggle('fast');\"").">\n";
-			echo "		<span class='hud_title' style='background-color: ".$dashboard_heading_background_color."; color: ".$dashboard_heading_text_color.";'>".$text['label-caller_id_number']."</span>\n";
+			echo "	<div class='hud_container'  ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_caller_id_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_name."')\"").">\n";
+			echo "		<span class='hud_title'>".$text['label-caller_id_number']."</span>\n";
 
 		//doughnut chart
 			if ($dashboard_chart_type == "doughnut") {
-				echo "<div style='width: 275px; height: 150px; padding-top: 7px;'><canvas id='caller_id_chart'></canvas></div>\n";
+				echo "<div class='hud_chart' style='width: 275px;'><canvas id='caller_id_chart'></canvas></div>\n";
 
 				echo "<script>\n";
 				echo "	const caller_id_chart = new Chart(\n";
@@ -238,79 +238,81 @@
 				echo "</script>\n";
 			}
 			if ($dashboard_chart_type == "none") {
-				echo "	<span class='hud_stat' style='color: ".$dashboard_number_text_color."; padding-bottom: 27px;'>".$stats['undefined']."</span>";
+				echo "	<span class='hud_stat'>".$stats['undefined']."</span>";
 			}
 			echo "	</div>\n";
 
 		//details
-			echo "<form id='form_list_caller_id' method='post' action='".PROJECT_PATH."/app/extensions/resources/dashboard/caller_id.php'>\n";
+			if ($dashboard_details_state != 'disabled') {
+				echo "<form id='form_list_caller_id' method='post' action='".PROJECT_PATH."/app/extensions/resources/dashboard/caller_id.php'>\n";
 
-			echo "<div class='hud_details hud_box' id='hud_caller_id_details' style='text-align: right;'>";
+				echo "<div class='hud_details hud_box' id='hud_caller_id_details' style='text-align: right;'>";
 
-			if (is_array($extensions) && @sizeof($extensions) != 0) {
-				echo button::create(['type'=>'submit','label'=>$text['button-save'],'icon'=>$_SESSION['theme']['button_icon_save'],'collapse'=>false,'style'=>"position: absolute; margin-top: -35px; margin-left: -72px;"]);
-			}
-
-			echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";
-			echo "<tr style='position: -webkit-sticky; position: sticky; z-index: 5; top: 0;'>\n";
-			echo "<th class='hud_heading'>".$text['label-extension']."</th>\n";
-			echo "<th class='hud_heading'>".$text['label-caller_id']."</th>\n";
-			if (!permission_exists('outbound_caller_id_select')) {
-				echo "<th class='hud_heading'>".$text['label-destination']."</th>\n";
-			}
-			echo "</tr>\n";
-
-		//data
-			if (is_array($extensions) && @sizeof($extensions) != 0) {
-				$x = 0;
-				foreach ($extensions as $row) {
-					$tr_link = PROJECT_PATH."/app/extensions/extension_edit.php?id=".$row['extension_uuid'];
-					echo "<tr href='".$tr_link."'>\n";
-					echo "	<td valign='top' class='".$row_style[$c]." hud_text'>";
-					echo 		"<a href='".$tr_link."' title=\"".$text['button-edit']."\">".escape($row['destination'])."</a>";
-					if (is_uuid($row['extension_uuid'])) {
-						echo 	"<input type='hidden' name='extensions[".$x."][extension_uuid]' value=\"".escape($row['extension_uuid'])."\">\n";
-					}
-					echo "	</td>\n";
-					//select caller id
-					if (permission_exists('outbound_caller_id_select')) {
-						echo "<td valign='top' class='".$row_style[$c]." hud_text input tr_link_void'>";
-						if (count($destinations) > 0) {
-							echo "<select class='formfld' name='extensions[".$x."][outbound_caller_id]' id='outbound_caller_id_number_".$x."' style='width: 100%; min-width: 150px;'>\n";
-							echo "	<option value=''></option>\n";
-							foreach ($destinations as &$field) {
-								if (!empty($field['destination_caller_id_number'])) {
-									echo "<option value='".escape($field['destination_caller_id_name'])."@".escape($field['destination_caller_id_number'])."' ".($row['outbound_caller_id_number'] == $field['destination_caller_id_number'] ? "selected='selected'" : null).">".escape($field['destination_caller_id_name'])." ".escape($field['destination_caller_id_number'])."</option>\n";
-								}
-							}
-							echo "</select>\n";
-						}
-						echo "</td>\n";
-					}
-					//input caller id
-					else {
-						echo "<td valign='top' class='".$row_style[$c]." hud_text input tr_link_void'>";
-						echo "	<input class='formfld' style='width: 100%; min-width: 80px;' type='text' name='extensions[".$x."][outbound_caller_id_name]' maxlength='255' value=\"".escape($row['outbound_caller_id_name'])."\">\n";
-						echo "</td>\n";
-						echo "<td valign='top' class='".$row_style[$c]." hud_text input tr_link_void'>";
-						echo "	<input class='formfld' style='width: 100%; min-width: 80px;' type='text' name='extensions[".$x."][outbound_caller_id_number]' maxlength='255' value=\"".$row['outbound_caller_id_number']."\">\n";
-						echo "</td>\n";
-					}
-					echo "</tr>\n";
-					$x++;
-					$c = ($c) ? 0 : 1;
+				if (is_array($extensions) && @sizeof($extensions) != 0) {
+					echo button::create(['type'=>'submit','label'=>$text['button-save'],'icon'=>$_SESSION['theme']['button_icon_save'],'collapse'=>false,'style'=>"position: absolute; margin-top: -35px; margin-left: -72px;"]);
 				}
-				unset($extensions);
+
+				echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";
+				echo "<tr style='position: -webkit-sticky; position: sticky; z-index: 5; top: 0;'>\n";
+				echo "<th class='hud_heading'>".$text['label-extension']."</th>\n";
+				echo "<th class='hud_heading'>".$text['label-caller_id']."</th>\n";
+				if (!permission_exists('outbound_caller_id_select')) {
+					echo "<th class='hud_heading'>".$text['label-destination']."</th>\n";
+				}
+				echo "</tr>\n";
+
+			//data
+				if (is_array($extensions) && @sizeof($extensions) != 0) {
+					$x = 0;
+					foreach ($extensions as $row) {
+						$tr_link = PROJECT_PATH."/app/extensions/extension_edit.php?id=".$row['extension_uuid'];
+						echo "<tr href='".$tr_link."'>\n";
+						echo "	<td valign='top' class='".$row_style[$c]." hud_text'>";
+						echo 		"<a href='".$tr_link."' title=\"".$text['button-edit']."\">".escape($row['destination'])."</a>";
+						if (is_uuid($row['extension_uuid'])) {
+							echo 	"<input type='hidden' name='extensions[".$x."][extension_uuid]' value=\"".escape($row['extension_uuid'])."\">\n";
+						}
+						echo "	</td>\n";
+						//select caller id
+						if (permission_exists('outbound_caller_id_select')) {
+							echo "<td valign='top' class='".$row_style[$c]." hud_text input tr_link_void'>";
+							if (count($destinations) > 0) {
+								echo "<select class='formfld' name='extensions[".$x."][outbound_caller_id]' id='outbound_caller_id_number_".$x."' style='width: 100%; min-width: 150px;'>\n";
+								echo "	<option value=''></option>\n";
+								foreach ($destinations as &$field) {
+									if (!empty($field['destination_caller_id_number'])) {
+										echo "<option value='".escape($field['destination_caller_id_name'])."@".escape($field['destination_caller_id_number'])."' ".($row['outbound_caller_id_number'] == $field['destination_caller_id_number'] ? "selected='selected'" : null).">".escape($field['destination_caller_id_name'])." ".escape($field['destination_caller_id_number'])."</option>\n";
+									}
+								}
+								echo "</select>\n";
+							}
+							echo "</td>\n";
+						}
+						//input caller id
+						else {
+							echo "<td valign='top' class='".$row_style[$c]." hud_text input tr_link_void'>";
+							echo "	<input class='formfld' style='width: 100%; min-width: 80px;' type='text' name='extensions[".$x."][outbound_caller_id_name]' maxlength='255' value=\"".escape($row['outbound_caller_id_name'])."\">\n";
+							echo "</td>\n";
+							echo "<td valign='top' class='".$row_style[$c]." hud_text input tr_link_void'>";
+							echo "	<input class='formfld' style='width: 100%; min-width: 80px;' type='text' name='extensions[".$x."][outbound_caller_id_number]' maxlength='255' value=\"".$row['outbound_caller_id_number']."\">\n";
+							echo "</td>\n";
+						}
+						echo "</tr>\n";
+						$x++;
+						$c = ($c) ? 0 : 1;
+					}
+					unset($extensions);
+				}
+
+				echo "</table>\n";
+				echo "</div>";
+				//$n++;
+
+				echo "<input type='hidden' name='".$token['name']."' value='".$token['hash']."'>\n";
+				echo "</form>\n";
+
+				echo "<span class='hud_expander' onclick=\"$('#hud_caller_id_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_name."')\"><span class='fas fa-ellipsis-h'></span></span>";
 			}
-
-			echo "</table>\n";
-			echo "</div>";
-			//$n++;
-
-			echo "<input type='hidden' name='".$token['name']."' value='".$token['hash']."'>\n";
-			echo "</form>\n";
-
-			echo "<span class='hud_expander' onclick=\"$('#hud_caller_id_details').slideToggle('fast');\"><span class='fas fa-ellipsis-h'></span></span>";
 			echo "</div>\n";
 
 	}
diff --git a/app/ring_groups/resources/dashboard/ring_group_forward.php b/app/ring_groups/resources/dashboard/ring_group_forward.php
index c525302d76..6c36606abe 100644
--- a/app/ring_groups/resources/dashboard/ring_group_forward.php
+++ b/app/ring_groups/resources/dashboard/ring_group_forward.php
@@ -153,13 +153,12 @@
 //ring group forward
 	echo "<div class='hud_box'>\n";
 
-	echo "	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 13px; background-color: ".$dashboard_number_background_color.";' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_ring_group_forward_details').slideToggle('fast');\"").">\n";
-	echo "		<span class='hud_title' style='background-color: ".$dashboard_heading_background_color."; color: ".$dashboard_heading_text_color.";'>".$text['header-ring-group-forward']."</span>\n";
-
+	echo "	<div class='hud_container' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_ring_group_forward_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_name."')\"").">\n";
+	echo "		<span class='hud_title'>".$text['header-ring-group-forward']."</span>\n";
 
 //doughnut chart
 	if ($dashboard_chart_type == "doughnut") {
-		echo "	<div style='width: 275px; height: 150px; padding-top: 7px;'><canvas id='ring_group_forward_chart'></canvas></div>\n";
+		echo "	<div class='hud_chart' style='width: 275px;'><canvas id='ring_group_forward_chart'></canvas></div>\n";
 
 		echo "<script>\n";
 		echo "	const ring_group_forward_chart = new Chart(\n";
@@ -223,91 +222,93 @@
 		echo "</script>\n";
 	}
 	if ($dashboard_chart_type == "none") {
-		echo "	<span class='hud_stat' style='color: ".$dashboard_number_text_color."; padding-bottom: 27px;'>".$stats['forwarding']."</span>";
+		echo "	<span class='hud_stat'>".$stats['forwarding']."</span>";
 	}
 	echo "	</div>\n";
 
 //details
-	if (permission_exists('ring_group_forward')) {
-		echo "<form id='form_list_ring_group_forward' method='post' action='".$validated_path."'>\n";
-	}
-
-	echo "<div class='hud_details hud_box' id='hud_ring_group_forward_details' style='text-align: right;'>";
-
-	if (is_array($result) && @sizeof($result) != 0 && permission_exists('ring_group_forward')) {
-		echo button::create(['type'=>'button','label'=>$text['button-save'],'icon'=>$_SESSION['theme']['button_icon_save'],'collapse'=>false,'style'=>"position: absolute; margin-top: -35px; margin-left: -72px;",'onclick'=>"list_form_submit('form_list_ring_group_forward');"]);
-	}
-
-	echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";
-	echo "<tr style='position: -webkit-sticky; position: sticky; z-index: 5; top: 0;'>\n";
-	echo "<th class='hud_heading'>".$text['label-name']."</th>\n";
-	echo "<th class='hud_heading'>".$text['label-extension']."</th>\n";
-	echo "<th class='hud_heading'>".$text['label-forwarding']."</th>\n";
-	echo "<th class='hud_heading'>".$text['label-destination']."</th>\n";
-	echo "</tr>\n";
-
-//data
-	if (is_array($result) && @sizeof($result) != 0) {
-		$x = 0;
-		foreach ($result as $row) {
-			$tr_link = PROJECT_PATH."/app/ring_groups/ring_group_edit.php?id=".$row['ring_group_uuid'];
-			echo "<tr href='".$tr_link."'>\n";
-			echo "	<td valign='top' class='".$row_style[$c]." hud_text'>".escape($row['ring_group_name'])."</td>\n";
-			echo "	<td valign='top' class='".$row_style[$c]." hud_text'><a href='".$tr_link."' title=\"".$text['button-edit']."\">".escape($row['ring_group_extension'])."</a></td>\n";
-			if (permission_exists('ring_group_forward')) {
-				echo "	<td valign='top' class='".$row_style[$c]." hud_text input tr_link_void' style='width: 1%; text-align: center;'>";
-				echo "		<input type='hidden' name='ring_groups[".$x."][ring_group_uuid]' value=\"".escape($row["ring_group_uuid"])."\">";
-				// switch
-				if (substr($_SESSION['theme']['input_toggle_style']['text'], 0, 6) == 'switch') {
-					echo "	<label class='switch'>\n";
-					echo "		<input type='checkbox' id='".escape($row['ring_group_uuid'])."' name='ring_groups[".$x."][ring_group_forward_enabled]' value='true' ".($row["ring_group_forward_enabled"] == 'true' ? "checked='checked'" : null)." onclick=\"this.checked && !document.getElementById('destination_".$x."').value ? document.getElementById('destination_".$x."').focus() : null;\">\n";
-					echo "		<span class='slider'></span>\n";
-					echo "	</label>\n";
-				}
-				// select
-				else {
-					echo "	<select class='formfld' id='".escape($row['ring_group_uuid'])."' name='ring_groups[".$x."][ring_group_forward_enabled]' onchange=\"this.selectedIndex && !document.getElementById('destination_".$x."').value ? document.getElementById('destination_".$x."').focus() : null;\">\n";
-					echo "		<option value='false'>".$text['option-disabled']."</option>\n";
-					echo "		<option value='true' ".($row["ring_group_forward_enabled"] == 'true' ? "selected='selected'" : null).">".$text['option-enabled']."</option>\n";
-					echo "	</select>\n";
-				}
-			}
-			else {
-				echo "	<td valign='top' class='".$row_style[$c]." hud_text' style='width: 1%; text-align: left;'>";
-				if ($row["ring_group_forward_enabled"] == 'true') {
-					echo $text['option-enabled'];
-				}
-				else {
-					echo $text['option-disabled'];
-				}
-			}
-			echo "	</td>\n";
-			if (permission_exists('ring_group_forward')) {
-				echo "	<td valign='top' class='".$row_style[$c]." hud_text input tr_link_void'>";
-				echo "		<input class='formfld' style='width: 100%; min-width: 80px;' type='text' name='ring_groups[".$x."][ring_group_forward_destination]' id='destination_".$x."' placeholder=\"".$text['label-forward_destination']."\" maxlength='255' value=\"".escape($row["ring_group_forward_destination"])."\">";
-			}
-			else {
-				echo "	<td valign='top' class='".$row_style[$c]." hud_text'>";
-				echo escape(format_phone($row["ring_group_forward_destination"] ?? ''));
-			}
-			echo "	</td>\n";
-			echo "</tr>\n";
-			$x++;
-			$c = ($c) ? 0 : 1;
+	if ($dashboard_details_state != 'disabled') {
+		if (permission_exists('ring_group_forward')) {
+			echo "<form id='form_list_ring_group_forward' method='post' action='".$validated_path."'>\n";
 		}
-		unset($result);
+
+		echo "<div class='hud_details hud_box' id='hud_ring_group_forward_details' style='text-align: right;'>";
+
+		if (is_array($result) && @sizeof($result) != 0 && permission_exists('ring_group_forward')) {
+			echo button::create(['type'=>'button','label'=>$text['button-save'],'icon'=>$_SESSION['theme']['button_icon_save'],'collapse'=>false,'style'=>"position: absolute; margin-top: -35px; margin-left: -72px;",'onclick'=>"list_form_submit('form_list_ring_group_forward');"]);
+		}
+
+		echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";
+		echo "<tr style='position: -webkit-sticky; position: sticky; z-index: 5; top: 0;'>\n";
+		echo "<th class='hud_heading'>".$text['label-name']."</th>\n";
+		echo "<th class='hud_heading'>".$text['label-extension']."</th>\n";
+		echo "<th class='hud_heading'>".$text['label-forwarding']."</th>\n";
+		echo "<th class='hud_heading'>".$text['label-destination']."</th>\n";
+		echo "</tr>\n";
+
+	//data
+		if (is_array($result) && @sizeof($result) != 0) {
+			$x = 0;
+			foreach ($result as $row) {
+				$tr_link = PROJECT_PATH."/app/ring_groups/ring_group_edit.php?id=".$row['ring_group_uuid'];
+				echo "<tr href='".$tr_link."'>\n";
+				echo "	<td valign='top' class='".$row_style[$c]." hud_text'>".escape($row['ring_group_name'])."</td>\n";
+				echo "	<td valign='top' class='".$row_style[$c]." hud_text'><a href='".$tr_link."' title=\"".$text['button-edit']."\">".escape($row['ring_group_extension'])."</a></td>\n";
+				if (permission_exists('ring_group_forward')) {
+					echo "	<td valign='top' class='".$row_style[$c]." hud_text input tr_link_void' style='width: 1%; text-align: center;'>";
+					echo "		<input type='hidden' name='ring_groups[".$x."][ring_group_uuid]' value=\"".escape($row["ring_group_uuid"])."\">";
+					// switch
+					if (substr($_SESSION['theme']['input_toggle_style']['text'], 0, 6) == 'switch') {
+						echo "	<label class='switch'>\n";
+						echo "		<input type='checkbox' id='".escape($row['ring_group_uuid'])."' name='ring_groups[".$x."][ring_group_forward_enabled]' value='true' ".($row["ring_group_forward_enabled"] == 'true' ? "checked='checked'" : null)." onclick=\"this.checked && !document.getElementById('destination_".$x."').value ? document.getElementById('destination_".$x."').focus() : null;\">\n";
+						echo "		<span class='slider'></span>\n";
+						echo "	</label>\n";
+					}
+					// select
+					else {
+						echo "	<select class='formfld' id='".escape($row['ring_group_uuid'])."' name='ring_groups[".$x."][ring_group_forward_enabled]' onchange=\"this.selectedIndex && !document.getElementById('destination_".$x."').value ? document.getElementById('destination_".$x."').focus() : null;\">\n";
+						echo "		<option value='false'>".$text['option-disabled']."</option>\n";
+						echo "		<option value='true' ".($row["ring_group_forward_enabled"] == 'true' ? "selected='selected'" : null).">".$text['option-enabled']."</option>\n";
+						echo "	</select>\n";
+					}
+				}
+				else {
+					echo "	<td valign='top' class='".$row_style[$c]." hud_text' style='width: 1%; text-align: left;'>";
+					if ($row["ring_group_forward_enabled"] == 'true') {
+						echo $text['option-enabled'];
+					}
+					else {
+						echo $text['option-disabled'];
+					}
+				}
+				echo "	</td>\n";
+				if (permission_exists('ring_group_forward')) {
+					echo "	<td valign='top' class='".$row_style[$c]." hud_text input tr_link_void'>";
+					echo "		<input class='formfld' style='width: 100%; min-width: 80px;' type='text' name='ring_groups[".$x."][ring_group_forward_destination]' id='destination_".$x."' placeholder=\"".$text['label-forward_destination']."\" maxlength='255' value=\"".escape($row["ring_group_forward_destination"])."\">";
+				}
+				else {
+					echo "	<td valign='top' class='".$row_style[$c]." hud_text'>";
+					echo escape(format_phone($row["ring_group_forward_destination"] ?? ''));
+				}
+				echo "	</td>\n";
+				echo "</tr>\n";
+				$x++;
+				$c = ($c) ? 0 : 1;
+			}
+			unset($result);
+		}
+
+		echo "</table>\n";
+		echo "</div>";
+		//$n++;
+
+		if (permission_exists('ring_group_forward')) {
+			echo "<input type='hidden' name='".$token['name']."' value='".$token['hash']."'>\n";
+			echo "</form>\n";
+		}
+
+		echo "<span class='hud_expander' onclick=\"$('#hud_ring_group_forward_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_name."')\"><span class='fas fa-ellipsis-h'></span></span>";
 	}
-
-	echo "</table>\n";
-	echo "</div>";
-	//$n++;
-
-	if (permission_exists('ring_group_forward')) {
-		echo "<input type='hidden' name='".$token['name']."' value='".$token['hash']."'>\n";
-		echo "</form>\n";
-	}
-
-	echo "<span class='hud_expander' onclick=\"$('#hud_ring_group_forward_details').slideToggle('fast');\"><span class='fas fa-ellipsis-h'></span></span>";
 	echo "</div>\n";
 
 ?>
diff --git a/app/switch/resources/dashboard/switch_status.php b/app/switch/resources/dashboard/switch_status.php
index 3b1cfdfb0f..284d197894 100644
--- a/app/switch/resources/dashboard/switch_status.php
+++ b/app/switch/resources/dashboard/switch_status.php
@@ -76,13 +76,14 @@
 		$registrations = $registration->count();
 	}
 
-	echo "<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 13px; background-color: ".$dashboard_number_background_color.";' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_switch_status_details').slideToggle('fast');\"").">\n";
-	echo "	<span class='hud_title' style='background-color: ".$dashboard_heading_background_color."; color: ".$dashboard_heading_text_color.";'>".$text['label-switch_status']."</span>\n";
+//show the content
+	echo "<div class='hud_container' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_switch_status_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_name."')\"").">\n";
+	echo "	<span class='hud_title'>".$text['label-switch_status']."</span>\n";
 
 	if ($dashboard_chart_type == "doughnut") {
 		//add doughnut chart
 		?>
-		<div style='height: 150px; padding-top: 7px;'><canvas id='switch_status_chart'></canvas></div>
+		<div class='hud_chart'><canvas id='switch_status_chart'></canvas></div>
 
 		<script>
 			const switch_status_chart = new Chart(
@@ -123,59 +124,60 @@
 		<?php
 	}
 	if ($dashboard_chart_type == "none") {
-		echo "	<span class='hud_stat' style='padding-bottom: 27px; color: ".$dashboard_number_text_color.";'>".$registrations."</span>";
+		echo "	<span class='hud_stat'>".$registrations."</span>";
 	}
 	echo "	</div>\n";
 
-//show the content
-	echo "<div class='hud_details hud_box' id='hud_switch_status_details'>";
-	echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";
-	echo "<tr>\n";
-	echo "<th class='hud_heading' width='50%'>".$text['label-name']."</th>\n";
-	echo "<th class='hud_heading' style='text-align: right;'>".$text['label-value']."</th>\n";
-	echo "</tr>\n";
-
-	//switch version
-	if (permission_exists('switch_version') && !empty($switch_version)) {
-		echo "<tr class='tr_link' ".$tr_link_sip_status.">\n";
-		echo "<td valign='top' class='".$row_style[$c]." hud_text'>".$text['label-switch']."</td>\n";
-		echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'><a ".$tr_link_sip_status.">".$switch_version." (".$switch_bits.")</a></td>\n";
+	if ($dashboard_details_state != 'disabled') {
+		echo "<div class='hud_details hud_box' id='hud_switch_status_details'>";
+		echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";
+		echo "<tr>\n";
+		echo "<th class='hud_heading' width='50%'>".$text['label-name']."</th>\n";
+		echo "<th class='hud_heading' style='text-align: right;'>".$text['label-value']."</th>\n";
 		echo "</tr>\n";
-		$c = ($c) ? 0 : 1;
+
+		//switch version
+		if (permission_exists('switch_version') && !empty($switch_version)) {
+			echo "<tr class='tr_link' ".$tr_link_sip_status.">\n";
+			echo "<td valign='top' class='".$row_style[$c]." hud_text'>".$text['label-switch']."</td>\n";
+			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'><a ".$tr_link_sip_status.">".$switch_version." (".$switch_bits.")</a></td>\n";
+			echo "</tr>\n";
+			$c = ($c) ? 0 : 1;
+		}
+
+		//switch uptime
+		if (permission_exists('switch_uptime') && !empty($uptime)) {
+			echo "<tr class='tr_link' ".$tr_link_sip_status.">\n";
+			echo "<td valign='top' class='".$row_style[$c]." hud_text'>".$text['label-switch_uptime']."</td>\n";
+			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'><a ".$tr_link_sip_status.">".$uptime."</a></td>\n";
+			echo "</tr>\n";
+			$c = ($c) ? 0 : 1;
+		}
+
+		//switch channels
+		if (permission_exists('switch_channels')) {
+			echo "<tr class='tr_link' ".$tr_link_channels.">\n";
+			echo "<td valign='top' class='".$row_style[$c]." hud_text'>".$text['label-channels']."</td>\n";
+			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'><a ".$tr_link_channels.">".$channels."</a></td>\n";
+			echo "</tr>\n";
+			$c = ($c) ? 0 : 1;
+		}
+
+		//switch registrations
+		if (permission_exists('switch_registrations')) {
+			echo "<tr class='tr_link' ".$tr_link_registrations.">\n";
+			echo "<td valign='top' class='".$row_style[$c]." hud_text'>".$text['label-registrations']."</td>\n";
+			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'><a ".$tr_link_registrations.">".$registrations."</a></td>\n";
+			echo "</tr>\n";
+			$c = ($c) ? 0 : 1;
+		}
+
+		echo "</table>\n";
+		echo "</div>";
+		//$n++;
+
+		echo "<span class='hud_expander' onclick=\"$('#hud_switch_status_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_name."')\"><span class='fas fa-ellipsis-h'></span></span>";
 	}
-
-	//switch uptime
-	if (permission_exists('switch_uptime') && !empty($uptime)) {
-		echo "<tr class='tr_link' ".$tr_link_sip_status.">\n";
-		echo "<td valign='top' class='".$row_style[$c]." hud_text'>".$text['label-switch_uptime']."</td>\n";
-		echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'><a ".$tr_link_sip_status.">".$uptime."</a></td>\n";
-		echo "</tr>\n";
-		$c = ($c) ? 0 : 1;
-	}
-
-	//switch channels
-	if (permission_exists('switch_channels')) {
-		echo "<tr class='tr_link' ".$tr_link_channels.">\n";
-		echo "<td valign='top' class='".$row_style[$c]." hud_text'>".$text['label-channels']."</td>\n";
-		echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'><a ".$tr_link_channels.">".$channels."</a></td>\n";
-		echo "</tr>\n";
-		$c = ($c) ? 0 : 1;
-	}
-
-	//switch registrations
-	if (permission_exists('switch_registrations')) {
-		echo "<tr class='tr_link' ".$tr_link_registrations.">\n";
-		echo "<td valign='top' class='".$row_style[$c]." hud_text'>".$text['label-registrations']."</td>\n";
-		echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'><a ".$tr_link_registrations.">".$registrations."</a></td>\n";
-		echo "</tr>\n";
-		$c = ($c) ? 0 : 1;
-	}
-
-	echo "</table>\n";
-	echo "</div>";
-	//$n++;
-
-	echo "<span class='hud_expander' onclick=\"$('#hud_switch_status_details').slideToggle('fast');\"><span class='fas fa-ellipsis-h'></span></span>";
 	echo "</div>\n";
 
 ?>
diff --git a/app/system/resources/dashboard/system_counts.php b/app/system/resources/dashboard/system_counts.php
index 0e780c3578..cd5abd2ee6 100644
--- a/app/system/resources/dashboard/system_counts.php
+++ b/app/system/resources/dashboard/system_counts.php
@@ -295,13 +295,13 @@
 	echo "<div class='hud_box'>\n";
 	if ($show_stat) {
 
-		echo "<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 13px; background-color: ".$dashboard_number_background_color.";' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_system_counts_details').slideToggle('fast');\"").">\n";
-		echo "	<span class='hud_title' style='background-color: ".$dashboard_heading_background_color."; color: ".$dashboard_heading_text_color.";' onclick=\"document.location.href='".PROJECT_PATH."/app/system/system.php'\">".$text['label-system_counts']."</span>\n";
+		echo "<div class='hud_container' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_system_counts_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_name."')\"").">\n";
+		echo "	<span class='hud_title' onclick=\"document.location.href='".PROJECT_PATH."/app/system/system.php'\">".$text['label-system_counts']."</span>\n";
 
 		if ($dashboard_chart_type == "doughnut") {
 			//add doughnut chart
 			?>
-			<div style='height: 150px; padding-top: 7px;'><canvas id='system_counts_chart'></canvas></div>
+			<div class='hud_chart'><canvas id='system_counts_chart'></canvas></div>
 
 			<script>
 				const system_counts_chart = new Chart(
@@ -355,150 +355,152 @@
 			<?php
 		}
 		if ($dashboard_chart_type == "none") {
-			echo "	<span class='hud_stat' style='color: ".$dashboard_number_text_color."; padding-bottom: 27px;'>".$domain_total."</span>";
+			echo "	<span class='hud_stat'>".$domain_total."</span>";
 		}
 		echo "	</div>\n";
 	}
 
-	echo "<div class='hud_details hud_box' id='hud_system_counts_details'>";
-	echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";
-	echo "<tr>\n";
-	echo "<th class='hud_heading' width='50%'>".$text['label-item']."</th>\n";
-	echo "<th class='hud_heading' width='50%' style='text-align: center; padding-left: 0; padding-right: 0;'>".$text['label-disabled']."</th>\n";
-	echo "<th class='hud_heading' style='text-align: center;'>".$text['label-total']."</th>\n";
-	echo "</tr>\n";
+	if ($dashboard_details_state != 'disabled') {
+		echo "<div class='hud_details hud_box' id='hud_system_counts_details'>";
+		echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";
+		echo "<tr>\n";
+		echo "<th class='hud_heading' width='50%'>".$text['label-item']."</th>\n";
+		echo "<th class='hud_heading' width='50%' style='text-align: center; padding-left: 0; padding-right: 0;'>".$text['label-disabled']."</th>\n";
+		echo "<th class='hud_heading' style='text-align: center;'>".$text['label-total']."</th>\n";
+		echo "</tr>\n";
 
-	//domains
-		if (permission_exists('domain_view')) {
-			$tr_link = "href='".PROJECT_PATH."/core/domains/domains.php'";
-			echo "<tr ".$tr_link.">\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text'><a ".$tr_link.">".$text['label-domains']."</a></td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['domains']['disabled']."</td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['domains']['total']."</td>\n";
-			echo "</tr>\n";
-			$c = ($c) ? 0 : 1;
-		}
+		//domains
+			if (permission_exists('domain_view')) {
+				$tr_link = "href='".PROJECT_PATH."/core/domains/domains.php'";
+				echo "<tr ".$tr_link.">\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text'><a ".$tr_link.">".$text['label-domains']."</a></td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['domains']['disabled']."</td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['domains']['total']."</td>\n";
+				echo "</tr>\n";
+				$c = ($c) ? 0 : 1;
+			}
 
-	//devices
-		if (permission_exists('device_view') && file_exists($_SERVER["DOCUMENT_ROOT"].PROJECT_PATH."/app/devices/")) {
-			$tr_link = "href='".PROJECT_PATH."/app/devices/devices.php'";
-			echo "<tr ".$tr_link.">\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text'><a ".$tr_link.">".$text['label-devices']."</a></td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['devices']['disabled']."</td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['devices']['total']."</td>\n";
-			echo "</tr>\n";
-			$c = ($c) ? 0 : 1;
-		}
+		//devices
+			if (permission_exists('device_view') && file_exists($_SERVER["DOCUMENT_ROOT"].PROJECT_PATH."/app/devices/")) {
+				$tr_link = "href='".PROJECT_PATH."/app/devices/devices.php'";
+				echo "<tr ".$tr_link.">\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text'><a ".$tr_link.">".$text['label-devices']."</a></td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['devices']['disabled']."</td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['devices']['total']."</td>\n";
+				echo "</tr>\n";
+				$c = ($c) ? 0 : 1;
+			}
 
-	//extensions
-		if (permission_exists('extension_view') && file_exists($_SERVER["DOCUMENT_ROOT"].PROJECT_PATH."/app/extensions/")) {
-			$tr_link = "href='".PROJECT_PATH."/app/extensions/extensions.php'";
-			echo "<tr ".$tr_link.">\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text'><a ".$tr_link.">".$text['label-extensions']."</a></td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['extensions']['disabled']."</td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['extensions']['total']."</td>\n";
-			echo "</tr>\n";
-			$c = ($c) ? 0 : 1;
-		}
+		//extensions
+			if (permission_exists('extension_view') && file_exists($_SERVER["DOCUMENT_ROOT"].PROJECT_PATH."/app/extensions/")) {
+				$tr_link = "href='".PROJECT_PATH."/app/extensions/extensions.php'";
+				echo "<tr ".$tr_link.">\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text'><a ".$tr_link.">".$text['label-extensions']."</a></td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['extensions']['disabled']."</td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['extensions']['total']."</td>\n";
+				echo "</tr>\n";
+				$c = ($c) ? 0 : 1;
+			}
 
-	//gateways
-		if (permission_exists('gateway_view') && file_exists($_SERVER["DOCUMENT_ROOT"].PROJECT_PATH."/app/gateways/")) {
-			$tr_link = "href='".PROJECT_PATH."/app/gateways/gateways.php'";
-			echo "<tr ".$tr_link.">\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text'><a ".$tr_link.">".$text['label-gateways']."</a></td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['gateways']['disabled']."</td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['gateways']['total']."</td>\n";
-			echo "</tr>\n";
-			$c = ($c) ? 0 : 1;
-		}
+		//gateways
+			if (permission_exists('gateway_view') && file_exists($_SERVER["DOCUMENT_ROOT"].PROJECT_PATH."/app/gateways/")) {
+				$tr_link = "href='".PROJECT_PATH."/app/gateways/gateways.php'";
+				echo "<tr ".$tr_link.">\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text'><a ".$tr_link.">".$text['label-gateways']."</a></td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['gateways']['disabled']."</td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['gateways']['total']."</td>\n";
+				echo "</tr>\n";
+				$c = ($c) ? 0 : 1;
+			}
 
-	//users
-		if ((permission_exists('user_view') || if_group("superadmin")) && file_exists($_SERVER["DOCUMENT_ROOT"].PROJECT_PATH."/core/users/")) {
-			$tr_link = "href='".PROJECT_PATH."/core/users/users.php'";
-			echo "<tr ".$tr_link.">\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text'><a ".$tr_link.">".$text['label-users']."</a></td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['users']['disabled']."</td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['users']['total']."</td>\n";
-			echo "</tr>\n";
-			$c = ($c) ? 0 : 1;
-		}
+		//users
+			if ((permission_exists('user_view') || if_group("superadmin")) && file_exists($_SERVER["DOCUMENT_ROOT"].PROJECT_PATH."/core/users/")) {
+				$tr_link = "href='".PROJECT_PATH."/core/users/users.php'";
+				echo "<tr ".$tr_link.">\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text'><a ".$tr_link.">".$text['label-users']."</a></td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['users']['disabled']."</td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['users']['total']."</td>\n";
+				echo "</tr>\n";
+				$c = ($c) ? 0 : 1;
+			}
 
-	//destinations
-		if (permission_exists('destination_view') && file_exists($_SERVER["DOCUMENT_ROOT"].PROJECT_PATH."/app/destinations/")) {
-			$tr_link = "href='".PROJECT_PATH."/app/destinations/destinations.php'";
-			echo "<tr ".$tr_link.">\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text'><a ".$tr_link.">".$text['label-destinations']."</a></td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['destinations']['disabled']."</td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['destinations']['total']."</td>\n";
-			echo "</tr>\n";
-			$c = ($c) ? 0 : 1;
-		}
+		//destinations
+			if (permission_exists('destination_view') && file_exists($_SERVER["DOCUMENT_ROOT"].PROJECT_PATH."/app/destinations/")) {
+				$tr_link = "href='".PROJECT_PATH."/app/destinations/destinations.php'";
+				echo "<tr ".$tr_link.">\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text'><a ".$tr_link.">".$text['label-destinations']."</a></td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['destinations']['disabled']."</td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['destinations']['total']."</td>\n";
+				echo "</tr>\n";
+				$c = ($c) ? 0 : 1;
+			}
 
-	//call center queues
-		if (permission_exists('call_center_active_view') && file_exists($_SERVER["DOCUMENT_ROOT"].PROJECT_PATH."/app/call_centers/")) {
-			$tr_link = "href='".PROJECT_PATH."/app/call_centers/call_center_queues.php'";
-			echo "<tr ".$tr_link.">\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text'><a ".$tr_link.">".$text['label-call_center_queues']."</a></td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['call_center_queues']['disabled']."</td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['call_center_queues']['total']."</td>\n";
-			echo "</tr>\n";
-			$c = ($c) ? 0 : 1;
-		}
+		//call center queues
+			if (permission_exists('call_center_active_view') && file_exists($_SERVER["DOCUMENT_ROOT"].PROJECT_PATH."/app/call_centers/")) {
+				$tr_link = "href='".PROJECT_PATH."/app/call_centers/call_center_queues.php'";
+				echo "<tr ".$tr_link.">\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text'><a ".$tr_link.">".$text['label-call_center_queues']."</a></td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['call_center_queues']['disabled']."</td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['call_center_queues']['total']."</td>\n";
+				echo "</tr>\n";
+				$c = ($c) ? 0 : 1;
+			}
 
-	//ivr menus
-		if (permission_exists('ivr_menu_view') && file_exists($_SERVER["DOCUMENT_ROOT"].PROJECT_PATH."/app/ivr_menus/")) {
-			$tr_link = "href='".PROJECT_PATH."/app/ivr_menus/ivr_menus.php'";
-			echo "<tr ".$tr_link.">\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text'><a ".$tr_link.">".$text['label-ivr_menus']."</a></td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['ivr_menus']['disabled']."</td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['ivr_menus']['total']."</td>\n";
-			echo "</tr>\n";
-			$c = ($c) ? 0 : 1;
-		}
+		//ivr menus
+			if (permission_exists('ivr_menu_view') && file_exists($_SERVER["DOCUMENT_ROOT"].PROJECT_PATH."/app/ivr_menus/")) {
+				$tr_link = "href='".PROJECT_PATH."/app/ivr_menus/ivr_menus.php'";
+				echo "<tr ".$tr_link.">\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text'><a ".$tr_link.">".$text['label-ivr_menus']."</a></td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['ivr_menus']['disabled']."</td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['ivr_menus']['total']."</td>\n";
+				echo "</tr>\n";
+				$c = ($c) ? 0 : 1;
+			}
 
-	//ring groups
-		if (permission_exists('ring_group_view') && file_exists($_SERVER["DOCUMENT_ROOT"].PROJECT_PATH."/app/ring_groups/")) {
-			$tr_link = "href='".PROJECT_PATH."/app/ring_groups/ring_groups.php'";
-			echo "<tr ".$tr_link.">\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text'><a ".$tr_link.">".$text['label-ring_groups']."</a></td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['ring_groups']['disabled']."</td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['ring_groups']['total']."</td>\n";
-			echo "</tr>\n";
-			$c = ($c) ? 0 : 1;
-		}
+		//ring groups
+			if (permission_exists('ring_group_view') && file_exists($_SERVER["DOCUMENT_ROOT"].PROJECT_PATH."/app/ring_groups/")) {
+				$tr_link = "href='".PROJECT_PATH."/app/ring_groups/ring_groups.php'";
+				echo "<tr ".$tr_link.">\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text'><a ".$tr_link.">".$text['label-ring_groups']."</a></td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['ring_groups']['disabled']."</td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['ring_groups']['total']."</td>\n";
+				echo "</tr>\n";
+				$c = ($c) ? 0 : 1;
+			}
 
-	//voicemails
-		if (permission_exists('voicemail_view') && file_exists($_SERVER["DOCUMENT_ROOT"].PROJECT_PATH."/app/voicemails/")) {
-			$tr_link = "href='".PROJECT_PATH."/app/voicemails/voicemails.php'";
-			echo "<tr ".$tr_link.">\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text'><a ".$tr_link.">".$text['label-voicemail']."</a></td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['voicemails']['disabled']."</td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['voicemails']['total']."</td>\n";
-			echo "</tr>\n";
-			$c = ($c) ? 0 : 1;
-		}
+		//voicemails
+			if (permission_exists('voicemail_view') && file_exists($_SERVER["DOCUMENT_ROOT"].PROJECT_PATH."/app/voicemails/")) {
+				$tr_link = "href='".PROJECT_PATH."/app/voicemails/voicemails.php'";
+				echo "<tr ".$tr_link.">\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text'><a ".$tr_link.">".$text['label-voicemail']."</a></td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['voicemails']['disabled']."</td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['voicemails']['total']."</td>\n";
+				echo "</tr>\n";
+				$c = ($c) ? 0 : 1;
+			}
 
-	//messages
-		if (permission_exists('voicemail_message_view') && file_exists($_SERVER["DOCUMENT_ROOT"].PROJECT_PATH."/app/voicemails/")) {
-			echo "<tr>\n";
-			echo "<th class='hud_heading' width='50%'>".$text['label-item']."</th>\n";
-			echo "<th class='hud_heading' width='50%' style='text-align: center; padding-left: 0; padding-right: 0;'>".$text['label-new']."</th>\n";
-			echo "<th class='hud_heading' style='text-align: center;'>".$text['label-total']."</th>\n";
-			echo "</tr>\n";
+		//messages
+			if (permission_exists('voicemail_message_view') && file_exists($_SERVER["DOCUMENT_ROOT"].PROJECT_PATH."/app/voicemails/")) {
+				echo "<tr>\n";
+				echo "<th class='hud_heading' width='50%'>".$text['label-item']."</th>\n";
+				echo "<th class='hud_heading' width='50%' style='text-align: center; padding-left: 0; padding-right: 0;'>".$text['label-new']."</th>\n";
+				echo "<th class='hud_heading' style='text-align: center;'>".$text['label-total']."</th>\n";
+				echo "</tr>\n";
 
-			$tr_link = "href='".PROJECT_PATH."/app/voicemails/voicemails.php'";
-			echo "<tr ".$tr_link.">\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text'><a ".$tr_link.">".$text['label-messages']."</a></td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['messages']['new']."</td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['messages']['total']."</td>\n";
-			echo "</tr>\n";
-			$c = ($c) ? 0 : 1;
-		}
+				$tr_link = "href='".PROJECT_PATH."/app/voicemails/voicemails.php'";
+				echo "<tr ".$tr_link.">\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text'><a ".$tr_link.">".$text['label-messages']."</a></td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['messages']['new']."</td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: center;'>".$stats[$scope]['messages']['total']."</td>\n";
+				echo "</tr>\n";
+				$c = ($c) ? 0 : 1;
+			}
 
-	echo "</table>\n";
-	echo "</div>";
-	//$n++;
+		echo "</table>\n";
+		echo "</div>";
+		//$n++;
 
-	echo "<span class='hud_expander' onclick=\"$('#hud_system_counts_details').slideToggle('fast');\"><span class='fas fa-ellipsis-h'></span></span>\n";
+		echo "<span class='hud_expander' onclick=\"$('#hud_system_counts_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_name."')\"><span class='fas fa-ellipsis-h'></span></span>\n";
+	}
 	echo "</div>\n";
 ?>
diff --git a/app/system/resources/dashboard/system_cpu_status.php b/app/system/resources/dashboard/system_cpu_status.php
index d0e9e79235..62d7fe7d34 100644
--- a/app/system/resources/dashboard/system_cpu_status.php
+++ b/app/system/resources/dashboard/system_cpu_status.php
@@ -50,13 +50,14 @@
 
 	}
 
-//add half doughnut chart
-	echo "<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px; background-color: ".$dashboard_number_background_color.";' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_system_cpu_status_details').slideToggle('fast');\"").">\n";
-	echo "	<span class='hud_title' style='background-color: ".$dashboard_heading_background_color."; color: ".$dashboard_heading_text_color.";' onclick=\"document.location.href='".PROJECT_PATH."/app/system/system.php'\">".$text['label-cpu_usage']."</span>\n";
+//show the content
+	echo "<div class='hud_container' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_system_cpu_status_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_name."')\"").">\n";
+	echo "	<span class='hud_title' onclick=\"document.location.href='".PROJECT_PATH."/app/system/system.php'\">".$text['label-cpu_usage']."</span>\n";
 
+//add half doughnut chart
 	if ($dashboard_chart_type == "doughnut") {
 		?>
-		<div style='width: 175px; height: 143px;'><canvas id='system_cpu_status_chart'></canvas></div>
+		<div class='hud_chart' style='width: 175px;'><canvas id='system_cpu_status_chart'></canvas></div>
 
 		<script>
 			const system_cpu_status_chart = new Chart(
@@ -113,59 +114,60 @@
 		<?php
 	}
 	if ($dashboard_chart_type == "none") {
-		echo "<span class='hud_stat' style='color: ".$dashboard_number_text_color.";'>".round($percent_cpu)."%</span>";
+		echo "<span class='hud_stat'>".round($percent_cpu)."%</span>";
 	}
 	echo "</div>\n";
 
-//show the content
-	echo "<div class='hud_details hud_box' id='hud_system_cpu_status_details'>";
-	echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";
-	echo "<tr>\n";
-	echo "<th class='hud_heading' width='50%'>".$text['label-name']."</th>\n";
-	echo "<th class='hud_heading' style='text-align: right;'>".$text['label-value']."</th>\n";
-	echo "</tr>\n";
+	if ($dashboard_details_state != 'disabled') {
+		echo "<div class='hud_details hud_box' id='hud_system_cpu_status_details'>";
+		echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";
+		echo "<tr>\n";
+		echo "<th class='hud_heading' width='50%'>".$text['label-name']."</th>\n";
+		echo "<th class='hud_heading' style='text-align: right;'>".$text['label-value']."</th>\n";
+		echo "</tr>\n";
+
+		if (PHP_OS == 'FreeBSD' || PHP_OS == 'Linux') {
+			if (!empty($percent_cpu)) {
+				echo "<tr class='tr_link_void'>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text'>".$text['label-cpu_usage']."</td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'>".$percent_cpu."%</td>\n";
+				echo "</tr>\n";
+				$c = ($c) ? 0 : 1;
+			}
+
+			if (!empty($cpu_cores)) {
+				echo "<tr class='tr_link_void'>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text'>".$text['label-cpu_cores']."</td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'>".$cpu_cores."</td>\n";
+				echo "</tr>\n";
+				$c = ($c) ? 0 : 1;
+			}
 
-	if (PHP_OS == 'FreeBSD' || PHP_OS == 'Linux') {
-		if (!empty($percent_cpu)) {
 			echo "<tr class='tr_link_void'>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text'>".$text['label-cpu_usage']."</td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'>".$percent_cpu."%</td>\n";
+			echo "<td valign='top' class='".$row_style[$c]." hud_text'>".$text['label-load_average']." (1)</td>\n";
+			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'>".$load_average[0]."</td>\n";
+			echo "</tr>\n";
+			$c = ($c) ? 0 : 1;
+
+			echo "<tr class='tr_link_void'>\n";
+			echo "<td valign='top' class='".$row_style[$c]." hud_text'>".$text['label-load_average']." (5)</td>\n";
+			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'>".$load_average[1]."</td>\n";
+			echo "</tr>\n";
+			$c = ($c) ? 0 : 1;
+
+			echo "<tr class='tr_link_void'>\n";
+			echo "<td valign='top' class='".$row_style[$c]." hud_text'>".$text['label-load_average']." (15)</td>\n";
+			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'>".$load_average[2]."</td>\n";
 			echo "</tr>\n";
 			$c = ($c) ? 0 : 1;
 		}
 
-		if (!empty($cpu_cores)) {
-			echo "<tr class='tr_link_void'>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text'>".$text['label-cpu_cores']."</td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'>".$cpu_cores."</td>\n";
-			echo "</tr>\n";
-			$c = ($c) ? 0 : 1;
-		}
+		echo "</table>\n";
+		echo "</div>";
+		//$n++;
 
-		echo "<tr class='tr_link_void'>\n";
-		echo "<td valign='top' class='".$row_style[$c]." hud_text'>".$text['label-load_average']." (1)</td>\n";
-		echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'>".$load_average[0]."</td>\n";
-		echo "</tr>\n";
-		$c = ($c) ? 0 : 1;
-
-		echo "<tr class='tr_link_void'>\n";
-		echo "<td valign='top' class='".$row_style[$c]." hud_text'>".$text['label-load_average']." (5)</td>\n";
-		echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'>".$load_average[1]."</td>\n";
-		echo "</tr>\n";
-		$c = ($c) ? 0 : 1;
-
-		echo "<tr class='tr_link_void'>\n";
-		echo "<td valign='top' class='".$row_style[$c]." hud_text'>".$text['label-load_average']." (15)</td>\n";
-		echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'>".$load_average[2]."</td>\n";
-		echo "</tr>\n";
-		$c = ($c) ? 0 : 1;
+		echo "<span class='hud_expander' onclick=\"$('#hud_system_cpu_status_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_name."')\"><span class='fas fa-ellipsis-h'></span></span>";
 	}
-
-	echo "</table>\n";
-	echo "</div>";
-	//$n++;
-
-	echo "<span class='hud_expander' onclick=\"$('#hud_system_cpu_status_details').slideToggle('fast');\"><span class='fas fa-ellipsis-h'></span></span>";
 	echo "</div>\n";
 
 ?>
diff --git a/app/system/resources/dashboard/system_status.php b/app/system/resources/dashboard/system_status.php
index 78ab2ffce9..959c6df0e6 100644
--- a/app/system/resources/dashboard/system_status.php
+++ b/app/system/resources/dashboard/system_status.php
@@ -37,12 +37,12 @@
 		if (!empty($percent_disk_usage)) {
 
 			//add half doughnut chart
-			echo "	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px; background-color: ".$dashboard_number_background_color.";' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_system_status_details').slideToggle('fast');\"").">\n";
-			echo "		<span class='hud_title' style='background-color: ".$dashboard_heading_background_color."; color: ".$dashboard_heading_text_color.";' onclick=\"document.location.href='".PROJECT_PATH."/app/system/system.php'\">".$text['label-disk_usage']."</span>\n";
+			echo "	<div class='hud_container' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_system_status_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_name."')\"").">\n";
+			echo "		<span class='hud_title' onclick=\"document.location.href='".PROJECT_PATH."/app/system/system.php'\">".$text['label-disk_usage']."</span>\n";
 
 			if ($dashboard_chart_type == "doughnut") {
 				?>
-				<div style='width: 175px; height: 143px;'><canvas id='system_status_chart'></canvas></div>
+				<div class='hud_chart' style='width: 175px;'><canvas id='system_status_chart'></canvas></div>
 
 				<script>
 					const system_status_chart = new Chart(
@@ -95,138 +95,140 @@
 				<?php
 			}
 			if ($dashboard_chart_type == "none") {
-				echo "	<span class='hud_stat' style='color: ".$dashboard_number_text_color.";'>".round($percent_disk_usage)."%</span>";
+				echo "	<span class='hud_stat'>".round($percent_disk_usage)."%</span>";
 			}
 			echo "	</div>\n";
 		}
 	}
 
-	echo "<div class='hud_details hud_box' id='hud_system_status_details'>";
-	echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";
-	echo "<tr>\n";
-	echo "<th class='hud_heading' width='50%'>".$text['label-item']."</th>\n";
-	echo "<th class='hud_heading' style='text-align: right;'>".$text['label-value']."</th>\n";
-	echo "</tr>\n";
-
-	//pbx version
-		echo "<tr class='tr_link_void'>\n";
-		echo "<td valign='top' class='".$row_style[$c]." hud_text'>".(isset($_SESSION['theme']['title']['text'])?$_SESSION['theme']['title']['text']:'FusionPBX')."</td>\n";
-		echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'>".software::version()."</td>\n";
+	if ($dashboard_details_state != 'disabled') {
+		echo "<div class='hud_details hud_box' id='hud_system_status_details'>";
+		echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";
+		echo "<tr>\n";
+		echo "<th class='hud_heading' width='50%'>".$text['label-item']."</th>\n";
+		echo "<th class='hud_heading' style='text-align: right;'>".$text['label-value']."</th>\n";
 		echo "</tr>\n";
-		$c = ($c) ? 0 : 1;
 
-	//os uptime
-		if (stristr(PHP_OS, 'Linux')) {
-			$prefix = 'up ';
-			$linux_uptime = shell_exec('uptime  -p');
-			$uptime = substr($linux_uptime, strlen($prefix));
-			if (!empty($uptime)) {
-				echo "<tr class='tr_link_void'>\n";
-				echo "<td valign='top' class='".$row_style[$c]." hud_text'>".$text['label-system_uptime']."</td>\n";
-				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'>".$uptime."</td>\n";
-				echo "</tr>\n";
-				$c = ($c) ? 0 : 1;
-			}
-		}
-
-	//memory usage (for available memory, use "free | awk 'FNR == 3 {print $4/($3+$4)*100}'" instead)
-		if (stristr(PHP_OS, 'Linux')) {
-			$free = shell_exec("/usr/bin/which free");
-			$awk = shell_exec("/usr/bin/which awk");
-			$percent_memory = round((float)shell_exec(escapeshellcmd($free." | ".$awk." 'FNR == 3 {print $3/($3+$4)*100}'")), 1);
-			if (!empty($percent_memory)) {
-				echo "<tr class='tr_link_void'>\n";
-				echo "<td valign='top' class='".$row_style[$c]." hud_text'>".$text['label-memory_usage']."</td>\n";
-				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'>".$percent_memory."%</td>\n";
-				echo "</tr>\n";
-				$c = ($c) ? 0 : 1;
-			}
-		}
-
-	//memory available
-		if (stristr(PHP_OS, 'Linux')) {
-			$result = trim(shell_exec('free -hw | grep \'Mem:\' | cut -d\' \' -f 55-64'));
-			if (!empty($result)) {
-				echo "<tr class='tr_link_void'>\n";
-				echo "<td valign='top' class='".$row_style[$c]." hud_text'>".$text['label-memory_available']."</td>\n";
-				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'>".$result."</td>\n";
-				echo "</tr>\n";
-				$c = ($c) ? 0 : 1;
-			}
-		}
-
-	//disk usage
-		if (stristr(PHP_OS, 'Linux')) {
-			//calculated above
-			if (!empty($percent_disk_usage)) {
-				echo "<tr class='tr_link_void'>\n";
-				echo "<td valign='top' class='".$row_style[$c]." hud_text'>".$text['label-disk_usage']."</td>\n";
-				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'>".$percent_disk_usage."%</td>\n";
-				echo "</tr>\n";
-				$c = ($c) ? 0 : 1;
-			}
-		}
-
-	//db connections
-		switch ($db_type) {
-			case 'pgsql':
-				$sql = "select count(*) from pg_stat_activity";
-				break;
-			case 'mysql':
-				$sql = "show status where `variable_name` = 'Threads_connected'";
-				break;
-			default:
-				unset($sql);
-				if (!empty($db_path) && !empty($dbfilename)) {
-					$tmp =  shell_exec("lsof ".realpath($db_path).'/'.$dbfilename);
-					$tmp = explode("\n", $tmp);
-					$connections = sizeof($tmp) - 1;
-				}
-		}
-		if (!empty($sql)) {
-			if (!isset($database)) { $database = new database; }
-			$connections = $database->select($sql, null, 'column');
-			unset($sql);
-		}
-		if (!empty($connections)) {
+		//pbx version
 			echo "<tr class='tr_link_void'>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text'>".$text['label-database_connections']."</td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'>".$connections."</td>\n";
+			echo "<td valign='top' class='".$row_style[$c]." hud_text'>".(isset($_SESSION['theme']['title']['text'])?$_SESSION['theme']['title']['text']:'FusionPBX')."</td>\n";
+			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'>".software::version()."</td>\n";
 			echo "</tr>\n";
 			$c = ($c) ? 0 : 1;
-		}
 
-	//channel count
-		$esl = event_socket::create();
-		if ($esl->is_connected()) {
-			$tmp = event_socket::api('status');
-			$matches = Array();
-			preg_match("/(\d+)\s+session\(s\)\s+\-\speak/", $tmp, $matches);
-			$channels = !empty($matches[1]) ? $matches[1] : 0;
-			$tr_link = "href='".PROJECT_PATH."/app/calls_active/calls_active.php'";
-			echo "<tr ".$tr_link.">\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text'><a ".$tr_link.">".$text['label-channels']."</a></td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'>".$channels."</td>\n";
-			echo "</tr>\n";
-			$c = ($c) ? 0 : 1;
-		}
+		//os uptime
+			if (stristr(PHP_OS, 'Linux')) {
+				$prefix = 'up ';
+				$linux_uptime = shell_exec('uptime  -p');
+				$uptime = substr($linux_uptime, strlen($prefix));
+				if (!empty($uptime)) {
+					echo "<tr class='tr_link_void'>\n";
+					echo "<td valign='top' class='".$row_style[$c]." hud_text'>".$text['label-system_uptime']."</td>\n";
+					echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'>".$uptime."</td>\n";
+					echo "</tr>\n";
+					$c = ($c) ? 0 : 1;
+				}
+			}
 
-	//registration count
-		if ($esl->is_connected() && file_exists($_SERVER["DOCUMENT_ROOT"].PROJECT_PATH."/app/registrations/")) {
-			$registration = new registrations;
-			$registrations = $registration->count();
-			$tr_link = "href='".PROJECT_PATH."/app/registrations/registrations.php'";
-			echo "<tr ".$tr_link.">\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text'><a ".$tr_link.">".$text['label-registrations']."</a></td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'>".$registrations."</td>\n";
-			echo "</tr>\n";
-			$c = ($c) ? 0 : 1;
-		}
+		//memory usage (for available memory, use "free | awk 'FNR == 3 {print $4/($3+$4)*100}'" instead)
+			if (stristr(PHP_OS, 'Linux')) {
+				$free = shell_exec("/usr/bin/which free");
+				$awk = shell_exec("/usr/bin/which awk");
+				$percent_memory = round((float)shell_exec(escapeshellcmd($free." | ".$awk." 'FNR == 3 {print $3/($3+$4)*100}'")), 1);
+				if (!empty($percent_memory)) {
+					echo "<tr class='tr_link_void'>\n";
+					echo "<td valign='top' class='".$row_style[$c]." hud_text'>".$text['label-memory_usage']."</td>\n";
+					echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'>".$percent_memory."%</td>\n";
+					echo "</tr>\n";
+					$c = ($c) ? 0 : 1;
+				}
+			}
 
-	echo "</table>\n";
-	echo "</div>";
-	//$n++;
+		//memory available
+			if (stristr(PHP_OS, 'Linux')) {
+				$result = trim(shell_exec('free -hw | grep \'Mem:\' | cut -d\' \' -f 55-64'));
+				if (!empty($result)) {
+					echo "<tr class='tr_link_void'>\n";
+					echo "<td valign='top' class='".$row_style[$c]." hud_text'>".$text['label-memory_available']."</td>\n";
+					echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'>".$result."</td>\n";
+					echo "</tr>\n";
+					$c = ($c) ? 0 : 1;
+				}
+			}
 
-	echo "<span class='hud_expander' onclick=\"$('#hud_system_status_details').slideToggle('fast');\"><span class='fas fa-ellipsis-h'></span></span>";
+		//disk usage
+			if (stristr(PHP_OS, 'Linux')) {
+				//calculated above
+				if (!empty($percent_disk_usage)) {
+					echo "<tr class='tr_link_void'>\n";
+					echo "<td valign='top' class='".$row_style[$c]." hud_text'>".$text['label-disk_usage']."</td>\n";
+					echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'>".$percent_disk_usage."%</td>\n";
+					echo "</tr>\n";
+					$c = ($c) ? 0 : 1;
+				}
+			}
+
+		//db connections
+			switch ($db_type) {
+				case 'pgsql':
+					$sql = "select count(*) from pg_stat_activity";
+					break;
+				case 'mysql':
+					$sql = "show status where `variable_name` = 'Threads_connected'";
+					break;
+				default:
+					unset($sql);
+					if (!empty($db_path) && !empty($dbfilename)) {
+						$tmp =  shell_exec("lsof ".realpath($db_path).'/'.$dbfilename);
+						$tmp = explode("\n", $tmp);
+						$connections = sizeof($tmp) - 1;
+					}
+			}
+			if (!empty($sql)) {
+				if (!isset($database)) { $database = new database; }
+				$connections = $database->select($sql, null, 'column');
+				unset($sql);
+			}
+			if (!empty($connections)) {
+				echo "<tr class='tr_link_void'>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text'>".$text['label-database_connections']."</td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'>".$connections."</td>\n";
+				echo "</tr>\n";
+				$c = ($c) ? 0 : 1;
+			}
+
+		//channel count
+			$esl = event_socket::create();
+			if ($esl->is_connected()) {
+				$tmp = event_socket::api('status');
+				$matches = Array();
+				preg_match("/(\d+)\s+session\(s\)\s+\-\speak/", $tmp, $matches);
+				$channels = !empty($matches[1]) ? $matches[1] : 0;
+				$tr_link = "href='".PROJECT_PATH."/app/calls_active/calls_active.php'";
+				echo "<tr ".$tr_link.">\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text'><a ".$tr_link.">".$text['label-channels']."</a></td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'>".$channels."</td>\n";
+				echo "</tr>\n";
+				$c = ($c) ? 0 : 1;
+			}
+
+		//registration count
+			if ($esl->is_connected() && file_exists($_SERVER["DOCUMENT_ROOT"].PROJECT_PATH."/app/registrations/")) {
+				$registration = new registrations;
+				$registrations = $registration->count();
+				$tr_link = "href='".PROJECT_PATH."/app/registrations/registrations.php'";
+				echo "<tr ".$tr_link.">\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text'><a ".$tr_link.">".$text['label-registrations']."</a></td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' style='text-align: right;'>".$registrations."</td>\n";
+				echo "</tr>\n";
+				$c = ($c) ? 0 : 1;
+			}
+
+		echo "</table>\n";
+		echo "</div>";
+		//$n++;
+
+		echo "<span class='hud_expander' onclick=\"$('#hud_system_status_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_name."')\"><span class='fas fa-ellipsis-h'></span></span>";
+	}
 	echo "</div>\n";
 ?>
diff --git a/app/voicemails/resources/dashboard/voicemails.php b/app/voicemails/resources/dashboard/voicemails.php
index 0cba3ab1df..7d3183fabe 100644
--- a/app/voicemails/resources/dashboard/voicemails.php
+++ b/app/voicemails/resources/dashboard/voicemails.php
@@ -52,13 +52,13 @@
 		}
 	}
 
-	echo "<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 13px; background-color: ".$dashboard_number_background_color.";' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_voicemail_details').slideToggle('fast');\"").">\n";
-	echo "	<span class='hud_title' style='background-color: ".$dashboard_heading_background_color."; color: ".$dashboard_heading_text_color.";' onclick=\"document.location.href='".PROJECT_PATH."/app/voicemails/voicemail_messages.php'\">".$text['label-new_messages']."</span>";
+	echo "<div class='hud_container' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_voicemail_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_name."')\"").">\n";
+	echo "	<span class='hud_title' onclick=\"document.location.href='".PROJECT_PATH."/app/voicemails/voicemail_messages.php'\">".$text['label-new_messages']."</span>";
 
 	if ($dashboard_chart_type == "doughnut") {
 		//add doughnut chart
 		?>
-		<div style='width: 150px; height: 150px; padding-top: 7px;'><canvas id='new_messages_chart'></canvas></div>
+		<div class='hud_chart'><canvas id='new_messages_chart'></canvas></div>
 
 		<script>
 			const new_messages_chart = new Chart(
@@ -101,44 +101,47 @@
 		<?php
 	}
 	if ($dashboard_chart_type == "none") {
-		echo "	<span class='hud_stat' style='padding-bottom: 27px; color: ".$dashboard_number_text_color.";'>".$messages['new']."</span>";
+		echo "	<span class='hud_stat'>".$messages['new']."</span>";
 	}
 	echo "</div>\n";
 
-	echo "<div class='hud_details hud_box' id='hud_voicemail_details'>";
-	if (sizeof($voicemails) > 0) {
-		echo "<table class='tr_hover' cellpadding='2' cellspacing='0' border='0' width='100%'>";
-		echo "<tr>";
-		echo "	<th class='hud_heading' width='50%'>".$text['label-voicemail']."</th>";
-		echo "	<th class='hud_heading' style='text-align: center;' width='50%'>".$text['label-new']."</th>";
-		echo "	<th class='hud_heading' style='text-align: center;'>".$text['label-total']."</th>";
-		echo "</tr>";
+	if ($dashboard_details_state != 'disabled') {
+		echo "<div class='hud_details hud_box' id='hud_voicemail_details'>";
+		if (sizeof($voicemails) > 0) {
+			echo "<table class='tr_hover' cellpadding='2' cellspacing='0' border='0' width='100%'>";
+			echo "<tr>";
+			echo "	<th class='hud_heading' width='50%'>".$text['label-voicemail']."</th>";
+			echo "	<th class='hud_heading' style='text-align: center;' width='50%'>".$text['label-new']."</th>";
+			echo "	<th class='hud_heading' style='text-align: center;'>".$text['label-total']."</th>";
+			echo "</tr>";
 
-		$c = 0;
-		$row_style["0"] = "row_style0";
-		$row_style["1"] = "row_style1";
+			$c = 0;
+			$row_style["0"] = "row_style0";
+			$row_style["1"] = "row_style1";
 
-		foreach ($messages as $voicemail_uuid => $row) {
-			if (is_uuid($voicemail_uuid)) {
-				$tr_link = "href='".PROJECT_PATH."/app/voicemails/voicemail_messages.php?id=".(permission_exists('voicemail_view') ? $voicemail_uuid : $row['ext'])."'";
-				echo "<tr ".$tr_link." style='cursor: pointer;'>";
-				echo "	<td class='".$row_style[$c]." hud_text'><a href='".PROJECT_PATH."/app/voicemails/voicemail_messages.php?id=".(permission_exists('voicemail_view') ? $voicemail_uuid : $row['ext'])."&back=".urlencode($_SERVER["REQUEST_URI"])."'>".$row['ext']."</a></td>";
-				echo "	<td class='".$row_style[$c]." hud_text' style='text-align: center;'>".$row['new']."</td>";
-				echo "	<td class='".$row_style[$c]." hud_text' style='text-align: center;'>".$row['total']."</td>";
-				echo "</tr>";
-				$c = ($c) ? 0 : 1;
+			foreach ($messages as $voicemail_uuid => $row) {
+				if (is_uuid($voicemail_uuid)) {
+					$tr_link = "href='".PROJECT_PATH."/app/voicemails/voicemail_messages.php?id=".(permission_exists('voicemail_view') ? $voicemail_uuid : $row['ext'])."'";
+					echo "<tr ".$tr_link." style='cursor: pointer;'>";
+					echo "	<td class='".$row_style[$c]." hud_text'><a href='".PROJECT_PATH."/app/voicemails/voicemail_messages.php?id=".(permission_exists('voicemail_view') ? $voicemail_uuid : $row['ext'])."&back=".urlencode($_SERVER["REQUEST_URI"])."'>".$row['ext']."</a></td>";
+					echo "	<td class='".$row_style[$c]." hud_text' style='text-align: center;'>".$row['new']."</td>";
+					echo "	<td class='".$row_style[$c]." hud_text' style='text-align: center;'>".$row['total']."</td>";
+					echo "</tr>";
+					$c = ($c) ? 0 : 1;
+				}
 			}
+
+			echo "</table>";
 		}
+		else {
+			echo "<br />".$text['label-no_voicemail_assigned'];
+		}
+		echo "</div>";
+		//$n++;
 
-		echo "</table>";
+		echo "<span class='hud_expander' onclick=\"$('#hud_voicemail_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_name."')\"><span class='fas fa-ellipsis-h'></span></span>";
 	}
-	else {
-		echo "<br />".$text['label-no_voicemail_assigned'];
-	}
-	echo "</div>";
-	//$n++;
 
-	echo "<span class='hud_expander' onclick=\"$('#hud_voicemail_details').slideToggle('fast');\"><span class='fas fa-ellipsis-h'></span></span>";
 	echo "</div>\n";
 
 ?>
diff --git a/app/xml_cdr/resources/dashboard/missed_calls.php b/app/xml_cdr/resources/dashboard/missed_calls.php
index 10a8924339..f34ecdfcc1 100644
--- a/app/xml_cdr/resources/dashboard/missed_calls.php
+++ b/app/xml_cdr/resources/dashboard/missed_calls.php
@@ -90,13 +90,13 @@
 //missed calls
 	echo "<div class='hud_box'>\n";
 
-	echo "<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 13px; background-color: ".$dashboard_number_background_color.";' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_missed_calls_details').slideToggle('fast');\"").">\n";
-	echo "	<span class='hud_title' style='background-color: ".$dashboard_heading_background_color."; color: ".$dashboard_heading_text_color.";' onclick=\"document.location.href='".PROJECT_PATH."/app/xml_cdr/xml_cdr.php?call_result=missed'\">".$text['label-missed_calls']."</span>";
+	echo "<div class='hud_container' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_missed_calls_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_name."')\"").">\n";
+	echo "	<span class='hud_title' onclick=\"document.location.href='".PROJECT_PATH."/app/xml_cdr/xml_cdr.php?call_result=missed'\">".$text['label-missed_calls']."</span>";
 
 	if ($dashboard_chart_type == "doughnut") {
 		//add doughnut chart
 		?>
-		<div style='height: 150px; padding-top: 7px;'><canvas id='missed_calls_chart'></canvas></div>
+		<div class='hud_chart'><canvas id='missed_calls_chart'></canvas></div>
 
 		<script>
 			const missed_calls_chart = new Chart(
@@ -139,71 +139,73 @@
 		<?php
 	}
 	if ($dashboard_chart_type == "none") {
-		echo "<span class='hud_stat' style='padding-bottom: 27px; color: ".$dashboard_number_text_color.";'>".$num_rows."</span>";
+		echo "<span class='hud_stat'>".$num_rows."</span>";
 	}
 	echo "</div>\n";
 
-	echo "<div class='hud_details hud_box' id='hud_missed_calls_details'>";
-	echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";
-	echo "<tr>\n";
-	if ($num_rows > 0) {
-		echo "<th class='hud_heading'>&nbsp;</th>\n";
-	}
-	echo "<th class='hud_heading' width='100%'>".$text['label-cid_number']."</th>\n";
-	echo "<th class='hud_heading'>".$text['label-missed']."</th>\n";
-	echo "</tr>\n";
-
-	if ($num_rows > 0) {
-		$theme_cdr_images_exist = (
-			file_exists($theme_image_path."icon_cdr_inbound_voicemail.png") &&
-			file_exists($theme_image_path."icon_cdr_inbound_cancelled.png") &&
-			file_exists($theme_image_path."icon_cdr_local_voicemail.png") &&
-			file_exists($theme_image_path."icon_cdr_local_cancelled.png")
-			) ? true : false;
-
-		foreach ($result as $index => $row) {
-			$start_date_time = str_replace('/0','/', ltrim($row['start_date_time'], '0'));
-			if (!empty($_SESSION['domain']['time_format']) && $_SESSION['domain']['time_format']['text'] == '12h') {
-				$start_date_time = str_replace(' 0',' ', $start_date_time);
-			}
-			//set click-to-call variables
-			if (permission_exists('click_to_call_call')) {
-				$tr_link = "onclick=\"send_cmd('".PROJECT_PATH."/app/click_to_call/click_to_call.php".
-					"?src_cid_name=".urlencode($row['caller_id_name'] ?? '').
-					"&src_cid_number=".urlencode($row['caller_id_number'] ?? '').
-					"&dest_cid_name=".urlencode($_SESSION['user']['extension'][0]['outbound_caller_id_name'] ?? '').
-					"&dest_cid_number=".urlencode($_SESSION['user']['extension'][0]['outbound_caller_id_number'] ?? '').
-					"&src=".urlencode($_SESSION['user']['extension'][0]['user'] ?? '').
-					"&dest=".urlencode($row['caller_id_number'] ?? '').
-					"&rec=".(isset($_SESSION['click_to_call']['record']['boolean']) ? $_SESSION['click_to_call']['record']['boolean'] : "false").
-					"&ringback=".(isset($_SESSION['click_to_call']['ringback']['text']) ? $_SESSION['click_to_call']['ringback']['text'] : "us-ring").
-					"&auto_answer=".(isset($_SESSION['click_to_call']['auto_answer']['boolean']) ? $_SESSION['click_to_call']['auto_answer']['boolean'] : "true").
-					"');\" ".
-					"style='cursor: pointer;'";
-			}
-			echo "<tr ".$tr_link.">\n";
-			echo "<td valign='middle' class='".$row_style[$c]."' style='cursor: help; padding: 0 0 0 6px;'>\n";
-			if ($theme_cdr_images_exist) {
-				$call_result = $row['status'];
-				if (isset($row['direction'])) {
-					echo "	<img src='".PROJECT_PATH."/themes/".$_SESSION['domain']['template']['name']."/images/icon_cdr_".$row['direction']."_".$call_result.".png' width='16' style='border: none;' title='".$text['label-'.$row['direction']].": ".$text['label-'.$call_result]."'>\n";
-				}
-			}
-			echo "</td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' nowrap='nowrap'><a href='javascript:void(0);' ".(($row['caller_id_name'] != '') ? "title=\"".$row['caller_id_name']."\"" : null).">".((is_numeric($row['caller_id_number'])) ? format_phone($row['caller_id_number']) : $row['caller_id_number'])."</td>\n";
-			echo "<td valign='top' class='".$row_style[$c]." hud_text' nowrap='nowrap'>".$start_date_time."</td>\n";
-			echo "</tr>\n";
-			$c = ($c) ? 0 : 1;
+	if ($dashboard_details_state != 'disabled') {
+		echo "<div class='hud_details hud_box' id='hud_missed_calls_details'>";
+		echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";
+		echo "<tr>\n";
+		if ($num_rows > 0) {
+			echo "<th class='hud_heading'>&nbsp;</th>\n";
 		}
+		echo "<th class='hud_heading' width='100%'>".$text['label-cid_number']."</th>\n";
+		echo "<th class='hud_heading'>".$text['label-missed']."</th>\n";
+		echo "</tr>\n";
+
+		if ($num_rows > 0) {
+			$theme_cdr_images_exist = (
+				file_exists($theme_image_path."icon_cdr_inbound_voicemail.png") &&
+				file_exists($theme_image_path."icon_cdr_inbound_cancelled.png") &&
+				file_exists($theme_image_path."icon_cdr_local_voicemail.png") &&
+				file_exists($theme_image_path."icon_cdr_local_cancelled.png")
+				) ? true : false;
+
+			foreach ($result as $index => $row) {
+				$start_date_time = str_replace('/0','/', ltrim($row['start_date_time'], '0'));
+				if (!empty($_SESSION['domain']['time_format']) && $_SESSION['domain']['time_format']['text'] == '12h') {
+					$start_date_time = str_replace(' 0',' ', $start_date_time);
+				}
+				//set click-to-call variables
+				if (permission_exists('click_to_call_call')) {
+					$tr_link = "onclick=\"send_cmd('".PROJECT_PATH."/app/click_to_call/click_to_call.php".
+						"?src_cid_name=".urlencode($row['caller_id_name'] ?? '').
+						"&src_cid_number=".urlencode($row['caller_id_number'] ?? '').
+						"&dest_cid_name=".urlencode($_SESSION['user']['extension'][0]['outbound_caller_id_name'] ?? '').
+						"&dest_cid_number=".urlencode($_SESSION['user']['extension'][0]['outbound_caller_id_number'] ?? '').
+						"&src=".urlencode($_SESSION['user']['extension'][0]['user'] ?? '').
+						"&dest=".urlencode($row['caller_id_number'] ?? '').
+						"&rec=".(isset($_SESSION['click_to_call']['record']['boolean']) ? $_SESSION['click_to_call']['record']['boolean'] : "false").
+						"&ringback=".(isset($_SESSION['click_to_call']['ringback']['text']) ? $_SESSION['click_to_call']['ringback']['text'] : "us-ring").
+						"&auto_answer=".(isset($_SESSION['click_to_call']['auto_answer']['boolean']) ? $_SESSION['click_to_call']['auto_answer']['boolean'] : "true").
+						"');\" ".
+						"style='cursor: pointer;'";
+				}
+				echo "<tr ".$tr_link.">\n";
+				echo "<td valign='middle' class='".$row_style[$c]."' style='cursor: help; padding: 0 0 0 6px;'>\n";
+				if ($theme_cdr_images_exist) {
+					$call_result = $row['status'];
+					if (isset($row['direction'])) {
+						echo "	<img src='".PROJECT_PATH."/themes/".$_SESSION['domain']['template']['name']."/images/icon_cdr_".$row['direction']."_".$call_result.".png' width='16' style='border: none;' title='".$text['label-'.$row['direction']].": ".$text['label-'.$call_result]."'>\n";
+					}
+				}
+				echo "</td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' nowrap='nowrap'><a href='javascript:void(0);' ".(($row['caller_id_name'] != '') ? "title=\"".$row['caller_id_name']."\"" : null).">".((is_numeric($row['caller_id_number'])) ? format_phone($row['caller_id_number']) : $row['caller_id_number'])."</td>\n";
+				echo "<td valign='top' class='".$row_style[$c]." hud_text' nowrap='nowrap'>".$start_date_time."</td>\n";
+				echo "</tr>\n";
+				$c = ($c) ? 0 : 1;
+			}
+		}
+		unset($sql, $parameters, $result, $num_rows, $index, $row);
+
+		echo "</table>\n";
+		echo "<span style='display: block; margin: 6px 0 7px 0;'><a href='".PROJECT_PATH."/app/xml_cdr/xml_cdr.php?status=missed'>".$text['label-view_all']."</a></span>\n";
+		echo "</div>";
+		//$n++;
+
+		echo "<span class='hud_expander' onclick=\"$('#hud_missed_calls_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_name."')\"><span class='fas fa-ellipsis-h'></span></span>";
 	}
-	unset($sql, $parameters, $result, $num_rows, $index, $row);
-
-	echo "</table>\n";
-	echo "<span style='display: block; margin: 6px 0 7px 0;'><a href='".PROJECT_PATH."/app/xml_cdr/xml_cdr.php?status=missed'>".$text['label-view_all']."</a></span>\n";
-	echo "</div>";
-	//$n++;
-
-	echo "<span class='hud_expander' onclick=\"$('#hud_missed_calls_details').slideToggle('fast');\"><span class='fas fa-ellipsis-h'></span></span>";
 	echo "</div>\n";
 
 ?>
diff --git a/app/xml_cdr/resources/dashboard/recent_calls.php b/app/xml_cdr/resources/dashboard/recent_calls.php
index c9484121ef..4e7d5e7b11 100644
--- a/app/xml_cdr/resources/dashboard/recent_calls.php
+++ b/app/xml_cdr/resources/dashboard/recent_calls.php
@@ -87,14 +87,14 @@
 //recent calls
 	echo "<div class='hud_box'>\n";
 
-	echo "<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 13px; background-color: ".$dashboard_number_background_color.";' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_recent_calls_details').slideToggle('fast');\"").">\n";
-	echo "	<span class='hud_title' style='background-color: ".$dashboard_heading_background_color."; color: ".$dashboard_heading_text_color.";' onclick=\"document.location.href='".PROJECT_PATH."/app/xml_cdr/xml_cdr.php';\">".$text['label-recent_calls']."</span>\n";
+	echo "<div class='hud_container' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_recent_calls_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_name."')\"").">\n";
+	echo "	<span class='hud_title' onclick=\"document.location.href='".PROJECT_PATH."/app/xml_cdr/xml_cdr.php';\">".$text['label-recent_calls']."</span>\n";
 
 	if ($dashboard_chart_type == "doughnut") {
 		//add doughnut chart
 		?>
 
-		<div style='width: 150px; height: 150px; padding-top: 7px;'><canvas id='recent_calls_chart'></canvas></div>
+		<div class='hud_chart'><canvas id='recent_calls_chart'></canvas></div>
 
 		<script>
 			const recent_calls_chart = new Chart(
@@ -137,95 +137,94 @@
 		<?php
 	}
 	if ($dashboard_chart_type == "none") {
-		echo "<span class='hud_stat' style='padding-bottom: 27px; color: ".$dashboard_number_text_color.";'>".$num_rows."</span>";
+		echo "<span class='hud_stat'>".$num_rows."</span>";
 	}
 	echo "</div>\n";
 
-	echo "<div class='hud_details hud_box' id='hud_recent_calls_details'>";
-	echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";
-	echo "<tr>\n";
-	if ($num_rows > 0) {
-		echo "<th class='hud_heading'>&nbsp;</th>\n";
-	}
-	echo "<th class='hud_heading' width='100%'>".$text['label-cid_number']."</th>\n";
-	echo "<th class='hud_heading'>".$text['label-date_time']."</th>\n";
-	echo "</tr>\n";
-
-	if ($num_rows > 0) {
-		$theme_cdr_images_exist = (
-			file_exists($theme_image_path."icon_cdr_inbound_answered.png") &&
-			file_exists($theme_image_path."icon_cdr_inbound_voicemail.png") &&
-			file_exists($theme_image_path."icon_cdr_inbound_cancelled.png") &&
-			file_exists($theme_image_path."icon_cdr_inbound_failed.png") &&
-			file_exists($theme_image_path."icon_cdr_outbound_answered.png") &&
-			file_exists($theme_image_path."icon_cdr_outbound_cancelled.png") &&
-			file_exists($theme_image_path."icon_cdr_outbound_failed.png") &&
-			file_exists($theme_image_path."icon_cdr_local_answered.png") &&
-			file_exists($theme_image_path."icon_cdr_local_voicemail.png") &&
-			file_exists($theme_image_path."icon_cdr_local_cancelled.png") &&
-			file_exists($theme_image_path."icon_cdr_local_failed.png")
-			) ? true : false;
-
-		foreach ($result as $index => $row) {
-			$start_date_time = str_replace('/0','/', ltrim($row['start_date_time'], '0'));
-			if (!empty($_SESSION['domain']['time_format']) && $_SESSION['domain']['time_format']['text'] == '12h') {
-				$start_date_time = str_replace(' 0',' ', $start_date_time);
-			}
-
-			//determine name
-			$cdr_name = ($row['direction'] == 'inbound' || ($row['direction'] == 'local' && !empty($assigned_extensions) && is_array($assigned_extensions) && in_array($row['destination_number'], $assigned_extensions))) ? $row['caller_id_name'] : $row['destination_number'];
-
-			//determine number to display
-			if ($row['direction'] == 'inbound' || ($row['direction'] == 'local' && !empty($assigned_extensions) && is_array($assigned_extensions) && in_array($row['destination_number'], $assigned_extensions))) {
-				$cdr_number = (is_numeric($row['caller_id_number'])) ? format_phone($row['caller_id_number']) : $row['caller_id_number'];
-				$dest = $row['caller_id_number'];
-			}
-			else if ($row['direction'] == 'outbound' || ($row['direction'] == 'local' && !empty($assigned_extensions) && is_array($assigned_extensions) && in_array($row['caller_id_number'], $assigned_extensions))) {
-				$cdr_number = (is_numeric($row['destination_number'])) ? format_phone($row['destination_number']) : $row['destination_number'];
-				$dest = $row['destination_number'];
-			}
-
-			//set click-to-call variables
-			if (permission_exists('click_to_call_call')) {
-				$tr_link = "onclick=\"send_cmd('".PROJECT_PATH."/app/click_to_call/click_to_call.php".
-					"?src_cid_name=".urlencode($cdr_name ?? '').
-					"&src_cid_number=".urlencode($cdr_number ?? '').
-					"&dest_cid_name=".urlencode($_SESSION['user']['extension'][0]['outbound_caller_id_name'] ?? '').
-					"&dest_cid_number=".urlencode($_SESSION['user']['extension'][0]['outbound_caller_id_number'] ?? '').
-					"&src=".urlencode($_SESSION['user']['extension'][0]['user'] ?? '').
-					"&dest=".urlencode($dest ?? '').
-					"&rec=".(isset($_SESSION['click_to_call']['record']['boolean']) ? $_SESSION['click_to_call']['record']['boolean'] : "false").
-					"&ringback=".(isset($_SESSION['click_to_call']['ringback']['text']) ? $_SESSION['click_to_call']['ringback']['text'] : "us-ring").
-					"&auto_answer=".(isset($_SESSION['click_to_call']['auto_answer']['boolean']) ? $_SESSION['click_to_call']['auto_answer']['boolean'] : "true").
-					"');\" ".
-					"style='cursor: pointer;'";
-			}
-
-			//show the icon, caller details and date time
-			echo "<tr ".$tr_link.">\n";
-			echo "	<td valign='middle' class='".$row_style[$c]."' style='cursor: help; padding: 0 0 0 6px;'>\n";
-			if ($theme_cdr_images_exist) { 
-				$label_call_status = (isset($text['label-'.$row['status']])) ? $text['label-'.$row['status']] : '';
-				if (isset($row['direction'])) {
-					echo "		<img src='".PROJECT_PATH."/themes/".$_SESSION['domain']['template']['name']."/images/icon_cdr_".$row['direction']."_".urlencode($row['status']).".png' width='16' style='border: none;' title='".$text['label-'.$row['direction']].": ".$label_call_status."'>\n";
-				}
-			}
-			echo "	</td>\n";
-			echo "	<td valign='top' class='".$row_style[$c]." hud_text' nowrap='nowrap'><a href='javascript:void(0);' ".(!empty($cdr_name) ? "title=\"".$cdr_name."\"" : null).">".($cdr_number ?? '')."</a></td>\n";
-			echo "	<td valign='top' class='".$row_style[$c]." hud_text' nowrap='nowrap'>".$start_date_time."</td>\n";
-			echo "</tr>\n";
-
-			unset($cdr_name, $cdr_number);
-			$c = ($c) ? 0 : 1;
+	if ($dashboard_details_state != 'disabled') {
+		echo "<div class='hud_details hud_box' id='hud_recent_calls_details'>";
+		echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";
+		echo "<tr>\n";
+		if ($num_rows > 0) {
+			echo "<th class='hud_heading'>&nbsp;</th>\n";
 		}
+		echo "<th class='hud_heading' width='100%'>".$text['label-cid_number']."</th>\n";
+		echo "<th class='hud_heading'>".$text['label-date_time']."</th>\n";
+		echo "</tr>\n";
+
+		if ($num_rows > 0) {
+			$theme_cdr_images_exist = (
+				file_exists($theme_image_path."icon_cdr_inbound_answered.png") &&
+				file_exists($theme_image_path."icon_cdr_inbound_voicemail.png") &&
+				file_exists($theme_image_path."icon_cdr_inbound_cancelled.png") &&
+				file_exists($theme_image_path."icon_cdr_inbound_failed.png") &&
+				file_exists($theme_image_path."icon_cdr_outbound_answered.png") &&
+				file_exists($theme_image_path."icon_cdr_outbound_cancelled.png") &&
+				file_exists($theme_image_path."icon_cdr_outbound_failed.png") &&
+				file_exists($theme_image_path."icon_cdr_local_answered.png") &&
+				file_exists($theme_image_path."icon_cdr_local_voicemail.png") &&
+				file_exists($theme_image_path."icon_cdr_local_cancelled.png") &&
+				file_exists($theme_image_path."icon_cdr_local_failed.png")
+				) ? true : false;
+
+			foreach ($result as $index => $row) {
+				$start_date_time = str_replace('/0','/', ltrim($row['start_date_time'], '0'));
+				if (!empty($_SESSION['domain']['time_format']) && $_SESSION['domain']['time_format']['text'] == '12h') {
+					$start_date_time = str_replace(' 0',' ', $start_date_time);
+				}
+
+				//determine name
+					$cdr_name = ($row['direction'] == 'inbound' || ($row['direction'] == 'local' && !empty($assigned_extensions) && is_array($assigned_extensions) && in_array($row['destination_number'], $assigned_extensions))) ? $row['caller_id_name'] : $row['destination_number'];
+				//determine number to display
+					if ($row['direction'] == 'inbound' || ($row['direction'] == 'local' && !empty($assigned_extensions) && is_array($assigned_extensions) && in_array($row['destination_number'], $assigned_extensions))) {
+						$cdr_number = (is_numeric($row['caller_id_number'])) ? format_phone($row['caller_id_number']) : $row['caller_id_number'];
+						$dest = $row['caller_id_number'];
+					}
+					else if ($row['direction'] == 'outbound' || ($row['direction'] == 'local' && !empty($assigned_extensions) && is_array($assigned_extensions) && in_array($row['caller_id_number'], $assigned_extensions))) {
+						$cdr_number = (is_numeric($row['destination_number'])) ? format_phone($row['destination_number']) : $row['destination_number'];
+						$dest = $row['destination_number'];
+					}
+				//set click-to-call variables
+					if (permission_exists('click_to_call_call')) {
+						$tr_link = "onclick=\"send_cmd('".PROJECT_PATH."/app/click_to_call/click_to_call.php".
+							"?src_cid_name=".urlencode($cdr_name ?? '').
+							"&src_cid_number=".urlencode($cdr_number ?? '').
+							"&dest_cid_name=".urlencode($_SESSION['user']['extension'][0]['outbound_caller_id_name'] ?? '').
+							"&dest_cid_number=".urlencode($_SESSION['user']['extension'][0]['outbound_caller_id_number'] ?? '').
+							"&src=".urlencode($_SESSION['user']['extension'][0]['user'] ?? '').
+							"&dest=".urlencode($dest ?? '').
+							"&rec=".(isset($_SESSION['click_to_call']['record']['boolean']) ? $_SESSION['click_to_call']['record']['boolean'] : "false").
+							"&ringback=".(isset($_SESSION['click_to_call']['ringback']['text']) ? $_SESSION['click_to_call']['ringback']['text'] : "us-ring").
+							"&auto_answer=".(isset($_SESSION['click_to_call']['auto_answer']['boolean']) ? $_SESSION['click_to_call']['auto_answer']['boolean'] : "true").
+							"');\" ".
+							"style='cursor: pointer;'";
+					}
+				echo "<tr ".$tr_link.">\n";
+				//determine call result and appropriate icon
+					echo "<td valign='middle' class='".$row_style[$c]."' style='cursor: help; padding: 0 0 0 6px;'>\n";
+					if ($theme_cdr_images_exist) {
+						$call_result = $row['status'];
+						if (isset($row['direction'])) {
+							echo "<img src='".PROJECT_PATH."/themes/".$_SESSION['domain']['template']['name']."/images/icon_cdr_".$row['direction']."_".$call_result.".png' width='16' style='border: none;' title='".$text['label-'.$row['direction']].": ".$text['label-'.$call_result]."'>\n";
+						}
+					}
+					echo "</td>\n";
+					echo "<td valign='top' class='".$row_style[$c]." hud_text' nowrap='nowrap'><a href='javascript:void(0);' ".(!empty($cdr_name) ? "title=\"".$cdr_name."\"" : null).">".($cdr_number ?? '')."</a></td>\n";
+					echo "<td valign='top' class='".$row_style[$c]." hud_text' nowrap='nowrap'>".$start_date_time."</td>\n";
+				echo "</tr>\n";
+
+				unset($cdr_name, $cdr_number);
+				$c = ($c) ? 0 : 1;
+			}
+		}
+		unset($sql, $parameters, $result, $num_rows, $index, $row);
+
+		echo "</table>\n";
+		echo "<span style='display: block; margin: 6px 0 7px 0;'><a href='".PROJECT_PATH."/app/xml_cdr/xml_cdr.php'>".$text['label-view_all']."</a></span>\n";
+		echo "</div>";
+
+		echo "<span class='hud_expander' onclick=\"$('#hud_recent_calls_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_name."')\"><span class='fas fa-ellipsis-h'></span></span>";
 	}
-	unset($sql, $parameters, $result, $num_rows, $index, $row);
-
-	echo "</table>\n";
-	echo "<span style='display: block; margin: 6px 0 7px 0;'><a href='".PROJECT_PATH."/app/xml_cdr/xml_cdr.php'>".$text['label-view_all']."</a></span>\n";
-	echo "</div>";
-
-	echo "<span class='hud_expander' onclick=\"$('#hud_recent_calls_details').slideToggle('fast');\"><span class='fas fa-ellipsis-h'></span></span>";
 	echo "</div>\n";
 
 ?>
diff --git a/core/dashboard/app_config.php b/core/dashboard/app_config.php
index 9f8f5265d0..a87a180b98 100644
--- a/core/dashboard/app_config.php
+++ b/core/dashboard/app_config.php
@@ -72,43 +72,46 @@
 		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
 		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the dashboard path.';
 		$z++;
-
-$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_url';
-$apps[$x]['db'][$y]['fields'][$z]['type'] = 'text';
-$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
-$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the dashboard url.';
-$z++;
-$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_icon';
-$apps[$x]['db'][$y]['fields'][$z]['type'] = 'text';
-$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
-$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the dashboard icon.';
-$z++;
-
+		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_url';
+		$apps[$x]['db'][$y]['fields'][$z]['type'] = 'text';
+		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
+		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the dashboard url.';
+		$z++;
+		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_icon';
+		$apps[$x]['db'][$y]['fields'][$z]['type'] = 'text';
+		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
+		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the dashboard icon.';
+		$z++;
 		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_chart_type';
 		$apps[$x]['db'][$y]['fields'][$z]['type'] = 'text';
 		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
 		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the chart type.';
 		$z++;
-		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_heading_background_color';
-		$apps[$x]['db'][$y]['fields'][$z]['type'] = 'text';
-		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
-		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the heading background color.';
-		$z++;
 		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_heading_text_color';
 		$apps[$x]['db'][$y]['fields'][$z]['type'] = 'text';
 		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
 		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the heading text color.';
 		$z++;
-		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_number_background_color';
+		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_heading_background_color';
 		$apps[$x]['db'][$y]['fields'][$z]['type'] = 'text';
 		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
-		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the number text color.';
+		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the heading background color.';
 		$z++;
 		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_number_text_color';
 		$apps[$x]['db'][$y]['fields'][$z]['type'] = 'text';
 		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
 		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the number text color.';
 		$z++;
+		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_background_color';
+		$apps[$x]['db'][$y]['fields'][$z]['type'] = 'text';
+		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
+		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the background color.';
+		$z++;
+		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_detail_background_color';
+		$apps[$x]['db'][$y]['fields'][$z]['type'] = 'text';
+		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
+		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the detail background color.';
+		$z++;
 		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_column_span';
 		$apps[$x]['db'][$y]['fields'][$z]['type'] = 'numeric';
 		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
@@ -211,4 +214,4 @@ $z++;
 	//default settings
 		$y=0;
 
-?>
\ No newline at end of file
+?>
diff --git a/core/dashboard/app_languages.php b/core/dashboard/app_languages.php
index 11e5d075bb..6b4bfc8b44 100644
--- a/core/dashboard/app_languages.php
+++ b/core/dashboard/app_languages.php
@@ -364,8 +364,8 @@ $text['label-dashboard_heading_background_color']['zh-cn'] = "";
 $text['label-dashboard_heading_background_color']['ja-jp'] = "";
 $text['label-dashboard_heading_background_color']['ko-kr'] = "";
 
-$text['description-dashboard_heading_background_color']['en-us'] = "Enter the dashboard widget heading background color";
-$text['description-dashboard_heading_background_color']['en-gb'] = "Enter the dashboard widget heading background color";
+$text['description-dashboard_heading_background_color']['en-us'] = "Enter the dashboard widget heading background color.";
+$text['description-dashboard_heading_background_color']['en-gb'] = "Enter the dashboard widget heading background color.";
 $text['description-dashboard_heading_background_color']['ar-eg'] = "";
 $text['description-dashboard_heading_background_color']['de-at'] = "";
 $text['description-dashboard_heading_background_color']['de-ch'] = "";
@@ -442,58 +442,6 @@ $text['description-dashboard_heading_text_color']['zh-cn'] = "输入仪表板小
 $text['description-dashboard_heading_text_color']['ja-jp'] = "ダッシュボード ウィジェットの見出しのテキストの色を入力します。";
 $text['description-dashboard_heading_text_color']['ko-kr'] = "대시보드 위젯 제목 텍스트 색상을 입력합니다.";
 
-$text['label-dashboard_number_background_color']['en-us'] = "Number Background Color";
-$text['label-dashboard_number_background_color']['en-gb'] = "Number Background Color";
-$text['label-dashboard_number_background_color']['ar-eg'] = "";
-$text['label-dashboard_number_background_color']['de-at'] = "";
-$text['label-dashboard_number_background_color']['de-ch'] = "";
-$text['label-dashboard_number_background_color']['de-de'] = "";
-$text['label-dashboard_number_background_color']['el-gr'] = "";
-$text['label-dashboard_number_background_color']['es-cl'] = "";
-$text['label-dashboard_number_background_color']['es-mx'] = "";
-$text['label-dashboard_number_background_color']['fr-ca'] = "";
-$text['label-dashboard_number_background_color']['fr-fr'] = "";
-$text['label-dashboard_number_background_color']['he-il'] = "";
-$text['label-dashboard_number_background_color']['it-it'] = "";
-$text['label-dashboard_number_background_color']['nl-nl'] = "";
-$text['label-dashboard_number_background_color']['pl-pl'] = "";
-$text['label-dashboard_number_background_color']['pt-br'] = "";
-$text['label-dashboard_number_background_color']['pt-pt'] = "";
-$text['label-dashboard_number_background_color']['ro-ro'] = "";
-$text['label-dashboard_number_background_color']['ru-ru'] = "";
-$text['label-dashboard_number_background_color']['sv-se'] = "";
-$text['label-dashboard_number_background_color']['uk-ua'] = "";
-$text['label-dashboard_number_background_color']['tr-tr'] = "";
-$text['label-dashboard_number_background_color']['zh-cn'] = "";
-$text['label-dashboard_number_background_color']['ja-jp'] = "";
-$text['label-dashboard_number_background_color']['ko-kr'] = "";
-
-$text['description-dashboard_number_background_color']['en-us'] = "Enter the dashboard widget number background color.";
-$text['description-dashboard_number_background_color']['en-gb'] = "Enter the dashboard widget number background color.";
-$text['description-dashboard_number_background_color']['ar-eg'] = "";
-$text['description-dashboard_number_background_color']['de-at'] = "";
-$text['description-dashboard_number_background_color']['de-ch'] = "";
-$text['description-dashboard_number_background_color']['de-de'] = "";
-$text['description-dashboard_number_background_color']['el-gr'] = "";
-$text['description-dashboard_number_background_color']['es-cl'] = "";
-$text['description-dashboard_number_background_color']['es-mx'] = "";
-$text['description-dashboard_number_background_color']['fr-ca'] = "";
-$text['description-dashboard_number_background_color']['fr-fr'] = "";
-$text['description-dashboard_number_background_color']['he-il'] = "";
-$text['description-dashboard_number_background_color']['it-it'] = "";
-$text['description-dashboard_number_background_color']['nl-nl'] = "";
-$text['description-dashboard_number_background_color']['pl-pl'] = "";
-$text['description-dashboard_number_background_color']['pt-br'] = "";
-$text['description-dashboard_number_background_color']['pt-pt'] = "";
-$text['description-dashboard_number_background_color']['ro-ro'] = "";
-$text['description-dashboard_number_background_color']['ru-ru'] = "";
-$text['description-dashboard_number_background_color']['sv-se'] = "";
-$text['description-dashboard_number_background_color']['uk-ua'] = "";
-$text['description-dashboard_number_background_color']['tr-tr'] = "";
-$text['description-dashboard_number_background_color']['zh-cn'] = "";
-$text['description-dashboard_number_background_color']['ja-jp'] = "";
-$text['description-dashboard_number_background_color']['ko-kr'] = "";
-
 $text['label-dashboard_number_text_color']['en-us'] = "Number Text Color";
 $text['label-dashboard_number_text_color']['en-gb'] = "Number Text Color";
 $text['label-dashboard_number_text_color']['ar-eg'] = "رقم لون النص";
@@ -546,6 +494,110 @@ $text['description-dashboard_number_text_color']['zh-cn'] = "输入仪表板小
 $text['description-dashboard_number_text_color']['ja-jp'] = "ダッシュボード ウィジェット番号のテキストの色を入力します。";
 $text['description-dashboard_number_text_color']['ko-kr'] = "대시보드 위젯 번호 텍스트 색상을 입력하세요.";
 
+$text['label-dashboard_background_color']['en-us'] = "Background Color";
+$text['label-dashboard_background_color']['en-gb'] = "Background Color";
+$text['label-dashboard_background_color']['ar-eg'] = "";
+$text['label-dashboard_background_color']['de-at'] = "";
+$text['label-dashboard_background_color']['de-ch'] = "";
+$text['label-dashboard_background_color']['de-de'] = "";
+$text['label-dashboard_background_color']['el-gr'] = "";
+$text['label-dashboard_background_color']['es-cl'] = "";
+$text['label-dashboard_background_color']['es-mx'] = "";
+$text['label-dashboard_background_color']['fr-ca'] = "";
+$text['label-dashboard_background_color']['fr-fr'] = "";
+$text['label-dashboard_background_color']['he-il'] = "";
+$text['label-dashboard_background_color']['it-it'] = "";
+$text['label-dashboard_background_color']['nl-nl'] = "";
+$text['label-dashboard_background_color']['pl-pl'] = "";
+$text['label-dashboard_background_color']['pt-br'] = "";
+$text['label-dashboard_background_color']['pt-pt'] = "";
+$text['label-dashboard_background_color']['ro-ro'] = "";
+$text['label-dashboard_background_color']['ru-ru'] = "";
+$text['label-dashboard_background_color']['sv-se'] = "";
+$text['label-dashboard_background_color']['uk-ua'] = "";
+$text['label-dashboard_background_color']['tr-tr'] = "";
+$text['label-dashboard_background_color']['zh-cn'] = "";
+$text['label-dashboard_background_color']['ja-jp'] = "";
+$text['label-dashboard_background_color']['ko-kr'] = "";
+
+$text['description-dashboard_background_color']['en-us'] = "Enter the dashboard widget background color.";
+$text['description-dashboard_background_color']['en-gb'] = "Enter the dashboard widget background color.";
+$text['description-dashboard_background_color']['ar-eg'] = "";
+$text['description-dashboard_background_color']['de-at'] = "";
+$text['description-dashboard_background_color']['de-ch'] = "";
+$text['description-dashboard_background_color']['de-de'] = "";
+$text['description-dashboard_background_color']['el-gr'] = "";
+$text['description-dashboard_background_color']['es-cl'] = "";
+$text['description-dashboard_background_color']['es-mx'] = "";
+$text['description-dashboard_background_color']['fr-ca'] = "";
+$text['description-dashboard_background_color']['fr-fr'] = "";
+$text['description-dashboard_background_color']['he-il'] = "";
+$text['description-dashboard_background_color']['it-it'] = "";
+$text['description-dashboard_background_color']['nl-nl'] = "";
+$text['description-dashboard_background_color']['pl-pl'] = "";
+$text['description-dashboard_background_color']['pt-br'] = "";
+$text['description-dashboard_background_color']['pt-pt'] = "";
+$text['description-dashboard_background_color']['ro-ro'] = "";
+$text['description-dashboard_background_color']['ru-ru'] = "";
+$text['description-dashboard_background_color']['sv-se'] = "";
+$text['description-dashboard_background_color']['uk-ua'] = "";
+$text['description-dashboard_background_color']['tr-tr'] = "";
+$text['description-dashboard_background_color']['zh-cn'] = "";
+$text['description-dashboard_background_color']['ja-jp'] = "";
+$text['description-dashboard_background_color']['ko-kr'] = "";
+
+$text['label-dashboard_detail_background_color']['en-us'] = "Detail Background Color";
+$text['label-dashboard_detail_background_color']['en-gb'] = "Detail Background Color";
+$text['label-dashboard_detail_background_color']['ar-eg'] = "";
+$text['label-dashboard_detail_background_color']['de-at'] = "";
+$text['label-dashboard_detail_background_color']['de-ch'] = "";
+$text['label-dashboard_detail_background_color']['de-de'] = "";
+$text['label-dashboard_detail_background_color']['el-gr'] = "";
+$text['label-dashboard_detail_background_color']['es-cl'] = "";
+$text['label-dashboard_detail_background_color']['es-mx'] = "";
+$text['label-dashboard_detail_background_color']['fr-ca'] = "";
+$text['label-dashboard_detail_background_color']['fr-fr'] = "";
+$text['label-dashboard_detail_background_color']['he-il'] = "";
+$text['label-dashboard_detail_background_color']['it-it'] = "";
+$text['label-dashboard_detail_background_color']['nl-nl'] = "";
+$text['label-dashboard_detail_background_color']['pl-pl'] = "";
+$text['label-dashboard_detail_background_color']['pt-br'] = "";
+$text['label-dashboard_detail_background_color']['pt-pt'] = "";
+$text['label-dashboard_detail_background_color']['ro-ro'] = "";
+$text['label-dashboard_detail_background_color']['ru-ru'] = "";
+$text['label-dashboard_detail_background_color']['sv-se'] = "";
+$text['label-dashboard_detail_background_color']['uk-ua'] = "";
+$text['label-dashboard_detail_background_color']['tr-tr'] = "";
+$text['label-dashboard_detail_background_color']['zh-cn'] = "";
+$text['label-dashboard_detail_background_color']['ja-jp'] = "";
+$text['label-dashboard_detail_background_color']['ko-kr'] = "";
+
+$text['description-dashboard_detail_background_color']['en-us'] = "Enter the dashboard widget detail background color.";
+$text['description-dashboard_detail_background_color']['en-gb'] = "Enter the dashboard widget detail background color.";
+$text['description-dashboard_detail_background_color']['ar-eg'] = "";
+$text['description-dashboard_detail_background_color']['de-at'] = "";
+$text['description-dashboard_detail_background_color']['de-ch'] = "";
+$text['description-dashboard_detail_background_color']['de-de'] = "";
+$text['description-dashboard_detail_background_color']['el-gr'] = "";
+$text['description-dashboard_detail_background_color']['es-cl'] = "";
+$text['description-dashboard_detail_background_color']['es-mx'] = "";
+$text['description-dashboard_detail_background_color']['fr-ca'] = "";
+$text['description-dashboard_detail_background_color']['fr-fr'] = "";
+$text['description-dashboard_detail_background_color']['he-il'] = "";
+$text['description-dashboard_detail_background_color']['it-it'] = "";
+$text['description-dashboard_detail_background_color']['nl-nl'] = "";
+$text['description-dashboard_detail_background_color']['pl-pl'] = "";
+$text['description-dashboard_detail_background_color']['pt-br'] = "";
+$text['description-dashboard_detail_background_color']['pt-pt'] = "";
+$text['description-dashboard_detail_background_color']['ro-ro'] = "";
+$text['description-dashboard_detail_background_color']['ru-ru'] = "";
+$text['description-dashboard_detail_background_color']['sv-se'] = "";
+$text['description-dashboard_detail_background_color']['uk-ua'] = "";
+$text['description-dashboard_detail_background_color']['tr-tr'] = "";
+$text['description-dashboard_detail_background_color']['zh-cn'] = "";
+$text['description-dashboard_detail_background_color']['ja-jp'] = "";
+$text['description-dashboard_detail_background_color']['ko-kr'] = "";
+
 $text['label-dashboard_column_span']['en-us'] = "Column Span";
 $text['label-dashboard_column_span']['en-gb'] = "Column Span";
 $text['label-dashboard_column_span']['ar-eg'] = "العمود سبان";
diff --git a/core/dashboard/dashboard_edit.php b/core/dashboard/dashboard_edit.php
index ff22930488..525b0bbc3b 100644
--- a/core/dashboard/dashboard_edit.php
+++ b/core/dashboard/dashboard_edit.php
@@ -70,10 +70,11 @@
 		$dashboard_url = $_POST["dashboard_url"] ?? '';
 		$dashboard_groups = $_POST["dashboard_groups"] ?? '';
 		$dashboard_chart_type = $_POST["dashboard_chart_type"] ?? '';
-		$dashboard_heading_background_color = $_POST["dashboard_heading_background_color"] ?? '';
 		$dashboard_heading_text_color = $_POST["dashboard_heading_text_color"] ?? '';
-		$dashboard_number_background_color = $_POST["dashboard_number_background_color"] ?? '';
+		$dashboard_heading_background_color = $_POST["dashboard_heading_background_color"] ?? '';
 		$dashboard_number_text_color = $_POST["dashboard_number_text_color"] ?? '';
+		$dashboard_background_color = $_POST["dashboard_background_color"] ?? '';
+		$dashboard_detail_background_color = $_POST["dashboard_detail_background_color"] ?? '';
 		$dashboard_column_span = $_POST["dashboard_column_span"] ?? '';
 		$dashboard_details_state = $_POST["dashboard_details_state"] ?? '';
 		$dashboard_order = $_POST["dashboard_order"] ?? '';
@@ -169,14 +170,25 @@
 			}
 
 		//remove empty values and convert to json
-			if (!empty($dashboard_number_background_color)) {
-				if (is_array($dashboard_number_background_color)) {
-					$dashboard_number_background_color = array_filter($dashboard_number_background_color);
-					if (count($dashboard_number_background_color) > 0) {
-						$dashboard_number_background_color = json_encode($dashboard_number_background_color);
+			if (!empty($dashboard_background_color)) {
+				if (is_array($dashboard_background_color)) {
+					$dashboard_background_color = array_filter($dashboard_background_color);
+					if (count($dashboard_background_color) > 0) {
+						$dashboard_background_color = json_encode($dashboard_background_color);
 					}
 					else {
-						$dashboard_number_background_color = '';
+						$dashboard_background_color = '';
+					}
+				}
+			}
+			if (!empty($dashboard_detail_background_color)) {
+				if (is_array($dashboard_detail_background_color)) {
+					$dashboard_detail_background_color = array_filter($dashboard_detail_background_color);
+					if (count($dashboard_detail_background_color) > 0) {
+						$dashboard_detail_background_color = json_encode($dashboard_detail_background_color);
+					}
+					else {
+						$dashboard_detail_background_color = '';
 					}
 				}
 			}
@@ -188,10 +200,11 @@
 			$array['dashboard'][0]['dashboard_icon'] = $dashboard_icon;
 			$array['dashboard'][0]['dashboard_url'] = $dashboard_url;
 			$array['dashboard'][0]['dashboard_chart_type'] = $dashboard_chart_type;
-			$array['dashboard'][0]['dashboard_heading_background_color'] = $dashboard_heading_background_color;
 			$array['dashboard'][0]['dashboard_heading_text_color'] = $dashboard_heading_text_color;
-			$array['dashboard'][0]['dashboard_number_background_color'] = $dashboard_number_background_color;
+			$array['dashboard'][0]['dashboard_heading_background_color'] = $dashboard_heading_background_color;
 			$array['dashboard'][0]['dashboard_number_text_color'] = $dashboard_number_text_color;
+			$array['dashboard'][0]['dashboard_background_color'] = $dashboard_background_color;
+			$array['dashboard'][0]['dashboard_detail_background_color'] = $dashboard_detail_background_color;
 			$array['dashboard'][0]['dashboard_column_span'] = $dashboard_column_span;
 			$array['dashboard'][0]['dashboard_details_state'] = $dashboard_details_state;
 			$array['dashboard'][0]['dashboard_order'] = $dashboard_order;
@@ -240,10 +253,11 @@
 		$sql .= " dashboard_icon, ";
 		$sql .= " dashboard_url, ";
 		$sql .= " dashboard_chart_type, ";
-		$sql .= " dashboard_heading_background_color, ";
 		$sql .= " dashboard_heading_text_color, ";
-		$sql .= " dashboard_number_background_color, ";
+		$sql .= " dashboard_heading_background_color, ";
 		$sql .= " dashboard_number_text_color, ";
+		$sql .= " dashboard_background_color, ";
+		$sql .= " dashboard_detail_background_color, ";
 		$sql .= " dashboard_column_span, ";
 		$sql .= " dashboard_details_state, ";
 		$sql .= " dashboard_order, ";
@@ -260,10 +274,11 @@
 			$dashboard_icon = $row["dashboard_icon"];
 			$dashboard_url = $row["dashboard_url"];
 			$dashboard_chart_type = $row["dashboard_chart_type"];
-			$dashboard_heading_background_color = $row["dashboard_heading_background_color"];
 			$dashboard_heading_text_color = $row["dashboard_heading_text_color"];
-			$dashboard_number_background_color = $row["dashboard_number_background_color"];
+			$dashboard_heading_background_color = $row["dashboard_heading_background_color"];
 			$dashboard_number_text_color = $row["dashboard_number_text_color"];
+			$dashboard_background_color = $row["dashboard_background_color"];
+			$dashboard_detail_background_color = $row["dashboard_detail_background_color"];
 			$dashboard_column_span = $row["dashboard_column_span"];
 			$dashboard_details_state = $row["dashboard_details_state"];
 			$dashboard_order = $row["dashboard_order"];
@@ -292,8 +307,11 @@
 	}
 
 //convert the json to an array
-	if (!empty($dashboard_number_background_color) && is_json($dashboard_number_background_color)) {
-		$dashboard_number_background_color = json_decode($dashboard_number_background_color, true);
+	if (!empty($dashboard_background_color) && is_json($dashboard_background_color)) {
+		$dashboard_background_color = json_decode($dashboard_background_color, true);
+	}
+	if (!empty($dashboard_detail_background_color) && is_json($dashboard_detail_background_color)) {
+		$dashboard_detail_background_color = json_decode($dashboard_detail_background_color, true);
 	}
 
 //add a default value to $dashboard_details_state
@@ -382,7 +400,8 @@
 
 	echo "<tr>\n";
 	echo "<td class='vncell' valign='top' align='left' nowrap='nowrap'>\n";
-	echo "	".$text['label-dashboard_name']."\n";
+	echo $text['label-dashboard_name'] ?? '';
+	echo "\n";
 	echo "</td>\n";
 	echo "<td class='vtable' style='position: relative;' align='left'>\n";
 	echo "	<input class='formfld' type='text' name='dashboard_name' maxlength='255' value='".escape($dashboard_name)."'>\n";
@@ -401,7 +420,7 @@
 	echo $text['description-dashboard_path']."\n";
 	echo "</td>\n";
 	echo "</tr>\n";
-	
+
 	echo "<tr>\n";
 	echo "<td class='vncell' valign='top' align='left' nowrap='nowrap'>\n";
 	echo "	".$text['label-link']."\n";
@@ -535,17 +554,6 @@
 		echo "</tr>\n";
 	}
 
-	echo "<tr>\n";
-	echo "<td class='vncell' valign='top' align='left' nowrap='nowrap'>\n";
-	echo $text['label-dashboard_heading_background_color']."\n";
-	echo "</td>\n";
-	echo "<td class='vtable' style='position: relative;' align='left'>\n";
-	echo "	<input type='text' class='formfld colorpicker' name='dashboard_heading_background_color' value='".escape($dashboard_heading_background_color)."'><br />\n";
-	echo "<br />\n";
-	echo $text['description-dashboard_heading_background_color']."\n";
-	echo "</td>\n";
-	echo "</tr>\n";
-
 	echo "<tr>\n";
 	echo "<td class='vncell' valign='top' align='left' nowrap='nowrap'>\n";
 	echo $text['label-dashboard_heading_text_color']."\n";
@@ -559,24 +567,12 @@
 
 	echo "<tr>\n";
 	echo "<td class='vncell' valign='top' align='left' nowrap='nowrap'>\n";
-	echo $text['label-dashboard_number_background_color']."\n";
+	echo $text['label-dashboard_heading_background_color']."\n";
 	echo "</td>\n";
 	echo "<td class='vtable' style='position: relative;' align='left'>\n";
-	/*
-	if (!empty($dashboard_number_background_color)) {
-		if (is_array($dashboard_number_background_color)) {
-			foreach($dashboard_number_background_color as $background_color) {
-				echo "	<input type='text' class='formfld colorpicker' name='dashboard_number_background_color[]' value='".escape($background_color)."'>\n";
-			}
-		}
-	}
-	if (empty($dashboard_number_background_color) || count($dashboard_number_background_color) < 2) {
-		echo "	<input type='text' class='formfld colorpicker' name='dashboard_number_background_color[]' value=''>\n";
-	}
-	*/
-	echo "	<input type='text' class='formfld colorpicker' name='dashboard_number_background_color' value='".escape($dashboard_number_background_color)."'>\n";
+	echo "	<input type='text' class='formfld colorpicker' name='dashboard_heading_background_color' value='".escape($dashboard_heading_background_color)."'><br />\n";
 	echo "<br />\n";
-	echo $text['description-dashboard_number_background_color']."\n";
+	echo $text['description-dashboard_heading_background_color']."\n";
 	echo "</td>\n";
 	echo "</tr>\n";
 
@@ -591,6 +587,48 @@
 	echo "</td>\n";
 	echo "</tr>\n";
 
+	echo "<tr>\n";
+	echo "<td class='vncell' valign='top' align='left' nowrap='nowrap'>\n";
+	echo $text['label-dashboard_background_color']."\n";
+	echo "</td>\n";
+	echo "<td class='vtable' style='position: relative;' align='left'>\n";
+	if (!empty($dashboard_background_color)) {
+		if (is_array($dashboard_background_color)) {
+			foreach($dashboard_background_color as $background_color) {
+				echo "	<input type='text' class='formfld colorpicker' name='dashboard_background_color[]' value='".escape($background_color)."'><br />\n";
+			}
+		}
+	}
+	if (empty($dashboard_background_color) || count($dashboard_background_color) < 2) {
+		echo "	<input type='text' class='formfld colorpicker' name='dashboard_background_color[]' value='' onclick=\"document.getElementById('second_input').style.display = 'block';\">\n";
+		echo "	<input id='second_input' style='display: none;' type='text' class='formfld colorpicker' name='dashboard_background_color[]'>\n";
+	}
+	echo "<br />\n";
+	echo $text['description-dashboard_background_color']."\n";
+	echo "</td>\n";
+	echo "</tr>\n";
+
+	echo "<tr>\n";
+	echo "<td class='vncell' valign='top' align='left' nowrap='nowrap'>\n";
+	echo $text['label-dashboard_detail_background_color']."\n";
+	echo "</td>\n";
+	echo "<td class='vtable' style='position: relative;' align='left'>\n";
+	if (!empty($dashboard_detail_background_color)) {
+		if (is_array($dashboard_detail_background_color)) {
+			foreach($dashboard_detail_background_color as $detail_background_color) {
+				echo "	<input type='text' class='formfld colorpicker' name='dashboard_detail_background_color[]' value='".escape($detail_background_color)."'><br />\n";
+			}
+		}
+	}
+	if (empty($dashboard_detail_background_color) || count($dashboard_detail_background_color) < 2) {
+		echo "	<input type='text' class='formfld colorpicker' name='dashboard_detail_background_color[]' value='' onclick=\"document.getElementById('detail_second_input').style.display = 'block';\">\n";
+		echo "	<input id='detail_second_input' style='display: none;' type='text' class='formfld colorpicker' name='dashboard_detail_background_color[]'>\n";
+	}
+	echo "<br />\n";
+	echo $text['description-dashboard_detail_background_color']."\n";
+	echo "</td>\n";
+	echo "</tr>\n";
+
 	echo "<tr>\n";
 	echo "<td class='vncell' valign='top' align='left' nowrap='nowrap'>\n";
 	echo "	".$text['label-dashboard_column_span']."\n";
@@ -714,4 +752,4 @@
 //include the footer
 	require_once "resources/footer.php";
 
-?>
+?>
\ No newline at end of file
diff --git a/core/dashboard/index.php b/core/dashboard/index.php
index e1c9ea38a8..8b1be6de5b 100644
--- a/core/dashboard/index.php
+++ b/core/dashboard/index.php
@@ -75,10 +75,11 @@
 	$sql .= "dashboard_url, \n";
 	$sql .= "dashboard_icon, \n";
 	$sql .= "dashboard_chart_type, \n";
-	$sql .= "dashboard_heading_background_color, \n";
 	$sql .= "dashboard_heading_text_color, \n";
-	$sql .= "dashboard_number_background_color, \n";
+	$sql .= "dashboard_heading_background_color, \n";
 	$sql .= "dashboard_number_text_color, \n";
+	$sql .= "dashboard_background_color, \n";
+	$sql .= "dashboard_detail_background_color, \n";
 	$sql .= "dashboard_column_span, \n";
 	$sql .= "dashboard_details_state, \n";
 	$sql .= "dashboard_order, \n";
@@ -218,17 +219,54 @@
   margin: 0 auto;
   display: grid;
   grid-gap: 1rem;
-  grid-column: auto;
 }
 
+div.hud_container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding-bottom: 13px;
+}
+
+div.hud_chart {
+  height: 150px;
+  padding-top: 7px;
+}
+
+span.hud_stat { padding-bottom: 27px; }
+
+/* Dashboard settings */
+<?php
+	foreach($dashboard as $row) {
+		$dashboard_name = str_replace(" ", "_", strtolower($row['dashboard_name']));
+		$background_color = json_decode($row['dashboard_background_color'], true);
+		$detail_background_color = json_decode($row['dashboard_detail_background_color'], true);
+		echo "#".$dashboard_name." .hud_box .hud_container {";
+		echo "	background: ".$background_color[0].";";
+		echo "	background-image: linear-gradient(to right, ".$background_color[1]." 0%, ".$background_color[0]." 30%, ".$background_color[0]." 70%, ".$background_color[1]." 100%);";
+		echo "}";
+		echo "#".$dashboard_name." .hud_box .hud_title {";
+		echo "	color: ".$row['dashboard_heading_text_color'].";";
+		echo "	background-color: ".$row['dashboard_heading_background_color'].";";
+		echo "}";
+		echo "#".$dashboard_name." .hud_box .hud_stat {";
+		echo "	color: ".$row['dashboard_number_text_color'].";";
+		echo "}";
+		echo "#".$dashboard_name." .hud_box .hud_details {";
+		echo "	background: ".$detail_background_color[0].";";
+		echo "	background-image: linear-gradient(to right, ".$detail_background_color[1]." 0%, ".$detail_background_color[0]." 30%, ".$detail_background_color[0]." 70%, ".$detail_background_color[1]." 100%);";
+		echo "}";
+	}
+
+?>
+
 /* Screen smaller than 575px? 1 columns */
 @media (max-width: 575px) {
   .widgets { grid-template-columns: repeat(1, minmax(100px, 1fr)); }
   .col-num { grid-column: span 1; }
 	<?php
 		foreach($dashboard as $row) {
-			$dashboard_name = strtolower($row['dashboard_name']);
-			$dashboard_name = str_replace(" ", "_", $dashboard_name);
+			$dashboard_name = str_replace(" ", "_", strtolower($row['dashboard_name']));
 			if (isset($dashboard_column_span) && is_numeric($dashboard_column_span)) {
 				echo "#".$dashboard_name." {\n";
 				echo "	grid-column: span 1;\n";
@@ -244,13 +282,9 @@
   .col-num { grid-column: span 2; }
 	<?php
 		foreach($dashboard as $row) {
-			$dashboard_name = strtolower($row['dashboard_name']);
-			$dashboard_name = str_replace(" ", "_", $dashboard_name);
-			$dashboard_column_span = 1;
+			$dashboard_name = str_replace(" ", "_", strtolower($row['dashboard_name']));
+			$dashboard_column_span = $row['dashboard_column_span'];
 			if (is_numeric($dashboard_column_span)) {
-				if ($row['dashboard_column_span'] > 2) {
-					$dashboard_column_span = 2;
-				}
 				echo "#".$dashboard_name." {\n";
 				echo "	grid-column: span ".$dashboard_column_span.";\n";
 				echo "}\n";
@@ -304,25 +338,31 @@
   .widgets { grid-template-columns: repeat(5, minmax(100px, 1fr)); }
   .col-num { grid-column: span 2; }
 }
-
 </style>
 
+<script>
+function toggle_grid_row_end(dashboard_name) {
+	var widget = document.getElementById(dashboard_name);
+	var current_row_end = widget.style.gridRowEnd;
+	widget.style.gridRowEnd = (current_row_end == 'span 2') ? 'span 5' : 'span 2';
+}
+</script>
+
 <?php
 
 //include the dashboards
 	echo "<div class='widgets' id='widgets' style='padding: 0 5px;'>\n";
 	$x = 0;
 	foreach($dashboard as $row) {
-		$dashboard_name = $row['dashboard_name'];
+		$dashboard_name = str_replace(" ", "_", strtolower($row['dashboard_name']));
 		$dashboard_icon = $row['dashboard_icon'] ?? '';
 		$dashboard_url  = $row['dashboard_url'] ?? '';
 		$dashboard_chart_type = $row['dashboard_chart_type'] ?? 'doughnut';
-		$dashboard_heading_background_color = $row['dashboard_heading_background_color'] ?? $settings->get('theme', 'dashboard_heading_background_color');
-		$dashboard_heading_text_color = $row['dashboard_heading_text_color'] ?? $settings->get('theme', 'dashboard_heading_text_color');
-		$dashboard_number_background_color = $row['dashboard_number_background_color'] ?? $settings->get('theme', 'dashboard_number_background_color');
 		$dashboard_number_text_color = $row['dashboard_number_text_color'] ?? $settings->get('theme', 'dashboard_number_text_color');
 		$dashboard_details_state = $row['dashboard_details_state'];
-		echo "<div class='widget' id='".str_replace(" ", "_", strtolower($dashboard_name))."' draggable='false'>\n";
+		$grid_row_end = ($dashboard_details_state == "expanded" || empty($dashboard_details_state)) ? "grid-row-end: span 5;" : "grid-row-end: span 2;";
+
+		echo "<div class='widget' style='".$grid_row_end."' id='".$dashboard_name."' draggable='false'>\n";
 		include($row['dashboard_path']);
 		echo "</div>\n";
 		$x++;
diff --git a/core/dashboard/resources/dashboard/icon.php b/core/dashboard/resources/dashboard/icon.php
index 1763ab78b1..d8f7c7720f 100644
--- a/core/dashboard/resources/dashboard/icon.php
+++ b/core/dashboard/resources/dashboard/icon.php
@@ -11,21 +11,23 @@
 //dashboard icon
 	echo "<div class='hud_box'>\n";
 
-	echo "<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 13px; background-color: ".$dashboard_number_background_color.";' ".($row['dashboard_details_state'] == "disabled" ?: "onclick=\"$('#hud_icon_details').slideToggle('fast');\"").">\n";
-	echo "	<span class='hud_title' style='background-color: ".$dashboard_heading_background_color."; color: ".$dashboard_heading_text_color.";' onclick=\"document.location.href='".$dashboard_url."'\">". $dashboard_name . "</span>"; // (isset($text['label-'.$dashboard_name])) ? $text['label-'.$dashboard_name] : $dashboard_name
-	echo "	<a href='".$dashboard_url."'><span class='hud_stat' style='height: 150px; padding-bottom: 27px; color: ".$dashboard_number_text_color.";'><i class=\"fas ".$dashboard_icon."\" style=\"color: ".$dashboard_number_text_color."; font-size: 0.8em;\"></i></span></a>\n";
+	echo "<div class='hud_container' ".($row['dashboard_details_state'] == "disabled" ?: "onclick=\"$('#hud_icon_details').slideToggle('fast');\"").">\n";
+	echo "	<span class='hud_title' onclick=\"document.location.href='".$dashboard_url."'\">".$dashboard_name."</span>"; // (isset($text['label-'.$dashboard_name])) ? $text['label-'.$dashboard_name] : $dashboard_name
+	echo "	<a href='".$dashboard_url."'><span class='hud_stat'><i class=\"fas ".$dashboard_icon."\" style=\"font-size: 0.8em;\"></i></span></a>\n";
 	echo "</div>\n";
 
-	echo "<div class='hud_details hud_box' id='hud_icon_details'>";
-	echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";
-	echo "<tr>\n";
-	echo "<td>\n";
-	echo "	&nbsp;\n";
-	echo "</td>\n";
-	echo "</table>\n";
-	//echo "<span style='display: block; margin: 6px 0 7px 0;'><a href='".PROJECT_PATH."/app/xml_cdr/xml_cdr.php?status=missed'>".$text['label-view_all']."</a></span>\n";
-	echo "</div>";
-	//$n++;
+	if ($dashboard_detail_state != "disabled") {
+		echo "<div class='hud_details hud_box' id='hud_icon_details'>";
+		echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";
+		echo "<tr>\n";
+		echo "<td>\n";
+		echo "	&nbsp;\n";
+		echo "</td>\n";
+		echo "</table>\n";
+		//echo "<span style='display: block; margin: 6px 0 7px 0;'><a href='".PROJECT_PATH."/app/xml_cdr/xml_cdr.php?status=missed'>".$text['label-view_all']."</a></span>\n";
+		echo "</div>";
+		//$n++;
+	}
 
 	echo "<span class='hud_expander' onclick=\"$('#hud_icon_details').slideToggle('fast');\"><span class='fas fa-ellipsis-h'></span></span>";
 	echo "</div>\n";
diff --git a/themes/default/css.php b/themes/default/css.php
index 3cce04155b..9113b9a817 100644
--- a/themes/default/css.php
+++ b/themes/default/css.php
@@ -2631,7 +2631,7 @@ else { //default: white
 		$padding_top_bottom = (int) floor((100-$tmp) * 0.25);
 		?>
 		padding-top: <?php echo $padding_top_bottom.'px' ?>;
-		padding-bottom: <?php echo ($padding_top_bottom).'px' ?>;
+		padding-bottom: <?php echo $padding_top_bottom.'px' ?>;
 		}
 
 	span.hud_stat:hover {