diff --git a/apps/picsa-apps/dashboard/src/app/modules/climate-data/pages/station/components/rainfall-summary/rainfall-summary.html b/apps/picsa-apps/dashboard/src/app/modules/climate-data/pages/station/components/rainfall-summary/rainfall-summary.html
index 415a9bf04..e637d417d 100644
--- a/apps/picsa-apps/dashboard/src/app/modules/climate-data/pages/station/components/rainfall-summary/rainfall-summary.html
+++ b/apps/picsa-apps/dashboard/src/app/modules/climate-data/pages/station/components/rainfall-summary/rainfall-summary.html
@@ -11,6 +11,7 @@ <h3 style="flex: 1">Rainfall Summary</h3>
       <mat-icon>view_list</mat-icon>
       Table
     </ng-template>
+    <picsa-data-table [data]="summary.data" [options]="tableOptions"></picsa-data-table>
   </mat-tab>
   <mat-tab>
     <ng-template mat-tab-label>
@@ -23,5 +24,6 @@ <h3 style="flex: 1">Rainfall Summary</h3>
       <mat-icon>description</mat-icon>
       Definition
     </ng-template>
+    <pre>{{summary.metadata | json}}</pre>
   </mat-tab>
 </mat-tab-group>
diff --git a/apps/picsa-apps/dashboard/src/app/modules/climate-data/pages/station/components/rainfall-summary/rainfall-summary.ts b/apps/picsa-apps/dashboard/src/app/modules/climate-data/pages/station/components/rainfall-summary/rainfall-summary.ts
index 21bde9f58..cb7250d96 100644
--- a/apps/picsa-apps/dashboard/src/app/modules/climate-data/pages/station/components/rainfall-summary/rainfall-summary.ts
+++ b/apps/picsa-apps/dashboard/src/app/modules/climate-data/pages/station/components/rainfall-summary/rainfall-summary.ts
@@ -1,21 +1,38 @@
-import { AfterViewInit, Component } from '@angular/core';
+import { JsonPipe } from '@angular/common';
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTabsModule } from '@angular/material/tabs';
+import { IDataTableOptions, PicsaDataTableComponent } from '@picsa/shared/features/data-table';
 
 import { ClimateDataDashboardService } from '../../../../climate-data.service';
 import { ClimateDataApiService } from '../../../../climate-data-api.service';
 import { RAINFALL_SUMMARY_MOCK } from './rainfall-summary.spec';
 
+interface IRainfallSummary {
+  data: any[];
+  metadata: any;
+}
+
 @Component({
   selector: 'dashboard-climate-rainfall-summary',
   templateUrl: './rainfall-summary.html',
   standalone: true,
-  imports: [MatButtonModule, MatIconModule, MatTabsModule],
+  imports: [MatButtonModule, MatIconModule, MatTabsModule, PicsaDataTableComponent, JsonPipe],
   styleUrl: './rainfall-summary.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RainfallSummaryComponent implements AfterViewInit {
-  constructor(public api: ClimateDataApiService, private service: ClimateDataDashboardService) {}
+  public summary: IRainfallSummary = { data: [], metadata: {} };
+  constructor(
+    public api: ClimateDataApiService,
+    private service: ClimateDataDashboardService,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  public tableOptions: IDataTableOptions = {
+    paginatorSizes: [25, 50],
+  };
 
   ngAfterViewInit() {
     // TODO - retrieve from server
@@ -34,11 +51,11 @@ export class RainfallSummaryComponent implements AfterViewInit {
         },
       });
     console.log({ response, data, error });
-    this.loadData(data);
+    this.loadData(data as any);
   }
 
-  private loadData(summaryData) {
-    console.log('loading data', summaryData);
-    const { data, metadata } = summaryData;
+  private loadData(summary: IRainfallSummary) {
+    this.summary = summary;
+    this.cdr.markForCheck();
   }
 }