diff --git a/lib/pages/flood_station_page.dart b/lib/pages/flood_station_page.dart
index f258633..249cf56 100644
--- a/lib/pages/flood_station_page.dart
+++ b/lib/pages/flood_station_page.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 
+import '../widgets/flood_station_table.dart';
 import '../widgets/reading_graph.dart';
 import '../model/flood_station.dart';
 import '../model/reading.dart';
@@ -48,8 +49,11 @@ class _FloodStationPageState extends State<FloodStationPage> {
                 return Center(child: Text('No readings on record.'));
               } else if (_tableVisible) {
                 return SingleChildScrollView(
-                  child: Table(
-                    children: _getTableChildren(snapshot.data!),
+                  child: Padding(
+                    padding: const EdgeInsets.symmetric(horizontal: 30),
+                    child: FloodStationTable(
+                      readings: snapshot.data!,
+                    ),
                   ),
                 );
               }
@@ -69,17 +73,4 @@ class _FloodStationPageState extends State<FloodStationPage> {
           }),
     );
   }
-
-  List<TableRow> _getTableChildren(List<Reading> list) {
-    return list
-        .map<TableRow>(
-          (e) => TableRow(
-            children: [
-              Text(e.dateTime.toString()),
-              Text(e.value.toString()),
-            ],
-          ),
-        )
-        .toList();
-  }
 }
diff --git a/lib/services/date_utility.dart b/lib/services/date_utility.dart
index 142bf30..adc8411 100644
--- a/lib/services/date_utility.dart
+++ b/lib/services/date_utility.dart
@@ -3,7 +3,8 @@ import 'package:intl/intl.dart' as intl;
 
 class DateUtility {
   static final intl.DateFormat _hmFormat = intl.DateFormat('Hm');
-  static final intl.DateFormat _ymdhmFormat = intl.DateFormat('yyyy-MM-dd H:m');
+  static final intl.DateFormat _ymdhmFormat =
+      intl.DateFormat('yyyy-MM-dd HH:mm');
   static final intl.DateFormat _ymdFormat = intl.DateFormat('yyyy-MM-dd');
 
   // private default contructor so class can't be instanciated
@@ -24,7 +25,7 @@ class DateUtility {
     return _hmFormat.format(date);
   }
 
-  /// Formats a date to yyyy-MM-dd H:m
+  /// Formats a date to yyyy-MM-dd HH:mm
   static String formatDateToYmdhm(DateTime date) {
     return _ymdhmFormat.format(date);
   }
diff --git a/lib/widgets/flood_station_table.dart b/lib/widgets/flood_station_table.dart
new file mode 100644
index 0000000..82953c0
--- /dev/null
+++ b/lib/widgets/flood_station_table.dart
@@ -0,0 +1,69 @@
+import 'package:flutter/material.dart';
+
+import '../model/reading.dart';
+import '../services/date_utility.dart';
+
+class FloodStationTable extends StatelessWidget {
+  const FloodStationTable({super.key, required List<Reading> readings})
+      : _readings = readings;
+
+  final List<Reading> _readings;
+
+  List<TableRow> get _children {
+    return _readings.map<TableRow>((e) => _getTableRow(e)).toList();
+  }
+
+  TableRow _getTableRow(Reading reading) {
+    String date = DateUtility.formatDateToYmd(reading.dateTime);
+    String time = DateUtility.formatDateToHm(reading.dateTime);
+    return TableRow(
+      decoration: BoxDecoration(),
+      children: [
+        Row(
+          children: [
+            Text(
+              date,
+              style: TextStyle(
+                fontSize: 16,
+              ),
+            ),
+            Padding(padding: EdgeInsets.only(right: 12)),
+            Text(
+              time,
+              style: TextStyle(
+                fontWeight: FontWeight.bold,
+                fontSize: 16,
+              ),
+            ),
+          ],
+        ),
+        Text(
+          reading.value.toString(),
+          style: TextStyle(
+            fontWeight: FontWeight.bold,
+            fontSize: 16,
+            backgroundColor: _getColorFromSeverity(reading.value),
+          ),
+        ),
+      ],
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Table(
+      children: _children,
+      columnWidths: {
+        0: FixedColumnWidth(160),
+        1: FlexColumnWidth(),
+      },
+    );
+  }
+
+  Color _getColorFromSeverity(double value) {
+    if (value < 1.0) return Color.fromARGB(0, 0, 0, 0);
+    if (value < 2.0) return Colors.yellow;
+    if (value < 3.0) return Colors.orange;
+    return Colors.red;
+  }
+}