diff --git a/pandora_console/operation/netflow/nf_live_view.php b/pandora_console/operation/netflow/nf_live_view.php
index 59ff2e70f2..2164aeb562 100644
--- a/pandora_console/operation/netflow/nf_live_view.php
+++ b/pandora_console/operation/netflow/nf_live_view.php
@@ -629,9 +629,6 @@ ui_toggle(
 );
 
 if (empty($draw) === false) {
-    // Draw.
-    echo '<br/>';
-
     // No filter selected.
     if ($netflow_disable_custom_lvfilters && $filter_selected == 0) {
         ui_print_error_message(__('No filter selected'));
@@ -659,11 +656,19 @@ if (empty($draw) === false) {
             ]
         );
     }
+} else {
+    ui_print_info_message(__('No data to show'));
 }
 
 ui_include_time_picker();
 ?>
 
+<style>
+    .parent_graph {
+        margin: 0 auto !important;
+    }
+</style>
+
 <script type="text/javascript">
     function edit_max_value () {
         if ($("#max_values img").attr("id") == "pencil") {
diff --git a/pandora_console/operation/network/network_report.php b/pandora_console/operation/network/network_report.php
index 1c7718258b..5d036df61a 100644
--- a/pandora_console/operation/network/network_report.php
+++ b/pandora_console/operation/network/network_report.php
@@ -266,6 +266,7 @@ unset($table);
 $table = new stdClass();
 $table->id = '';
 $table->width = '100%';
+$table->class = 'info_table';
 // Print the header.
 $table->head = [];
 $table->head['main'] = __('IP');
@@ -394,8 +395,8 @@ if (empty($data)) {
         'height' => 230,
         'legend' => [
             'display'  => true,
-            'position' => 'right',
-            'align'    => 'center',
+            'position' => 'top',
+            'align'    => 'left',
         ],
         'labels' => $labels,
     ];
@@ -403,7 +404,7 @@ if (empty($data)) {
     $resultsTable = html_print_div(
         [
             'class'   => '',
-            'style'   => 'flex: 50;margin-right: 5px;',
+            'style'   => 'flex: 75;margin-right: 5px;',
             'content' => html_print_table($table, true),
         ],
         true
@@ -412,7 +413,7 @@ if (empty($data)) {
     $pieGraph = html_print_div(
         [
             'class'   => 'databox netflow-pie-graph-container padding-2 white_box',
-            'style'   => 'flex: 50;margin-left: 5px;',
+            'style'   => 'flex: 25;margin-left: 5px;',
             'content' => pie_graph(
                 $chart_data,
                 $options
diff --git a/pandora_console/operation/network/network_usage_map.php b/pandora_console/operation/network/network_usage_map.php
index 8af9ccd485..ac2f460230 100644
--- a/pandora_console/operation/network/network_usage_map.php
+++ b/pandora_console/operation/network/network_usage_map.php
@@ -1,24 +1,32 @@
 <?php
-
 /**
- * Netflow functions
+ * Netflow usage map.
  *
- * @package    Netflow usage map.
- * @subpackage UI.
+ * @category   Netflow
+ * @package    Pandora FMS
+ * @subpackage Community
+ * @version    1.0.0
+ * @license    See below
  *
- * Pandora FMS - http://pandorafms.com
- * ==================================================
- * Copyright (c) 2005-2021 Artica Soluciones Tecnologicas
+ *    ______                 ___                    _______ _______ ________
+ *   |   __ \.-----.--.--.--|  |.-----.----.-----. |    ___|   |   |     __|
+ *  |    __/|  _  |     |  _  ||  _  |   _|  _  | |    ___|       |__     |
+ * |___|   |___._|__|__|_____||_____|__| |___._| |___|   |__|_|__|_______|
+ *
+ * ============================================================================
+ * Copyright (c) 2005-2023 Artica Soluciones Tecnologicas
  * Please see http://pandorafms.org for full contribution list
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
- * as published by the Free Software Foundation; version 2
+ * as published by the Free Software Foundation for version 2.
  * This program is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
+ * ============================================================================
  */
 
+ // Begin.
 require_once $config['homedir'].'/include/functions_network.php';
 require_once $config['homedir'].'/include/class/NetworkMap.class.php';
 
@@ -26,7 +34,25 @@ global $config;
 
 check_login();
 
-ui_print_page_header(__('Network usage map'));
+// Header.
+ui_print_standard_header(
+    __('Network usage map'),
+    'images/op_netflow.png',
+    false,
+    '',
+    false,
+    [],
+    [
+        [
+            'link'  => '',
+            'label' => __('Monitoring'),
+        ],
+        [
+            'link'  => '',
+            'label' => __('Network'),
+        ],
+    ]
+);
 
 // ACL Check.
 if (! check_acl($config['id_user'], 0, 'AR')) {
@@ -58,105 +84,180 @@ if (!$is_period) {
 $top = (int) get_parameter('top', 10);
 
 $order_by = get_parameter('order_by', 'bytes');
-if (!in_array($order_by, ['bytes', 'pkts', 'flows'])) {
+if (in_array($order_by, ['bytes', 'pkts', 'flows']) === false) {
     $order_by = 'bytes';
 }
 
-$style_end = ($is_period) ? 'display: none;' : '';
-$style_period = ($is_period) ? '' : 'display: none;';
-
-// Build the table.
-$table = new stdClass();
-$table->class = 'databox filters';
-$table->styleTable = 'width: 100%';
-
-$table->data['0']['0'] = '<div class="flex">';
-$table->data['0']['0'] .= '<div id="end_date_container" style="'.$style_end.'">';
-$table->data['0']['0'] .= __('Start date').'&nbsp;&nbsp;';
-$table->data['0']['0'] .= html_print_input_text('date_lower', $date_lower, '', 10, 7, true);
-$table->data['0']['0'] .= '&nbsp;&nbsp;';
-$table->data['0']['0'] .= html_print_input_text('time_lower', $time_lower, '', 7, 8, true);
-$table->data['0']['0'] .= '</div>';
-
-$table->data['0']['0'] .= '<div id="period_container" style="'.$style_period.'">';
-$table->data['0']['0'] .= __('Time Period').'&nbsp;&nbsp;';
-$table->data['0']['0'] .= html_print_extended_select_for_time('period', $period, '', '', 0, false, true);
-$table->data['0']['0'] .= '</div>';
-$table->data['0']['0'] .= html_print_checkbox(
-    'is_period',
-    1,
-    ($is_period === true) ? 1 : 0,
-    true,
-    false,
-    'network_report_click_period(event)'
-);
-$table->data['0']['0'] .= ui_print_help_tip(
-    __('Select this checkbox to write interval instead a date.'),
-    true
-);
-$table->data['0']['0'] .= '</div>';
-
-$table->data['0']['1'] = __('End date').'&nbsp;&nbsp;';
-$table->data['0']['1'] .= html_print_input_text('date_greater', $date_greater, '', 10, 7, true);
-$table->data['0']['1'] .= '&nbsp;&nbsp;';
-$table->data['0']['1'] .= html_print_input_text('time_greater', $time_greater, '', 7, 8, true);
-
-$table->data['0']['2'] = __('Number of result to show').'&nbsp;&nbsp;';
-$table->data['0']['2'] .= html_print_select(
-    [
-        '5'   => 5,
-        '10'  => 10,
-        '15'  => 15,
-        '20'  => 20,
-        '25'  => 25,
-        '50'  => 50,
-        '100' => 100,
-        '250' => 250,
-    ],
-    'top',
-    $top,
-    '',
-    '',
-    0,
-    true
-);
-
-$table->data['1']['0'] = __('Data to show').'&nbsp;&nbsp;';
-$table->data['1']['0'] .= html_print_select(
-    network_get_report_actions(),
-    'action',
-    $action,
-    '',
-    '',
-    0,
-    true
-);
-$table->data['1']['1'] = '';
-
-$netflow_button = '';
 if ((bool) $config['activate_netflow'] === true) {
     $netflow_button = html_print_submit_button(
         __('Show netflow map'),
         'update_netflow',
         false,
-        'class="sub upd"',
+        ['icon' => 'update'],
         true
     );
+} else {
+    $netflow_button = '';
 }
 
-$table->data['1']['2'] .= implode(
-    '&nbsp;&nbsp;',
-    [$netflow_button]
+
+$filterTable = new stdClass();
+$filterTable->id = '';
+$filterTable->class = 'filter-table-adv';
+$filterTable->size = [];
+$filterTable->size[0] = '33%';
+$filterTable->size[1] = '33%';
+$filterTable->size[2] = '33%';
+$filterTable->data = [];
+
+$filterTable->data[0][0] = html_print_label_input_block(
+    __('Interval'),
+    html_print_extended_select_for_time(
+        'period',
+        $period,
+        '',
+        '',
+        0,
+        false,
+        true
+    ),
+    [ 'div_id' => 'period_container' ]
 );
 
-echo '<form method="post">';
-html_print_input_hidden('order_by', $order_by);
+$filterTable->data[0][0] .= html_print_label_input_block(
+    __('Start date'),
+    html_print_div(
+        [
+            'class'   => '',
+            'content' => html_print_input_text(
+                'date_lower',
+                $date_lower,
+                false,
+                13,
+                10,
+                true
+            ).html_print_image(
+                'images/calendar_view_day.png',
+                true,
+                [
+                    'alt'   => 'calendar',
+                    'class' => 'main_menu_icon invert_filter',
+                ]
+            ).html_print_input_text(
+                'time_lower',
+                $time_lower,
+                false,
+                10,
+                8,
+                true
+            ),
+        ],
+        true
+    ),
+    [ 'div_id' => 'end_date_container' ]
+);
 
-html_print_table($table);
-echo '</form>';
+$filterTable->data[0][1] = html_print_label_input_block(
+    __('End date'),
+    html_print_div(
+        [
+            'content' => html_print_input_text(
+                'date',
+                $date_greater,
+                false,
+                13,
+                10,
+                true
+            ).html_print_image(
+                'images/calendar_view_day.png',
+                true,
+                ['alt' => 'calendar']
+            ).html_print_input_text(
+                'time',
+                $time_greater,
+                false,
+                10,
+                8,
+                true
+            ),
+        ],
+        true
+    )
+);
+
+$filterTable->data[0][2] = html_print_label_input_block(
+    __('Defined period'),
+    html_print_checkbox_switch(
+        'is_period',
+        1,
+        ($is_period === true) ? 1 : 0,
+        true,
+        false,
+        'nf_view_click_period(event)'
+    )
+);
+
+$filterTable->data[1][] = html_print_label_input_block(
+    __('Results to show'),
+    html_print_select(
+        [
+            '5'   => 5,
+            '10'  => 10,
+            '15'  => 15,
+            '20'  => 20,
+            '25'  => 25,
+            '50'  => 50,
+            '100' => 100,
+            '250' => 250,
+        ],
+        'top',
+        $top,
+        '',
+        '',
+        0,
+        true
+    )
+);
+
+$filterTable->data[1][] = html_print_label_input_block(
+    __('Data to show'),
+    html_print_select(
+        network_get_report_actions(),
+        'action',
+        $action,
+        '',
+        '',
+        0,
+        true
+    )
+);
+
+$filterInputTable = '<form method="POST">';
+$filterInputTable .= html_print_input_hidden('order_by', $order_by);
+$filterInputTable .= html_print_table($filterTable, true);
+$filterInputTable .= html_print_div(
+    [
+        'class'   => 'action-buttons',
+        'content' => $netflow_button,
+    ],
+    true
+);
+$filterInputTable .= '</form>';
+
+ui_toggle(
+    $filterInputTable,
+    '<span class="subsection_header_title">'.__('Filter').'</span>',
+    __('Filter'),
+    'search',
+    true,
+    false,
+    '',
+    'white-box-content no_border',
+    'box-flat white_table_graph fixed_filter_bar'
+);
 
 $has_data = false;
-$first_load = true;
+
 if ((bool) get_parameter('update_netflow') === true) {
     $map_data = netflow_build_map_data(
         $utimestamp_lower,
@@ -165,18 +266,26 @@ if ((bool) get_parameter('update_netflow') === true) {
         ($action === 'talkers') ? 'srcip' : 'dstip'
     );
     $has_data = !empty($map_data['nodes']);
-    $first_load = false;
 }
 
 if ($has_data === true) {
     $map_manager = new NetworkMap($map_data);
     $map_manager->printMap();
-} else if (!$first_load) {
-    ui_print_info_message(__('No data retrieved'));
+} else {
+    ui_print_info_message(__('No data to show'));
 }
 
 ?>
+<style>
+    .networkconsole {
+        min-height: calc(100vh - 280px) !important;
+    }
 <script>
+
+    $(document).ready(function(){
+        nf_view_click_period();
+    }
+    );
 // Configure jQuery timepickers.
 $("#text-time_lower, #text-time_greater").timepicker({
     showSecond: true,
@@ -193,16 +302,13 @@ $("#text-time_lower, #text-time_greater").timepicker({
 $("#text-date_lower, #text-date_greater").datepicker({dateFormat: "<?php echo DATE_FORMAT_JS; ?>"});
 $.datepicker.setDefaults($.datepicker.regional[ "<?php echo get_user_language(); ?>"]);
 
-function network_report_click_period(event) {
-    var is_period = document.getElementById(event.target.id).checked;
+function nf_view_click_period() {
+    var is_period = document.getElementById('checkbox-is_period').checked;
 
-    document.getElementById('period_container').style.display = !is_period
-        ? 'none'
-        : 'block';
-    document.getElementById('end_date_container').style.display = is_period
-        ? 'none'
-        : 'block';
+    document.getElementById('period_container').style.display = !is_period ? 'none' : 'flex';
+    document.getElementById('end_date_container').style.display = is_period ? 'none' : 'flex';
 }
+
 </script>
 <style type="text/css">
     tspan {