diff --git a/presets.js b/presets.js
index 10633d38c..2a1054ec4 100644
--- a/presets.js
+++ b/presets.js
@@ -231,6 +231,10 @@ module.exports = {
                 '0%': { boxShadow: '0 28px 0 -28px #55588b' },
                 '100%': { boxShadow: '0 28px 0 #55588b' },
               },
+              marquee: {
+                '0%': { transform: 'translateX(0%)' },
+                '100%': { transform: 'translateX(-100%)' },
+              }
           },
 
           animation: {
@@ -239,7 +243,8 @@ module.exports = {
               pulsate: 'pulsate 1500ms ease infinite;',
               spin: 'spin 1000ms infinite',
               submit: 'submit 0.7s ease alternate infinite',
-              submit_second: 'submit_second 0.7s ease alternate infinite'
+              submit_second: 'submit_second 0.7s ease alternate infinite',
+              marquee: 'marquee 15s linear infinite'
           },
 
           transitionProperty: {
diff --git a/public/akaunting-js/generalAction.js b/public/akaunting-js/generalAction.js
index 994b4eb15..13aaf4dbc 100644
--- a/public/akaunting-js/generalAction.js
+++ b/public/akaunting-js/generalAction.js
@@ -357,3 +357,25 @@ if (navigator.userAgent.search("Firefox") >= 0) {
     }
 }
 //Firefox show modal for icon set
+
+document.querySelectorAll('[data-truncate]').forEach((truncate) => {
+    let truncateText = truncate.textContent.split(" ").join("");
+
+    truncate.addEventListener('mouseover', function () {
+        if (truncateText.length > 20) {
+            truncate.style.animationPlayState = 'running';
+            truncate.classList.add('animate-marquee');
+
+            if (truncate.classList.contains('truncate')) {
+                truncate.classList.remove('truncate');
+            }
+        }
+    });
+
+    truncate.addEventListener('mouseout', function () {
+        if (truncateText.length > 20) {
+            truncate.style.animationPlayState = 'paused';
+            truncate.classList.add('truncate');
+        }
+    });
+});
diff --git a/public/css/app.css b/public/css/app.css
index 95fd198af..5e3feba67 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -10011,6 +10011,34 @@ input[type="date"]::-webkit-inner-spin-button,
   -webkit-animation: submit_second 0.7s ease alternate infinite;
           animation: submit_second 0.7s ease alternate infinite;
 }
+@-webkit-keyframes marquee{
+
+  0%{
+    -webkit-transform: translateX(0%);
+            transform: translateX(0%);
+  }
+
+  100%{
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+  }
+}
+@keyframes marquee{
+
+  0%{
+    -webkit-transform: translateX(0%);
+            transform: translateX(0%);
+  }
+
+  100%{
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+  }
+}
+.animate-marquee{
+  -webkit-animation: marquee 15s linear infinite;
+          animation: marquee 15s linear infinite;
+}
 .cursor-auto{
   cursor: auto;
 }
diff --git a/resources/views/common/items/index.blade.php b/resources/views/common/items/index.blade.php
index b7fb34935..5ef72b42f 100644
--- a/resources/views/common/items/index.blade.php
+++ b/resources/views/common/items/index.blade.php
@@ -85,7 +85,7 @@
 
                                 <x-table.td class="w-6/12 sm:w-4/12">
                                     <x-slot name="first" class="flex items-center font-bold" override="class">
-                                        <div class="truncate">
+                                        <div class="w-48 overflow-x-hidden truncate" data-truncate>
                                             {{ $item->name }}
                                         </div>