diff --git a/src/main/resources/static/js/globalDatePicker.js b/src/main/resources/static/js/globalDatePicker.js
index 636083b4b38de27b44d6295d27a0638cb62c0142..31084a321b28202bbc6919c113e0cf92d75528ed 100644
--- a/src/main/resources/static/js/globalDatePicker.js
+++ b/src/main/resources/static/js/globalDatePicker.js
@@ -27,30 +27,35 @@ var year;
 
 function cleanup() {
     year = undefined;
-    $("#global-datepicker-select-year").show();
     $("#global-datepicker-select-month").hide();
+    $("#global-datepicker-select-year").show();
 }
 
 function updateYearGrid(modifier, currentYear) {
-    var items = $("#global-datepicker-select-year .global-datepicker-item");
-    var firstYear = parseInt(items[0].innerText);
-    var newFirstYear = firstYear + modifier;
-
-    for (var i = 0; i < items.length; i++) {
-        items[i].innerText = newFirstYear + i;
-        if (items[i].innerText === currentYear) {
-            items[i].classList.add("global-datepicker-selected");
-        }
-        else {
-            items[i].classList.remove("global-datepicker-selected");
+    $("#global-datepicker-select-year").fadeOut(200, function () {
+        var items = $("#global-datepicker-select-year .global-datepicker-item");
+        var firstYear = parseInt(items[0].innerText);
+        var newFirstYear = firstYear + modifier;
+
+        for (var i = 0; i < items.length; i++) {
+            items[i].innerText = newFirstYear + i;
+            if (items[i].innerText === currentYear) {
+                items[i].classList.add("global-datepicker-selected");
+            }
+            else {
+                items[i].classList.remove("global-datepicker-selected");
+            }
         }
-    }
+
+        $("#global-datepicker-select-year").fadeIn(200);
+    });
 }
 
 function selectYear(selectedYear) {
     year = selectedYear;
-    $("#global-datepicker-select-year").hide();
-    $("#global-datepicker-select-month").show();
+    $("#global-datepicker-select-year").fadeOut(200, function () {
+        $("#global-datepicker-select-month").fadeIn(200);
+    });
 }
 
 function selectMonth(selectedMonth) {
diff --git a/src/main/resources/templates/helpers/datePicker.ftl b/src/main/resources/templates/helpers/globalDatePicker.ftl
similarity index 100%
rename from src/main/resources/templates/helpers/datePicker.ftl
rename to src/main/resources/templates/helpers/globalDatePicker.ftl
diff --git a/src/main/resources/templates/reports/reports.ftl b/src/main/resources/templates/reports/reports.ftl
index a62982fd2fa81ac5f82ec45ceca61ae7c0d106cd..323484c4ea2c88d9cbff25b0e7f2019a333e6a60 100644
--- a/src/main/resources/templates/reports/reports.ftl
+++ b/src/main/resources/templates/reports/reports.ftl
@@ -12,7 +12,7 @@
 
         <main>
             <div class="card main-card background-color">
-                <#import "../helpers/datePicker.ftl" as datePicker>
+                <#import "../helpers/globalDatePicker.ftl" as datePicker>
                 <@datePicker.datePicker currentDate springMacroRequestContext.getRequestUri()/>
 
                 <br>
diff --git a/src/main/resources/templates/transactions/newTransaction.ftl b/src/main/resources/templates/transactions/newTransaction.ftl
index 2b8a49b7516cb64635439a2f9ab60f6cd5754b62..d1561fbc17ad6aba8d70275dfe487e74a7ee7b95 100644
--- a/src/main/resources/templates/transactions/newTransaction.ftl
+++ b/src/main/resources/templates/transactions/newTransaction.ftl
@@ -344,7 +344,7 @@
         </main>
 
         <!-- Pass localization to JS -->
-        <#import "../helpers/datePicker.ftl" as datePicker>
+        <#import "../helpers/globalDatePicker.ftl" as datePicker>
         <@datePicker.datePickerLocalization/>
         <script>
             startDate = "${startDate}".split(".");
diff --git a/src/main/resources/templates/transactions/transactions.ftl b/src/main/resources/templates/transactions/transactions.ftl
index 828adaa66b87303def3336b2f7c6730045fa6b75..cb98175de5378d8c3a7ce5b91df853665d8ac662 100644
--- a/src/main/resources/templates/transactions/transactions.ftl
+++ b/src/main/resources/templates/transactions/transactions.ftl
@@ -12,7 +12,7 @@
 
         <main>
             <div class="card main-card background-color">
-                <#import "../helpers/datePicker.ftl" as datePicker>
+                <#import "../helpers/globalDatePicker.ftl" as datePicker>
                 <@datePicker.datePicker currentDate springMacroRequestContext.getRequestUri()/>
                 <div class="container">
                     <div class="row">