diff --git a/presets.js b/presets.js
index 10633d38c..8b8f7c482 100644
--- a/presets.js
+++ b/presets.js
@@ -231,6 +231,14 @@ module.exports = {
                 '0%': { boxShadow: '0 28px 0 -28px #55588b' },
                 '100%': { boxShadow: '0 28px 0 #55588b' },
               },
+              marquee: {
+                '0%': { transform: 'translateX(0%)' },
+                '100%': { transform: 'translateX(-100%)' },
+              },
+              marquee_long: {
+                '0%': { transform: 'translateX(0%)' },
+                '100%': { transform: 'translateX(-350%)' },
+              }
           },
 
           animation: {
@@ -239,7 +247,9 @@ 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 9s linear infinite',
+              marquee_long: 'marquee_long 14s linear infinite'
           },
 
           transitionProperty: {
diff --git a/public/akaunting-js/generalAction.js b/public/akaunting-js/generalAction.js
index 994b4eb15..32c8aed66 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 },
@@ -357,3 +357,83 @@ if (navigator.userAgent.search("Firefox") >= 0) {
     }
 }
 //Firefox show modal for icon set
+
+//margue animation for truncated text
+function marqueeAnimation(truncate) {
+    if (truncate.closest('[disable-marquee]') !== null) {
+        truncate.parentElement.classList.add('truncate');
+        truncate.closest('[disable-marquee]').setAttribute('disable-marquee', 'data-disable-marquee');
+        return;
+    }
+    // offsetwidth = width of the text, clientWidth = width of parent text (div)
+    // because some index page has icons, we use two time parent element
+    if (truncate.offsetWidth > truncate.parentElement.clientWidth || truncate.offsetWidth > truncate.parentElement.parentElement.parentElement.clientWidth) {        
+        truncate.addEventListener('mouseover', function () {
+            truncate.parentElement.style.animationPlayState = 'running';
+
+            if (truncate.offsetWidth > 400 && truncate.parentElement.clientWidth < 150) {
+                truncate.parentElement.classList.remove('animate-marquee');
+                truncate.parentElement.classList.add('animate-marquee_long');
+            } else {
+                truncate.parentElement.classList.remove('animate-marquee_long');
+                truncate.parentElement.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.remove('animate-marquee_long');
+            truncate.parentElement.classList.add('truncate');
+        });
+
+        truncate.classList.add('truncate');
+
+        // if truncate has truncate class, text marquee animate doesn't pretty work
+        if (truncate.querySelector('.truncate') !== null && truncate.querySelector('.truncate').classList.contains('truncate')) {
+            let old_element = truncate.querySelector('.truncate');
+            let parent = old_element.parentNode;
+            
+            let new_element = document.createElement('span');
+            new_element.innerHTML = old_element.innerHTML;
+            new_element.classList = old_element.classList;
+
+            parent.replaceChild(new_element, old_element);
+        }
+        // if truncate has truncate class, text marquee animate doesn't pretty work
+        
+        // There needs to be two div for disable/enable icons. If I don't create this div, animation will work with disable/enable icons.-->
+        let animate_element = document.createElement('div');
+        animate_element.classList.add('truncate');
+        truncate.parentElement.append(animate_element);
+        animate_element.append(truncate);
+        // There needs to be two div for disable/enable icons. If I don't create this div, animation will work with disable/enable icons.-->
+
+        //there is overflow class for the animation does not overflow the width
+        truncate.parentElement.parentElement.classList.add('overflow-x-hidden');
+    }
+}
+
+document.querySelectorAll('[data-truncate-marquee]').forEach((truncate) => {
+    marqueeAnimation(truncate);
+});
+
+//disable/enable icons ejected from data-truncate-marquee, HTML of icons ejected from parent element (data-truncate-marquee)
+document.querySelectorAll('[data-index-icon]').forEach((defaultText) => {
+    let icon_parents_element = defaultText.parentElement.parentElement.parentElement;
+
+    if (icon_parents_element.classList.contains('flex')) {
+        icon_parents_element.appendChild(defaultText);
+    } else {
+        icon_parents_element.parentElement.appendChild(defaultText);
+    }
+
+    // defaultText.parentElement.parentElement.parentElement.parentElement.appendChild(defaultText);
+});
+//disable/enable icons ejected from data-truncate-marquee
+
+//margue animation for truncated text
diff --git a/public/css/app.css b/public/css/app.css
index 3591b678e..8a8d9cc14 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -10011,6 +10011,62 @@ 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 9s linear infinite;
+          animation: marquee 9s linear infinite;
+}
+@-webkit-keyframes marquee_long{
+
+  0%{
+    -webkit-transform: translateX(0%);
+            transform: translateX(0%);
+  }
+
+  100%{
+    -webkit-transform: translateX(-350%);
+            transform: translateX(-350%);
+  }
+}
+@keyframes marquee_long{
+
+  0%{
+    -webkit-transform: translateX(0%);
+            transform: translateX(0%);
+  }
+
+  100%{
+    -webkit-transform: translateX(-350%);
+            transform: translateX(-350%);
+  }
+}
+.animate-marquee_long{
+  -webkit-animation: marquee_long 14s linear infinite;
+          animation: marquee_long 14s linear infinite;
+}
 .cursor-auto{
   cursor: auto;
 }
diff --git a/resources/views/banking/accounts/index.blade.php b/resources/views/banking/accounts/index.blade.php
index d961ce33c..d86e3d743 100644
--- a/resources/views/banking/accounts/index.blade.php
+++ b/resources/views/banking/accounts/index.blade.php
@@ -64,9 +64,7 @@
 
                             <x-table.td class="w-6/12 sm:w-5/12">
                                 <x-slot name="first" class="flex font-bold">
-                                    <div class="truncate">
-                                        {{ $item->name }}
-                                    </div>
+                                    {{ $item->name }}
 
                                     @if (! $item->enabled)
                                         <x-index.disable text="{{ trans_choice('general.accounts', 1) }}" />
diff --git a/resources/views/common/items/index.blade.php b/resources/views/common/items/index.blade.php
index b7fb34935..f4cf11ea8 100644
--- a/resources/views/common/items/index.blade.php
+++ b/resources/views/common/items/index.blade.php
@@ -84,16 +84,14 @@
                                 </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">
-                                        <div class="truncate">
-                                            {{ $item->name }}
-                                        </div>
-
+                                    <x-slot name="first" class="font-bold" override="class">
+                                        {{ $item->name }}
+                                        
                                         @if (! $item->enabled)
                                             <x-index.disable text="{{ trans_choice('general.items', 1) }}" />
                                         @endif
                                     </x-slot>
-                                    <x-slot name="second" class="font-normal truncate" override="class">
+                                    <x-slot name="second" class="font-normal" override="class">
                                         {{ $item->description }}
                                     </x-slot>
                                 </x-table.td>
diff --git a/resources/views/components/index/category.blade.php b/resources/views/components/index/category.blade.php
index 6268618e1..8033c2688 100644
--- a/resources/views/components/index/category.blade.php
+++ b/resources/views/components/index/category.blade.php
@@ -1,9 +1,11 @@
-<span @class([
-        'w-3 h-3 rounded-full ltr:mr-1 rtl:ml-1', $backgroundColor, $textColor
-    ])
-    @if (! empty($backgroundStyle))
-    style="background-color: {{ $backgroundStyle }}"
-    @endif
->
-</span>
-<span class="w-24 truncate">{{ $name }}</span>
+<div class="flex items-center">
+    <span @class([
+            'w-3 h-3 rounded-full ltr:mr-1 rtl:ml-1', $backgroundColor, $textColor
+        ])
+        @if (! empty($backgroundStyle))
+        style="background-color: {{ $backgroundStyle }}"
+        @endif
+    >
+    </span>
+    <span class="w-24 truncate">{{ $name }}</span>
+</div>
diff --git a/resources/views/components/index/default.blade.php b/resources/views/components/index/default.blade.php
index d972ae1aa..f6ffc1d28 100644
--- a/resources/views/components/index/default.blade.php
+++ b/resources/views/components/index/default.blade.php
@@ -1,5 +1,7 @@
-<x-tooltip id="{{ $id }}" placement="{{ $position }}" message="{{ $text }}">
-    <span class="material-icons{{ $iconType }} text-purple text-sm ml-2">
-        {{ $icon }}
-    </span>
-</x-tooltip>
+<div data-index-icon>
+    <x-tooltip id="{{ $id }}" placement="{{ $position }}" message="{{ $text }}">
+        <span class="material-icons{{ $iconType }} text-purple text-sm ml-2">
+            {{ $icon }}
+        </span>
+    </x-tooltip>
+</div>
diff --git a/resources/views/components/index/disable.blade.php b/resources/views/components/index/disable.blade.php
index c2efd9fa0..c169e6c34 100644
--- a/resources/views/components/index/disable.blade.php
+++ b/resources/views/components/index/disable.blade.php
@@ -1,5 +1,7 @@
-<x-tooltip id="{{ $id }}" placement="{{ $position }}" message="{{ $disableText }}">
-    <span class="material-icons{{ $iconType }} text-red text-sm ml-2">
-        {{ $icon }}
-    </span>
-</x-tooltip>
+<div data-index-icon>
+    <x-tooltip id="{{ $id }}" placement="{{ $position }}" message="{{ $disableText }}">
+        <span class="material-icons{{ $iconType }} text-red text-sm ml-2">
+            {{ $icon }}
+        </span>
+    </x-tooltip>
+</div>
diff --git a/resources/views/components/table/index.blade.php b/resources/views/components/table/index.blade.php
index 6c0f1907a..91d311568 100644
--- a/resources/views/components/table/index.blade.php
+++ b/resources/views/components/table/index.blade.php
@@ -1,6 +1,6 @@
 <div class="overflow-x-visible">
     <div class="py-2 align-middle">
-        <table class="flex flex-col divide-y divide-gray-200">
+        <table class="flex flex-col divide-y divide-gray-200" {{ $attributes }}>
             {{ $slot }}
         </table>
     </div>
diff --git a/resources/views/components/table/td.blade.php b/resources/views/components/table/td.blade.php
index d6ae64e37..92ea7ca84 100644
--- a/resources/views/components/table/td.blade.php
+++ b/resources/views/components/table/td.blade.php
@@ -8,7 +8,13 @@
         }
     @endphp
     <div {{ $first_attributes }}>
-        {!! $first !!}
+        <!--so that the animation does not overflow the width. With javascript will add (overflow-x-hidden) class name-->
+        <div>
+            <!-- this tag use for calculate width of text and parent element -->
+            <span data-truncate-marquee>
+                {!! $first !!}
+            </span>
+        </div>
     </div>
     @endif
 
@@ -21,9 +27,18 @@
         }
     @endphp
     <div {{ $second_attributes }}>
-        {!! $second !!}
+        <div>
+            <span data-truncate-marquee>
+                {!! $second !!}
+            </span>
+        </div>
+        
     </div>
     @endif
 
-    {{ $slot }}
+    <div>
+        <span data-truncate-marquee>
+            {{ $slot }}
+        </span>
+    </div>
 </td>
diff --git a/resources/views/components/table/th.blade.php b/resources/views/components/table/th.blade.php
index e3d79db3f..ee0ad3350 100644
--- a/resources/views/components/table/th.blade.php
+++ b/resources/views/components/table/th.blade.php
@@ -8,7 +8,13 @@
         }
     @endphp
     <div {{ $first_attributes }}>
-        {!! $first !!}
+        <!--so that the animation does not overflow the width. With javascript will add (overflow-x-hidden) class name-->
+        <div>
+            <!-- this tag use for calculate width of text and parent element -->
+            <span data-truncate-marquee>
+                {!! $first !!}
+            </span>
+        </div>
     </div>
     @endif
 
@@ -21,9 +27,17 @@
         }
     @endphp
     <div {{ $second_attributes }}>
-        {!! $second !!}
+        <div>
+            <span data-truncate-marquee>
+                {!! $second !!}
+            </span>
+        </div>
     </div>
     @endif
 
-    {{ $slot }}
+    <div>
+        <span data-truncate-marquee>
+            {{ $slot }}
+        </span>
+    </div>
 </th>
diff --git a/resources/views/settings/currencies/index.blade.php b/resources/views/settings/currencies/index.blade.php
index 92d94b8b4..330df7153 100644
--- a/resources/views/settings/currencies/index.blade.php
+++ b/resources/views/settings/currencies/index.blade.php
@@ -57,7 +57,7 @@
                             </x-table.td>
 
                             <x-table.td class="w-6/12 sm:w-4/12">
-                                <x-slot name="first" class="flex" override="class">
+                                <x-slot name="first" class="flex font-bold" override="class">
                                     <div class="font-bold truncate">
                                         {{ $item->name }}
                                     </div>