diff --git a/src/pages/submit.astro b/src/pages/submit.astro
index 5b41ba8..6c5da19 100644
--- a/src/pages/submit.astro
+++ b/src/pages/submit.astro
@@ -55,7 +55,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       <label for="description">Cat's description (optional)</label>
       <textarea id="description" name="description" maxlength="300"></textarea>
       <small>
-        Some ideas: nicknames, age, breed(s), where you adopted this cat
+        <span id="remaining-chars">300</span> characters left
       </small>
     </div>
     <div>
@@ -83,6 +83,21 @@ import BaseLayout from '../layouts/BaseLayout.astro';
   </form>
 </BaseLayout>
 
+<script is:inline>
+const descriptionTextarea = document.getElementById('description');
+const remainingCharacters = document.getElementById('remaining-chars');
+const maxDescriptionLength = Number(
+  descriptionTextarea.getAttribute('maxlength')
+);
+
+descriptionTextarea.addEventListener('input', () => {
+  const currentDescriptionLength = descriptionTextarea.value.length;
+
+  remainingCharacters.textContent =
+    maxDescriptionLength - currentDescriptionLength;
+});
+</script>
+
 <style>
   h1 {
     margin-bottom: 0;