diff --git a/extension/firefox/content/page.html b/extension/firefox/content/page.html
index f71d774..1fa7359 100644
--- a/extension/firefox/content/page.html
+++ b/extension/firefox/content/page.html
@@ -186,7 +186,7 @@
       box-sizing: border-box;
       padding-top: 1em;
       border-top: 1px dashed gray;
-
+      counter-increment: step;
     }
 
     .steps .index {
@@ -194,8 +194,10 @@
       font-weight: bold;
     }
 
-    .steps .index::after {
-      content: ".";
+    .steps .index::before {
+      font-size: 3rem;
+      font-weight: bold;
+      content: counter(step) ". ";
     }
 
     .step-image {
@@ -251,6 +253,7 @@
       margin-top: .8rem;
       resize: none;
       font-size: 1rem;
+      box-sizing: border-box;
     }
 
     .text-content>.content[readonly] {
diff --git a/extension/firefox/content/page/dom/editor.js b/extension/firefox/content/page/dom/editor.js
index 7008ade..cc2fc78 100644
--- a/extension/firefox/content/page/dom/editor.js
+++ b/extension/firefox/content/page/dom/editor.js
@@ -1,14 +1,4 @@
 export function deleteStep(index = -1) {
   const step = document.querySelector(`[wtc-step-index="${index}"]`);
   step.remove();
-  recountIndexes();
-}
-
-function recountIndexes() {
-  const steps = document.querySelectorAll('.step');
-  let index = 1;
-  for (const step of steps) {
-    step.querySelector('.index').innerText = index;
-    index++;
-  }
 }
\ No newline at end of file
diff --git a/extension/firefox/content/page/dom/init.js b/extension/firefox/content/page/dom/init.js
index e0d787e..ca2038e 100644
--- a/extension/firefox/content/page/dom/init.js
+++ b/extension/firefox/content/page/dom/init.js
@@ -10,7 +10,7 @@ function createStep({ image, target }, index) {
   <div class="step" wtc-step-index="${index + 1}">
     <p class="step-description">
       <span class="text-content">
-        <span class="index">${index + 1}</span> 
+        <span class="index"></span> 
         <textarea wtc-textarea class="content">Click "${target.innerText}"${tagToName[target.tagName] ? ` ${tagToName[target.tagName]}` : ''}.</textarea>
       </span>
       <button wtc-editor class="text-button delete-button">Remove step</button>
diff --git a/extension/firefox/manifest.json b/extension/firefox/manifest.json
index 99374b3..4a4b54b 100644
--- a/extension/firefox/manifest.json
+++ b/extension/firefox/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "What-to-click",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Create how-to documentation in seconds.",
   "icons": {
     "48": "icons/record.png"