diff --git a/popup/popup.css b/popup/popup.css
index 51fcbe5..be8615e 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -18,6 +18,14 @@
     opacity: 1;
 }
 
+.smooth-text {
+    transition: opacity 0.5s;
+    opacity: 1;
+}
+
+.smooth-text.hide {
+    opacity: 0;
+}
 
 body {
     min-width: 375px;
diff --git a/popup/popup.html b/popup/popup.html
index 6cd526f..63b2fa1 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -88,7 +88,7 @@
         </div>
         <div class="row">
             <div class="col">
-                Status: <span id="status">Inactive</span>
+                Status: <span class="smooth-text" id="status">Inactive</span>
             </div>
         </div>
         <div class="row">
diff --git a/popup/popup.js b/popup/popup.js
index f2aed9e..f350352 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -1,3 +1,13 @@
+function smoothTextChange(element, newText) {
+  // Temporarily hide the element
+  element.classList.add('hide');
+
+  setTimeout(() => {
+      element.innerText = newText;
+      element.classList.remove('hide');
+  }, 500); // Wait for the transition to finish
+}
+
 (async function() {
 
   const $version = await new Promise(r => chrome.management.getSelf(self => r(self.version)));
@@ -25,7 +35,8 @@
   // update status
   chrome.storage.onChanged.addListener((changes, area) => {
     if (changes.__status)
-      document.getElementById("status").innerText = changes.__status.newValue;
+      // document.getElementById("status").innerText = changes.__status.newValue;
+      smoothTextChange(document.getElementById("status"), changes.__status.newValue);
   });
 
   // activate checkbox
@@ -113,8 +124,8 @@
               </div>
             </td>
             <td style="white-space: nowrap;">${c}</td>
-            <td style="white-space: nowrap;"><span id="currentDate-${cId}">${consulates[c].currentDate || "-"}</span></td>
-            <td style="white-space: nowrap;"><span id="bestDate-${cId}">${consulates[c].bestDate || "-"}</span></td>
+            <td style="white-space: nowrap;"><span class="smooth-text" id="currentDate-${cId}">${consulates[c].currentDate || "-"}</span></td>
+            <td style="white-space: nowrap;"><span class="smooth-text" id="bestDate-${cId}">${consulates[c].bestDate || "-"}</span></td>
             <td>
               <div class="form-check form-switch" style="text-align: left;">
                 <input class="form-check-input" type="checkbox" role="switch" id="autobook-${cId}" ${cAutobook}>
@@ -139,10 +150,16 @@
       });
       // update current & best dates
       chrome.storage.onChanged.addListener((changes, area) => {
-        if (changes.__consulates && changes.__consulates.newValue[c].currentDate)
-          document.getElementById(`currentDate-${cId}`).innerText = changes.__consulates.newValue[c].currentDate;
-        if (changes.__consulates && changes.__consulates.newValue[c].bestDate)
-          document.getElementById(`bestDate-${cId}`).innerText = changes.__consulates.newValue[c].bestDate;
+        if (changes.__consulates && changes.__consulates.newValue[c].currentDate) {
+          let el = document.getElementById(`currentDate-${cId}`);
+          if (el.innerText != changes.__consulates.newValue[c].currentDate)
+            smoothTextChange(document.getElementById(`currentDate-${cId}`), changes.__consulates.newValue[c].currentDate);
+        }
+        if (changes.__consulates && changes.__consulates.newValue[c].bestDate) {
+          let el = document.getElementById(`bestDate-${cId}`);
+          if (el.innerText != changes.__consulates.newValue[c].bestDate)
+            smoothTextChange(document.getElementById(`bestDate-${cId}`), changes.__consulates.newValue[c].bestDate);
+        }  
       });
     
     }