diff --git a/public/akaunting-js/generalAction.js b/public/akaunting-js/generalAction.js
index a3bae8f4a..48ec55ebd 100644
--- a/public/akaunting-js/generalAction.js
+++ b/public/akaunting-js/generalAction.js
@@ -99,7 +99,7 @@ function expandSub(key, event) {
 //collapse accordion
 
 // run dropdown and tooltip functions for Virtual DOM
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("DOMContentLoaded", () => {    
     const triggers = [
         { event: "mouseover", checker: isHoverable },
         { event: "mouseout", checker: isHoverable },
@@ -361,25 +361,26 @@ if (navigator.userAgent.search("Firefox") >= 0) {
 //margue animation for truncated text
 document.querySelectorAll('[data-truncate]').forEach((truncate) => {
     let truncateText = truncate.innerText.split(" ").join("");
+
+    if (truncate.offsetWidth > truncate.parentElement.clientWidth || truncate.offsetWidth > truncate.parentElement.parentElement.clientWidth) {        
+        truncate.addEventListener('mouseover', function () {
+            truncate.parentElement.style.animationPlayState = 'running';
+            truncate.parentElement.classList.add('animate-marquee');
     
-    truncate.addEventListener('mouseover', function () {
-        if (truncateText.length > 30) {
-            truncate.style.animationPlayState = 'running';
-            truncate.classList.add('animate-marquee');
+            // if (truncate.parentElement.classList.contains('truncate')) {
+            //     truncate.parentElement.classList.remove('truncate');
+            // }
+        });
+    
+        truncate.addEventListener('mouseout', function () {
+            truncate.parentElement.style.animationPlayState = 'paused';
+            truncate.parentElement.classList.remove('animate-marquee');
+            truncate.parentElement.classList.add('truncate');
+        });
 
-            if (truncate.classList.contains('truncate')) {
-                truncate.classList.remove('truncate');
-            }
-        }
-    });
-
-    truncate.addEventListener('mouseout', function () {
-        if (truncateText.length > 30) {
-            truncate.style.animationPlayState = 'paused';
-            truncate.classList.add('truncate');
-            truncate.classList.remove('animate-marquee');
-        }
-    });
+        truncate.classList.add('truncate');
+        truncate.parentElement.classList.add('truncate');
+    }
 });
 
 //disable/enable icons ejected from data-truncate
diff --git a/resources/views/common/items/index.blade.php b/resources/views/common/items/index.blade.php
index ad7cca862..65500b26e 100644
--- a/resources/views/common/items/index.blade.php
+++ b/resources/views/common/items/index.blade.php
@@ -84,7 +84,7 @@
                                 </x-table.td>
 
                                 <x-table.td class="w-6/12 sm:w-4/12">
-                                    <x-slot name="first" class="flex items-center font-bold" override="class">
+                                    <x-slot name="first" class="font-bold" override="class">
                                         {{ $item->name }}
                                         
                                         @if (! $item->enabled)
diff --git a/resources/views/components/table/td.blade.php b/resources/views/components/table/td.blade.php
index f059be20a..30c299253 100644
--- a/resources/views/components/table/td.blade.php
+++ b/resources/views/components/table/td.blade.php
@@ -8,9 +8,11 @@
         }
     @endphp
     <div {{ $first_attributes }}>
-        <x-marguee-text>
-            {!! $first !!}
-        </x-marguee-text>
+        <div>
+            <span data-truncate>
+                {!! $first !!}
+            </span>
+        </div>
     </div>
     @endif
 
@@ -23,13 +25,17 @@
         }
     @endphp
     <div {{ $second_attributes }}>
-        <x-marguee-text>
-            {!! $second !!}
-        </x-marguee-text>
+        <div>
+            <span data-truncate>
+                {!! $second !!}
+            </span>
+        </div>
     </div>
     @endif
-
-    <x-marguee-text>
-        {{ $slot }}
-    </x-marguee-text>
+    
+    <div>
+        <span data-truncate>
+            {{ $slot }}
+        </span>
+    </div>
 </td>
diff --git a/resources/views/components/table/th.blade.php b/resources/views/components/table/th.blade.php
index a86ced55f..e3d79db3f 100644
--- a/resources/views/components/table/th.blade.php
+++ b/resources/views/components/table/th.blade.php
@@ -8,9 +8,7 @@
         }
     @endphp
     <div {{ $first_attributes }}>
-        <x-marguee-text>
-            {!! $first !!}
-        </x-marguee-text>
+        {!! $first !!}
     </div>
     @endif
 
@@ -23,13 +21,9 @@
         }
     @endphp
     <div {{ $second_attributes }}>
-        <x-marguee-text>
-            {!! $second !!}
-        </x-marguee-text>
+        {!! $second !!}
     </div>
     @endif
 
-    <x-marguee-text>
-        {{ $slot }}
-    </x-marguee-text>
+    {{ $slot }}
 </th>