diff --git a/templates/partials/sql_explorer/sql_query.html b/templates/partials/sql_explorer/sql_query.html
index 289c942..8583104 100644
--- a/templates/partials/sql_explorer/sql_query.html
+++ b/templates/partials/sql_explorer/sql_query.html
@@ -18,7 +18,9 @@
             <label for="query" class="block text-sm font-medium text-gray-700 pb-1">Query</label>
             <textarea name="query" spellcheck="false" id="query"
                 class="w-full h-48 p-4 font-mono text-sm text-gray-800 bg-gray-100 border border-gray-300 rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                placeholder="Enter your SQL query here..." required>{{ query }}</textarea>
+                placeholder="Enter your SQL query here..." required
+                _="on load set my.style.height to my.scrollHeight + 'px'
+                on input set my.style.height to 0 then set my.style.height to my.scrollHeight + 'px'">{{ query }}</textarea>
         </div>
 
         <!-- Buttons -->