diff --git a/public/akaunting-js/generalAction.js b/public/akaunting-js/generalAction.js
index 0b2b93ede..a3bae8f4a 100644
--- a/public/akaunting-js/generalAction.js
+++ b/public/akaunting-js/generalAction.js
@@ -361,10 +361,6 @@ if (navigator.userAgent.search("Firefox") >= 0) {
 //margue animation for truncated text
 document.querySelectorAll('[data-truncate]').forEach((truncate) => {
     let truncateText = truncate.innerText.split(" ").join("");
-
-    if (truncateText.length > 30) {
-        truncate.classList.add('truncate');
-    }
     
     truncate.addEventListener('mouseover', function () {
         if (truncateText.length > 30) {
diff --git a/resources/views/components/marguee-text.blade.php b/resources/views/components/marguee-text.blade.php
index b645e38c1..e71cc5567 100644
--- a/resources/views/components/marguee-text.blade.php
+++ b/resources/views/components/marguee-text.blade.php
@@ -1,8 +1,21 @@
+@php
+    $slot_text_length = strlen($slot);
+
+    $slot_isHtml = strlen(strip_tags($slot)) < strlen($slot);
+@endphp
+
+@if ($slot_text_length >= '30' && ! $slot_isHtml)
 <div data-truncate-parent class="flex lg:block truncate">
     <div
-    @class([ $width ])
+    @class([ 
+        $width,
+        'truncate',
+    ])
     data-truncate
     >
         {!! $slot !!}
     </div>
-</div>
\ No newline at end of file
+</div>
+@else
+    {!! $slot !!}
+@endif