diff --git a/front-end/src/components/Controls.vue b/front-end/src/components/Controls.vue
index 347cd6e..951734c 100644
--- a/front-end/src/components/Controls.vue
+++ b/front-end/src/components/Controls.vue
@@ -8,10 +8,12 @@ import { inject, ref } from "vue";
 
 const modalTotalHours = ref<{
   hours: { [project: string]: number };
+  period: string;
   total: number;
   visible: boolean;
 }>({
   hours: {},
+  period: "",
   total: 0,
   visible: false,
 });
@@ -35,7 +37,7 @@ async function showModalTotalHours() {
 
   const response = await pb.send(`/hours/${organisation}/${year}/${monthDoubleDigit}`, {});
 
-  console.log(response);
+  modalTotalHours.value.period = `${monthDoubleDigit}/${year}`;
 
   if (response.error === null) {
     let total = 0.0;
@@ -57,7 +59,7 @@ async function showModalTotalHours() {
   <DatePicker v-model="selectedDate" style="width: 150px; margin-left: 3px;" />
   <Button label=">" @click="setDate(1)" style="margin-left: 3px;" />
   <Button label="total hours" @click="showModalTotalHours" style="margin-left: 20px;" />
-  <Dialog v-model:visible="modalTotalHours.visible" modal header="Total hours">
+  <Dialog v-model:visible="modalTotalHours.visible" modal :header="`Total hours for ${modalTotalHours.period}`">
     <table style="width: 100%; border-collapse: collapse; border: 1px solid #ccc; font-family: Arial, sans-serif; font-size: 14px;">
       <tbody>
         <tr v-for="project in Object.keys(modalTotalHours.hours)">