diff --git a/assets/js/zen-mode.js b/assets/js/zen-mode.js
index bd6d5ee0..57526c43 100644
--- a/assets/js/zen-mode.js
+++ b/assets/js/zen-mode.js
@@ -5,6 +5,7 @@ function _toogleZenMode(zendModeButton) {
   const tocInside = document.querySelector('.toc-inside');
   const articleContent = document.querySelector('.article-content');
   const header = document.querySelector('#single_header');
+  const footer = document.querySelector(''#single_footer'');    // Add footer ref for class transformation
 
 
   // Add semantic class into body tag
@@ -23,6 +24,10 @@ function _toogleZenMode(zendModeButton) {
   // Change width of article title
   header.classList.toggle('max-w-full');
   header.classList.toggle('max-w-prose');
+	
+  // Change width of article footer 
+  header.classList.toggle('max-w-full');
+  header.classList.toggle('max-w-prose');	
 
   // Read i18n title from data-attributes
   const titleI18nDisable = zendModeButton.getAttribute('data-title-i18n-disable');
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 5defb34c..1aee0151 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -150,7 +150,7 @@
       {{ end }}
   
     </section>
-  <footer class="pt-8 max-w-prose print:hidden">
+  <footer id="single_footer" class="pt-8 max-w-prose print:hidden">
 
     {{ partial "article-pagination.html" . }}
     {{ if .Params.showComments | default (.Site.Params.article.showComments | default false) }}