diff --git a/app/public/css/style.css b/app/public/css/style.css
index 9c9fae1b64833e379aab72411a8368baf81e284d..fd96507c1fd7051d9eaee20dba1c2b174f6e7bed 100644
--- a/app/public/css/style.css
+++ b/app/public/css/style.css
@@ -55,7 +55,9 @@ body {
 }
 
 .title-centered {
+    text-align: center;
     padding-bottom: 3%;
+    padding-right: 3%;
 }
 
 .date-item {
diff --git a/app/public/images/calendar.svg b/app/public/images/calendar.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d32ebe7eab76f240968512967f631b330f8f0605
--- /dev/null
+++ b/app/public/images/calendar.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
+  <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z"/>
+</svg>
\ No newline at end of file
diff --git a/app/views/consumptionsByPeriod.pug b/app/views/consumptionsByPeriod.pug
index 0bdddf6e1052e726a9de068e434215af9ea65d7e..d2a4cfee8067f6b789fe374c0bc3feff3ac0b127 100644
--- a/app/views/consumptionsByPeriod.pug
+++ b/app/views/consumptionsByPeriod.pug
@@ -2,7 +2,8 @@ extends layout
 
 block content
     .container
-        h1.text-center.title-centered Consommations par Période
+        h1.text-center.title-centered.d-flex.flex-row.bd-highlight.mb-3 Consommations par Période
+            img(src="/images/calendar.svg", width="45", height="45", alt="Image", class="img-fluid mx-3")
 
         // Consommations par jour
         #consommations-jour