diff --git a/Elegant.nnwtheme/template.html b/Elegant.nnwtheme/template.html
index 087bbfd..8d9ad60 100644
--- a/Elegant.nnwtheme/template.html
+++ b/Elegant.nnwtheme/template.html
@@ -30,8 +30,8 @@ body: The body of the article.
 
 -->
 
-<div class="animate-fade-in max-w-prose mx-auto font-sans [[text_size_class]]">
-
+<div id="elegantReader" class="animate-fade-in max-w-prose mx-auto font-sans [[text_size_class]]">
+  <p id="test" class="text-sm"></p>
   <div class="flex flex-col items-center mt-6">
     <img src="[[avatar_src]]" class="w-18 h-18 rounded-md" alt="">
     <div class="flex mt-4 space-x-2">
@@ -41,6 +41,9 @@ body: The body of the article.
       <a href="[[feed_link]]" class="text-gray-300" alt="[[feed_link_title]]" title="[[feed_link_title]]">
         <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="currentColor" d="M4 24h10v2H4zm0-6h10v2H4zm22-4H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h20a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2zM6 6v6h20V6zm20 22h-6a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2zm-6-8v6h6v-6z"/></svg>
       </a>
+      <div id="textSize" class="text-gray-300">
+        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="currentColor" d="M25 12h-5v2h5a1 1 0 0 1 1 1v2h-4a3.003 3.003 0 0 0-3 3v1a3.003 3.003 0 0 0 3 3h6v-9a3.003 3.003 0 0 0-3-3zm-3 10a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h4v3zm-6 2h2L12 7h-2L4 24h2l1.694-5h6.613zm-7.629-7l2.497-7.371h.266L13.63 17z"/></svg>
+      </div>
     </div>
   </div>
   
@@ -57,5 +60,24 @@ body: The body of the article.
 </div>
 
 
+<script type="text/javascript">
+    const textSizeEl = document.getElementById('textSize')
+    const elegantReaderEl = document.getElementById('elegantReader')
+    const testEl = document.getElementById('test')
+    const sizes = ['small', 'large', 'xLarge', 'xxLarge', 'medium']
+    let currentSize = 0
+
+    function toggleSize() {
+      const _className = `${sizes[currentSize]}Text`
+      testEl.innerHTML = `${_className}`
+      elegantReaderEl.classList.remove(_className)
+      currentSize = (currentSize + 1) % sizes.length
+      elegantReaderEl.classList.add(_className)
+    }
+
+    textSizeEl.addEventListener('click', toggleSize)
+</script>
+
+