diff --git a/angular.json b/angular.json
index 95e361c2e0e0078b9b71b1992144ad5114c589ed..d43381d533faa0db8686f75273d31a0f487733a7 100644
--- a/angular.json
+++ b/angular.json
@@ -58,7 +58,8 @@
               "node_modules/echarts/dist/echarts.min.js",
               "node_modules/echarts/dist/extension/bmap.min.js",
               "node_modules/chart.js/dist/Chart.min.js",
-              "node_modules/iso8601-js-period/iso8601.js"
+              "node_modules/iso8601-js-period/iso8601.js",
+              "node_modules/apexcharts/dist/apexcharts.min.js"
             ],
             "allowedCommonJsDependencies": [
               "angular2-chartjs",
diff --git a/package-lock.json b/package-lock.json
index 612475a46f2e0a4fc382eb499d0c3d4f73452a24..39d34e79806fc8d00f3f7a36b6167120433decc9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3850,6 +3850,19 @@
       "integrity": "sha512-sbLEIMQrkV7RkIruqTPXxeCMkAAycv4yzTkBzRgOR1BrR5UB7qZtupqxkersTJSf0HZ3sbaNRrNV80TnnM7cUw==",
       "dev": true
     },
+    "apexcharts": {
+      "version": "3.27.1",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.27.1.tgz",
+      "integrity": "sha512-2pfw3pxeWhI0ap5lfxyfGNGoGScfEwfc8XnTpbnzgRdr1AOH5JJN9hh3MvfwrC9TQQfJYC2TZc8P/q9qXUj1bQ==",
+      "requires": {
+        "svg.draggable.js": "^2.2.2",
+        "svg.easing.js": "^2.0.0",
+        "svg.filter.js": "^2.0.2",
+        "svg.pathmorphing.js": "^0.1.3",
+        "svg.resize.js": "^1.4.3",
+        "svg.select.js": "^3.0.1"
+      }
+    },
     "app-root-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/app-root-path/-/app-root-path-3.0.0.tgz",
@@ -13993,6 +14006,21 @@
       "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
       "dev": true
     },
+    "ng-apexcharts": {
+      "version": "1.5.12",
+      "resolved": "https://registry.npmjs.org/ng-apexcharts/-/ng-apexcharts-1.5.12.tgz",
+      "integrity": "sha512-k82AdWNbZs5yqGCjiX7PGS11Cy1+1Oo/RGt2lT89xReD9N9Vvo1t34p1dmzS+U6W5wOFlLEKKVLGNQqENW8cTQ==",
+      "requires": {
+        "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "ng2-ckeditor": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/ng2-ckeditor/-/ng2-ckeditor-1.3.1.tgz",
@@ -20721,6 +20749,70 @@
         "pdfkit": ">=0.8.1"
       }
     },
+    "svg.draggable.js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
+      "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+      "requires": {
+        "svg.js": "^2.0.1"
+      }
+    },
+    "svg.easing.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
+      "integrity": "sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=",
+      "requires": {
+        "svg.js": ">=2.3.x"
+      }
+    },
+    "svg.filter.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
+      "integrity": "sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=",
+      "requires": {
+        "svg.js": "^2.2.5"
+      }
+    },
+    "svg.js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
+      "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
+    },
+    "svg.pathmorphing.js": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
+      "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+      "requires": {
+        "svg.js": "^2.4.0"
+      }
+    },
+    "svg.resize.js": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
+      "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+      "requires": {
+        "svg.js": "^2.6.5",
+        "svg.select.js": "^2.1.2"
+      },
+      "dependencies": {
+        "svg.select.js": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
+          "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+          "requires": {
+            "svg.js": "^2.2.5"
+          }
+        }
+      }
+    },
+    "svg.select.js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
+      "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+      "requires": {
+        "svg.js": "^2.6.5"
+      }
+    },
     "svgo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
@@ -23550,7 +23642,8 @@
         },
         "ssri": {
           "version": "6.0.1",
-          "resolved": "",
+          "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
+          "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
           "dev": true,
           "requires": {
             "figgy-pudding": "^3.5.1"
diff --git a/package.json b/package.json
index b6655b8d202f30661eb937b8c39a7e8586f9a691..a06d7519ea1b0fcbf6ce13540fac2dec9b68e774 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
     "@types/leaflet.awesome-markers": "^2.0.24",
     "@types/leaflet.markercluster": "^1.4.4",
     "angular2-chartjs": "0.4.1",
+    "apexcharts": "^3.27.1",
     "bootstrap": "4.3.1",
     "chart.js": "2.7.1",
     "ckeditor": "4.7.3",
@@ -76,6 +77,7 @@
     "leaflet.heat": "0.2.0",
     "leaflet.markercluster": "^1.5.0",
     "nebular-icons": "1.1.0",
+    "ng-apexcharts": "^1.5.12",
     "ng2-ckeditor": "^1.2.9",
     "ng2-smart-table": "^1.6.0",
     "ngx-echarts": "^4.2.2",
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index a31eec0aa266cf8c99b0558e8a5277e38f3824c6..55fe6746daf2091501c59e4c09bd2f0446c71cd3 100644
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -11,7 +11,7 @@
         </section>
 
         <div class="row d-flex justify-content-around">
-            <mat-card class="col-3">
+            <mat-card class="col-2">
                 <mat-card-header>
                   <mat-card-title>Amsterdam</mat-card-title>
                   <mat-card-subtitle>Subtitle</mat-card-subtitle>
@@ -25,7 +25,7 @@
                   </p>
                 </mat-card-content>
               </mat-card>
-              <mat-card class="col-3">
+              <mat-card class="col-2">
                 <mat-card-header>
                   <mat-card-title>Bilbao</mat-card-title>
                   <mat-card-subtitle>Dog Breed</mat-card-subtitle>
@@ -39,10 +39,10 @@
                   </p>
                 </mat-card-content>
               </mat-card>
-            </div>
+            <!-- </div>
 
-            <div class="row d-flex justify-content-around">
-                <mat-card class="col-3">
+            <div class="row d-flex justify-content-around"> -->
+                <mat-card class="col-2">
                     <mat-card-header>
                       <mat-card-title>Helsinki</mat-card-title>
                       <mat-card-subtitle>Dog Breed</mat-card-subtitle>
@@ -57,7 +57,7 @@
                     </mat-card-content>
                   </mat-card>
 
-                  <mat-card class="col-3">
+                  <mat-card class="col-2">
                     <mat-card-header>
                       <mat-card-title>Messina</mat-card-title>
                       <mat-card-subtitle>Dog Breed</mat-card-subtitle>
diff --git a/src/app/pages/messina/heatmap-filter/heatmap-filter.component.ts b/src/app/pages/messina/heatmap-filter/heatmap-filter.component.ts
index 8131bbca239812e0f47a0aaf293d9ee7814db4aa..79d7b8cc78928c998292f5cc22149b61fbd66acb 100644
--- a/src/app/pages/messina/heatmap-filter/heatmap-filter.component.ts
+++ b/src/app/pages/messina/heatmap-filter/heatmap-filter.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 @Component({
@@ -10,6 +10,8 @@ export class HeatmapFilterComponent implements OnInit {
 
   @Output() sendFilter = new EventEmitter<any>()
 
+  @Input() selected:string;
+
   formhm: FormGroup;
 
   constructor(private fb: FormBuilder) { }
@@ -22,7 +24,7 @@ export class HeatmapFilterComponent implements OnInit {
     this.formhm = this.fb.group({
       startDate: [new Date(startDateTime), Validators.required],
       endDate: [new Date(endDateTime), Validators.required],
-      selectedPeriod: ["2016_06_F10", Validators.nullValidator],
+      selectedPeriod: [this.selected, Validators.nullValidator],
     })
 
   }
diff --git a/src/app/pages/messina/heatmap/heatmap.component.ts b/src/app/pages/messina/heatmap/heatmap.component.ts
index d026df1a86614b42eb2b96139b1d36479726b56f..52d13bddc0b7f815ec042b07a891ed87be1841e7 100644
--- a/src/app/pages/messina/heatmap/heatmap.component.ts
+++ b/src/app/pages/messina/heatmap/heatmap.component.ts
@@ -12,7 +12,7 @@ import { MessinaClientService } from '../service/messina-client.service';
         <nb-card class="col-6" [nbSpinner]="loading">
             <nb-card-header>
               Delay HeatMap
-              <ngx-heatmap-filter (sendFilter)="updateMap1($event)"></ngx-heatmap-filter>
+              <ngx-heatmap-filter (sendFilter)="updateMap1($event)" [selected]="selectedPeriod1"></ngx-heatmap-filter>
             </nb-card-header>
             <nb-card-body>
               <div id="map1" #map1 class="map" 
@@ -30,7 +30,7 @@ import { MessinaClientService } from '../service/messina-client.service';
         <nb-card class="col-6" [nbSpinner]="loading">
             <nb-card-header>
               Delay HeatMap
-              <ngx-heatmap-filter (sendFilter)="updateMap2($event)"></ngx-heatmap-filter>
+              <ngx-heatmap-filter (sendFilter)="updateMap2($event)" [selected]="selectedPeriod2"></ngx-heatmap-filter>
             </nb-card-header>
             <nb-card-body>
               <div id="map2" #map2 class="map" 
@@ -53,21 +53,23 @@ export class HeatmapComponent implements OnInit {
   public map1: L.Map;
   public map2: L.Map;
 
+  selectedPeriod1="2016_06_F10";
+  selectedPeriod2="2017_06_F10";
+
   constructor(private messinaClient: MessinaClientService) {
   }
 
   ngOnInit(): void {
     L.AwesomeMarkers.Icon.prototype.options.prefix = 'fa';
 
-    let selectedPeriod = "2016_06_F10";
     let now = new Date();
     let dayBefore = new Date().setDate(now.getDate() - 1);
     var tzoffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds
     var startDateTime = (new Date(dayBefore - tzoffset)).toISOString().slice(0, -1).split('.').shift() + 'Z';
     var endDateTime = (new Date(now.getTime() - tzoffset)).toISOString().slice(0, -1).split('.').shift() + 'Z';
 
-    this.initializeMap1(startDateTime, endDateTime, selectedPeriod);
-    this.initializeMap2(startDateTime, endDateTime, selectedPeriod);
+    this.initializeMap1(startDateTime, endDateTime, this.selectedPeriod1);
+    this.initializeMap2(startDateTime, endDateTime, this.selectedPeriod2);
   }
 
   options1 = {
@@ -77,7 +79,7 @@ export class HeatmapComponent implements OnInit {
         attribution: ""
       })
     ],
-    zoom: 14,
+    zoom: 11,
     center: L.latLng(38.181529, 15.562588)
   };
 
@@ -88,7 +90,7 @@ export class HeatmapComponent implements OnInit {
         attribution: ""
       })
     ],
-    zoom: 14,
+    zoom: 11,
     center: L.latLng(38.181529, 15.562588)
   };
 
@@ -123,7 +125,7 @@ export class HeatmapComponent implements OnInit {
       return div;
     };
     legend.addTo(map);
-    this.layers1.push(L.heatLayer( this.heatLayerConverter(geoJsonPoints) , this.heatOptions));
+    // this.layers1.push(L.heatLayer( this.heatLayerConverter(geoJsonPoints) , this.heatOptions));
   }
 
   onMapReady2(map) {
@@ -144,7 +146,7 @@ export class HeatmapComponent implements OnInit {
       return div;
     };
     legend.addTo(map);
-    this.layers1.push(L.heatLayer( this.heatLayerConverter(geoJsonPoints) , this.heatOptions));
+    // this.layers2.push(L.heatLayer( this.heatLayerConverter(geoJsonPoints) , this.heatOptions));
   }
 
   getLegendColor(v: number) {
diff --git a/src/app/pages/messina/martrix-batch/martrix-batch.component.html b/src/app/pages/messina/martrix-batch/martrix-batch.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..ac74fb50d3f49816d954d18f443fbf1f11ea7fbd
--- /dev/null
+++ b/src/app/pages/messina/martrix-batch/martrix-batch.component.html
@@ -0,0 +1,48 @@
+<div class="card-row">
+  <div class="card-col">
+<nb-card size="small">
+  <nb-card-body>
+    <apx-chart [series]="serie_plus" [chart]="chartOptions.chart" [legend]="chartOptions.legend"
+      [dataLabels]="chartOptions.dataLabels"
+      [plotOptions]="chartOptions.plotOptions"></apx-chart>
+  </nb-card-body>
+</nb-card>
+</div>
+<div class="card-col">
+  <nb-card size="small">
+    <nb-card-body>
+      <apx-chart [series]="serie_minus" [chart]="chartOptions.chart" [legend]="chartOptions.legend"
+        [dataLabels]="chartOptions.dataLabels"
+        [plotOptions]="chartOptions.plotOptions"></apx-chart>
+    </nb-card-body>
+  </nb-card>  
+</div>
+</div>
+<div class="card-row">
+  <div class="card-col">
+<nb-card size="small">
+  <nb-card-body>
+    <apx-chart [series]="serie_plus" [chart]="chartOptions.chart" [legend]="chartOptions.legend"
+      [dataLabels]="chartOptions.dataLabels"
+      [plotOptions]="chartOptions.plotOptions"></apx-chart>
+  </nb-card-body>
+</nb-card>
+</div>
+<div class="card-col">
+  <nb-card size="small">
+    <nb-card-body>
+      <apx-chart [series]="serie_minus" [chart]="chartOptions.chart" [legend]="chartOptions.legend"
+        [dataLabels]="chartOptions.dataLabels"
+        [plotOptions]="chartOptions.plotOptions"></apx-chart>
+    </nb-card-body>
+  </nb-card>  
+</div>
+</div>
+
+<!-- <nb-card size="small">
+  <nb-card-body>
+    <apx-chart [series]="chartOptions.series" [chart]="chartOptions.chart"
+      [dataLabels]="chartOptions.dataLabels"
+      [plotOptions]="chartOptions.plotOptions"></apx-chart>
+  </nb-card-body>
+</nb-card> -->
\ No newline at end of file
diff --git a/src/app/pages/messina/martrix-batch/martrix-batch.component.scss b/src/app/pages/messina/martrix-batch/martrix-batch.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2b0acd0957e9d0fe813f9ab0c808ab4a65e01be3
--- /dev/null
+++ b/src/app/pages/messina/martrix-batch/martrix-batch.component.scss
@@ -0,0 +1,20 @@
+:host {
+    display: block;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+nb-card-body{
+    padding-bottom: 0 !important;
+    padding-top: 0 !important;
+}
+
+.card-row {
+    display: flex;
+    margin: 0 -0.5rem;
+  }
+  
+.card-col {
+   flex: 1 0 calc(50% - 1rem);
+   margin: 0 0.5rem;
+}
\ No newline at end of file
diff --git a/src/app/pages/messina/martrix-batch/martrix-batch.component.spec.ts b/src/app/pages/messina/martrix-batch/martrix-batch.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..db40c3f7b77a7cf26436fca62975a6a842e16428
--- /dev/null
+++ b/src/app/pages/messina/martrix-batch/martrix-batch.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MartrixBatchComponent } from './martrix-batch.component';
+
+describe('MartrixBatchComponent', () => {
+  let component: MartrixBatchComponent;
+  let fixture: ComponentFixture<MartrixBatchComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MartrixBatchComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MartrixBatchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/messina/martrix-batch/martrix-batch.component.ts b/src/app/pages/messina/martrix-batch/martrix-batch.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f9f72f4146999600bbc95d50454f866dbdcc15e1
--- /dev/null
+++ b/src/app/pages/messina/martrix-batch/martrix-batch.component.ts
@@ -0,0 +1,133 @@
+import { Component, OnInit, ViewChild } from "@angular/core";
+
+import {
+  ApexAxisChartSeries,
+  ApexTitleSubtitle,
+  ApexDataLabels,
+  ApexChart,
+  ApexPlotOptions,
+  ApexLegend,
+  ApexXAxis
+} from "ng-apexcharts";
+import { MessinaClientService } from "../service/messina-client.service";
+
+export type ChartOptions = {
+  legend: ApexLegend,
+  series: ApexAxisChartSeries;
+  chart: ApexChart;
+  dataLabels: ApexDataLabels;
+  title: ApexTitleSubtitle;
+  plotOptions: ApexPlotOptions;
+  xaxis: ApexXAxis;
+};
+
+@Component({
+  selector: 'ngx-martrix-batch',
+  templateUrl: './martrix-batch.component.html',
+  styleUrls: ['./martrix-batch.component.scss']
+})
+export class MartrixBatchComponent implements OnInit {
+
+  @ViewChild("chart") chart: any;
+  public chartOptions: Partial<ChartOptions>;
+
+  serie_plus=[];
+  serie_minus=[];
+
+  constructor(private messinaClient: MessinaClientService) {
+    this.chartOptions = {
+      legend:{
+        position:'right',
+        show: false
+      },
+      series: [
+
+      ],
+      chart: {
+        height:300,
+        type: "heatmap",
+        toolbar: {
+          show: false
+        }
+      },
+      plotOptions: {
+        heatmap: {
+          shadeIntensity: 0.2,
+          colorScale: {
+            ranges: [
+              {
+                from: 0,
+                to: 1,
+                color: "#009688",
+
+              },
+              {
+                from: 1,
+                to: 2,
+                color: "#4caf50"
+              },
+              {
+                from: 2,
+                to: 3,
+                color: "#8bc34a"
+              },
+              {
+                from: 3,
+                to: 4,
+                color: "#cddc39"
+              },
+              {
+                from: 4,
+                to: 5,
+                color: "#ffeb3b"
+              },
+              {
+                from: 5,
+                to: 6,
+                color: "#ffc107"
+              },
+              {
+                from: 6,
+                to: 7,
+                color: "#ff9800"
+              },
+              {
+                from: 7,
+                to: 8,
+                color: "#ff5722"
+              },
+              {
+                from: 8,
+                to: 9,
+                color: "#f44336"
+              },
+              {
+                from: 9,
+                to: 10,
+                color: "#970e0e"
+              }
+            ]
+          }
+        }
+      },
+      dataLabels: {
+        enabled: false
+      },
+      title: {
+        text: "HeatMap Chart with Color Range"
+      },
+      xaxis: {
+        type: "category",
+        categories: []
+      },
+    };
+  }
+  ngOnInit(): void {
+    this.messinaClient.getBatchData("2021-06-08T00:00:00Z").subscribe(res =>{
+      this.chartOptions.xaxis.categories=res.labels;
+      this.serie_plus=res.data.filter(x=> x.name.includes("+"))
+      this.serie_minus=res.data.filter(x=> !x.name.includes("+"))
+    } );
+  }
+
+}
diff --git a/src/app/pages/messina/messina-routing.module.ts b/src/app/pages/messina/messina-routing.module.ts
index ea11231a8ae6133f090dff7decb2c527b5916ed4..0282827324eb787ac74b6e60bc608124439e17a1 100644
--- a/src/app/pages/messina/messina-routing.module.ts
+++ b/src/app/pages/messina/messina-routing.module.ts
@@ -3,6 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { MessinaComponent } from './messina.component';
 import { TrafficComponent } from './traffic/traffic.component';
 import { HeatmapComponent } from './heatmap/heatmap.component';
+import { MartrixBatchComponent } from './martrix-batch/martrix-batch.component';
 
 const routes: Routes = [{
   path: '',
@@ -14,6 +15,10 @@ const routes: Routes = [{
   {
     path:"heatmap",
     component:HeatmapComponent,
+  },
+  {
+    path:"batch",
+    component:MartrixBatchComponent,
   }],
 }];
 
diff --git a/src/app/pages/messina/messina.module.ts b/src/app/pages/messina/messina.module.ts
index fa92dd7f4ddb46a6679a53258027416410a5c001..0f6f2abc0ef838fa6f8c34aea337e889407d8aa2 100644
--- a/src/app/pages/messina/messina.module.ts
+++ b/src/app/pages/messina/messina.module.ts
@@ -3,13 +3,15 @@ import { GoogleMapsModule } from '@angular/google-maps';
 import { LeafletModule } from '@asymmetrik/ngx-leaflet';
 import { LeafletMarkerClusterModule } from '@asymmetrik/ngx-leaflet-markercluster';
 import { NgxEchartsModule } from 'ngx-echarts';
-import { NbCardModule, NbRadioModule, NbSpinnerModule, NbDatepickerModule, NbInputModule, NbButtonModule, NbSelectModule, NbTimepickerModule} from '@nebular/theme';
+import { NbCardModule, NbRadioModule, NbSpinnerModule, NbDatepickerModule, NbInputModule, NbButtonModule, NbSelectModule, NbTimepickerModule, NbIconModule, NbTooltipModule} from '@nebular/theme';
 import { ThemeModule } from '../../@theme/theme.module';
 import { MessinaRoutingModule, routedComponents } from './messina-routing.module';
 import { MatCardModule } from '@angular/material/card';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TrafficFilterComponent } from './traffic-filter/traffic-filter.component';
 import { HeatmapFilterComponent } from './heatmap-filter/heatmap-filter.component';
+import { MartrixBatchComponent } from './martrix-batch/martrix-batch.component';
+import { NgApexchartsModule } from "ng-apexcharts";
 
 @NgModule({
   imports: [
@@ -29,13 +31,17 @@ import { HeatmapFilterComponent } from './heatmap-filter/heatmap-filter.componen
     NbButtonModule,
     NbSelectModule,
     NbTimepickerModule,
-    LeafletMarkerClusterModule
+    LeafletMarkerClusterModule,
+    NbIconModule,
+    NbTooltipModule,
+    NgApexchartsModule
   ],
   exports: [],
   declarations: [
     ...routedComponents,
     TrafficFilterComponent,
     HeatmapFilterComponent,
+    MartrixBatchComponent,
   ],
 })
 export class MessinaModule {}
diff --git a/src/app/pages/messina/service/messina-client.service.ts b/src/app/pages/messina/service/messina-client.service.ts
index f898e4ca2d653353a7f8f7cb17482937b97daf23..02b50a1619bc422234a7663cca8e705b70833634 100644
--- a/src/app/pages/messina/service/messina-client.service.ts
+++ b/src/app/pages/messina/service/messina-client.service.ts
@@ -32,6 +32,13 @@ export class MessinaClientService {
     return this.http.get<any>(`${this.apiURL}/api/v1/data/atmStops?page=${page}&pageSize=${pageSize}&format=geojson&token=${this.token}&filter=${JSON.stringify({ "mainStop": true })}`);
   }
 
+  getBatchData(date: string,roads:string=undefined):  Observable<any>{
+    if(roads==undefined || roads==null){
+      roads="Messina-Boccetta";
+    }
+    return this.http.get<any>(`${this.apiURL}/api/v1/trafficBatch?date=${date}&roads=${roads}&token=${this.token}`);
+  }
+
   getHeatMap(selectedPeriod: string, startDateTime: string, endDateTime: string, factorMinutesPerStop: number = 10, page: number = 0, pageSize: number = 40000): Observable<any> {
     //TODO DEVELOP THIS WHEN API IS AVAILABLE
     //return this.http.get<any>(`${this.apiURL}/api/v1/timeSeries/heatMap?page=${page}&pageSize=${pageSize}&groupBy=datetime&token=${this.token}&factorMinutesPerStop=${factorMinutesPerStop}&startDatetime=${startDateTime}&endDatetime=${endDateTime}`);
diff --git a/src/app/pages/messina/traffic/traffic.component.ts b/src/app/pages/messina/traffic/traffic.component.ts
index 031b65f734353d4dd3d92b051d20fa701e666fef..5320dff4edc190b3f490453db7730c5664e49020 100644
--- a/src/app/pages/messina/traffic/traffic.component.ts
+++ b/src/app/pages/messina/traffic/traffic.component.ts
@@ -30,6 +30,9 @@ import { MessinaClientService } from '../service/messina-client.service';
           >
         </div>
       </nb-card-body>
+      <nb-card-footer>
+      This map shows the temporal evolution of traffic flow on some roads entering or leaving the city of Messina
+      </nb-card-footer>
     </nb-card>
   `,
 })
diff --git a/src/app/pages/pages-menu.ts b/src/app/pages/pages-menu.ts
index 77358d05eca0fb0df17de9006786aa8d0dd9f656..0e136053eae4f6b458cef5c908995696a0288168 100644
--- a/src/app/pages/pages-menu.ts
+++ b/src/app/pages/pages-menu.ts
@@ -98,6 +98,10 @@ export const MENU_ITEMS: NbMenuItem[] = [
       {
         title: 'Delay HeatMap',
         link: '/pages/messina/heatmap',
+      },
+      {
+        title: 'Matrix Batch',
+        link: '/pages/messina/batch',
       }
     ],
   },