diff --git a/src/Public/static/js/main.js b/src/Public/static/js/main.js
index 50e18dd20..446e57f8a 100644
--- a/src/Public/static/js/main.js
+++ b/src/Public/static/js/main.js
@@ -232,14 +232,19 @@ function updateMobileValue() {
 	document.getElementById('combinedMobileValue').textContent = combinedValue;
 }
 
-function updateBannerImage() {
+document.addEventListener('DOMContentLoaded', function () {
+	var bannerImg = document.getElementById('bannerImg');
 	var currentDate = new Date();
 	var year = currentDate.getFullYear();
 	var startHoliday = new Date(year, 11, 1);
-	var endHoliday = new Date(year + 1, 0, 6);
-	if ((currentDate >= startHoliday && currentDate <= new Date(year, 11, 31)) ||
+	var endHoliday = new Date(year + 1, 0, 6); 
+
+	if ((currentDate >= startHoliday && currentDate <= new Date(year, 11, 31)) || 
 		(currentDate >= new Date(year + 1, 0, 1) && currentDate <= endHoliday)) {
-		document.getElementById('bannerImg').src = "/assets/main/banner_x_mas.png";
+		bannerImg.src = "/assets/main/banner_x_mas.png";
+	} else {
+		bannerImg.src = "/assets/main/banner.png";
 	}
-}
+});
+
 
diff --git a/src/html/sitemacros.xhtml b/src/html/sitemacros.xhtml
index 3acf34c50..574f1924b 100755
--- a/src/html/sitemacros.xhtml
+++ b/src/html/sitemacros.xhtml
@@ -304,7 +304,7 @@
     <div style="width: 100%">
       <div style="margin: auto;">
         <div id="banner">
-          <img id="bannerImg" src="/assets/main/banner.png" border="0" title="Star Trek Universe" />
+          <img id="bannerImg" src="" border="0" title="Star Trek Universe" />
         </div>
         <div style="width: 1160px; margin: auto;">
           <div style="width: 880px; float: left;">