diff --git a/html/growpi/package-lock.json b/html/growpi/package-lock.json
index 8210a5b..c0cbd28 100644
--- a/html/growpi/package-lock.json
+++ b/html/growpi/package-lock.json
@@ -8,6 +8,7 @@
       "name": "growpi",
       "version": "0.0.0",
       "dependencies": {
+        "date-format": "^4.0.14",
         "primevue": "^3.52.0",
         "vue": "^3.4.21"
       },
@@ -722,6 +723,14 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/date-format": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/date-format/-/date-format-4.0.14.tgz",
+      "integrity": "sha512-39BOQLs9ZjKh0/patS9nrT8wc3ioX3/eA/zgbKNopnF2wCqJEoxywwwElATYvRsXdnOxA/OQeQoFZ3rFjVajhg==",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
diff --git a/html/growpi/package.json b/html/growpi/package.json
index afe6c05..16bfe65 100644
--- a/html/growpi/package.json
+++ b/html/growpi/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "date-format": "^4.0.14",
     "primevue": "^3.52.0",
     "vue": "^3.4.21"
   },
diff --git a/html/growpi/src/App.vue b/html/growpi/src/App.vue
index 8c85df4..0434722 100644
--- a/html/growpi/src/App.vue
+++ b/html/growpi/src/App.vue
@@ -3,6 +3,7 @@ import Button from 'primevue/button';
 import Image from 'primevue/image';
 import InputNumber from 'primevue/inputnumber';
 import ToggleButton from 'primevue/togglebutton';
+import format from 'date-format'
 export default {
   data() {
     return {
@@ -13,7 +14,8 @@ export default {
       water_primed: false,
       fan_state: false,
       pumpAmount: 150,
-      image_src: "/image"
+      image_src: "/image",
+      watering_history: [{ time: 1714976340, amount: 150, moisture_before_watering: 0.7490353 }]
     };
   },
   components: { ToggleButton, Button, InputNumber, Image },
@@ -25,6 +27,9 @@ export default {
       this.pump_state = to_bool(info.pump_state);
       this.temperature = info.temperature;
       this.soil_moisture = info.soil_moisture;
+
+      let response = await fetch("/api/watering_history/10");
+      this.watering_history = await response.json();
     },
     async updateImage() {
       this.image_src = "/image#" + new Date().getTime();
@@ -41,6 +46,9 @@ export default {
     async refreshImage() {
       await fetch("/api/refresh_image");
       this.updateImage();
+    },
+    formatDate(timestamp) {
+      return format.asString('dd-MM-yyyy at hh:mm', new Date(timestamp * 1000));
     }
   },
   created() {
@@ -125,6 +133,25 @@ function to_bool(state) {
         <Button @click="refreshImage();" label="Refresh Image" />
       </td>
     </tr>
+    <tr>
+      <td colspan="2">
+        <b>Watering History</b>
+        <br /><br />
+        <table class="main-table">
+          <tr v-for="record in watering_history">
+            <td>
+              {{ formatDate(record.time) }}
+            </td>
+            <td>
+              {{ record.amount }} grams
+            </td>
+            <td>
+              {{ Math.round(record.moisture_before_watering * 100 * 100) / 100 }}% moisture
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
   </table>
 </template>
 <style>
diff --git a/src/history.rs b/src/history.rs
index 5d6408c..bda993d 100644
--- a/src/history.rs
+++ b/src/history.rs
@@ -3,7 +3,7 @@ use serde::{Deserialize, Serialize};
 
 use crate::error::GenericResult;
 
-#[derive(Serialize, Deserialize)]
+#[derive(Clone, Serialize, Deserialize)]
 pub struct WateringRecord {
     pub time: i64,
     pub amount: u64,
diff --git a/src/server.rs b/src/server.rs
index 6df601c..5f9d56f 100644
--- a/src/server.rs
+++ b/src/server.rs
@@ -37,6 +37,10 @@ fn setup_router(program_state: ProgramStateShared) -> Router {
         .route("/api/switch/:device/:state", get(switch_handler))
         .route("/api/pump/:quantity", get(pump_handler))
         .route("/api/refresh_image", get(image_refresh_handler))
+        .route(
+            "/api/watering_history/:entries",
+            get(watering_history_handler),
+        )
         .route("/image", get(image_handler))
         .route("/*path", get(site_handler))
         .route("/", get(root_handler))
@@ -156,3 +160,24 @@ async fn image_refresh_handler(State(program_state): State<ProgramStateShared>)
     let _ = control::imaging::save_latest_image(program_state).await;
     StatusCode::OK.into_response()
 }
+
+async fn watering_history_handler(
+    Path(entries): Path<usize>,
+    State(program_state): State<ProgramStateShared>,
+) -> Response {
+    let records = lock_state(&program_state).map(|state| {
+        state
+            .history
+            .watering_records
+            .iter()
+            .rev()
+            .take(entries)
+            .cloned()
+            .collect::<Vec<_>>()
+    });
+    let records = records.map(Json);
+    match records {
+        Ok(records) => records.into_response(),
+        Err(_) => StatusCode::SERVICE_UNAVAILABLE.into_response(),
+    }
+}