diff --git a/public/akaunting-js/generalAction.js b/public/akaunting-js/generalAction.js
index ff57e3dfb..1abb05097 100644
--- a/public/akaunting-js/generalAction.js
+++ b/public/akaunting-js/generalAction.js
@@ -360,7 +360,7 @@ if (navigator.userAgent.search("Firefox") >= 0) {
 
 //margue animation for truncated text
 function marqueeAnimation(truncate) {
-    if (truncate.closest('[data-disable-truncate]') !== null) {
+    if (truncate.closest('[data-disable-marquee]') !== null) {
         truncate.parentElement.classList.add('truncate');
         return;
     }
@@ -388,14 +388,14 @@ function marqueeAnimation(truncate) {
     }
 }
 
-document.querySelectorAll('[data-truncate]').forEach((truncate) => {
+document.querySelectorAll('[data-truncate-marquee]').forEach((truncate) => {
     marqueeAnimation(truncate);
 });
 
-//disable/enable icons ejected from data-truncate, HTML of icons ejected from parent element (data-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) => {
     defaultText.parentElement.parentElement.parentElement.parentElement.appendChild(defaultText);
 });
-//disable/enable icons ejected from data-truncate
+//disable/enable icons ejected from data-truncate-marquee
 
 //margue animation for truncated text
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/table/td.blade.php b/resources/views/components/table/td.blade.php
index 56ad48670..2505f7243 100644
--- a/resources/views/components/table/td.blade.php
+++ b/resources/views/components/table/td.blade.php
@@ -13,7 +13,7 @@
             <!-- There needs to be two div for disable/enable icons. If I don't create this div, animation will work with disable/enable icons. With javascript will add (truncate) class nam -->
             <div>
                 <!-- this tag use for calculate width of text and parent element -->
-                <span data-truncate>
+                <span data-truncate-marquee>
                     {!! $first !!}
                 </span>
             </div>
@@ -32,7 +32,7 @@
     <div {{ $second_attributes }}>
         <div>
             <div>
-                <span data-truncate>
+                <span data-truncate-marquee>
                     {!! $second !!}
                 </span>
             </div>
@@ -42,7 +42,7 @@
 
     <div>
         <div>
-            <span data-truncate>
+            <span data-truncate-marquee>
                 {{ $slot }}
             </span>
         </div>
diff --git a/resources/views/components/table/th.blade.php b/resources/views/components/table/th.blade.php
index 783f0b1d4..3e935c028 100644
--- a/resources/views/components/table/th.blade.php
+++ b/resources/views/components/table/th.blade.php
@@ -13,7 +13,7 @@
             <!-- There needs to be two div for disable/enable icons. If I don't create this div, animation will work with disable/enable icons -->
             <div>
                 <!-- this tag use for calculate width of text and parent element -->
-                <span data-truncate>
+                <span data-truncate-marquee>
                     {!! $first !!}
                 </span>
             </div>
@@ -32,7 +32,7 @@
     <div {{ $second_attributes }}>
         <div>
             <div>
-                <span data-truncate>
+                <span data-truncate-marquee>
                     {!! $second !!}
                 </span>
             </div>
@@ -42,7 +42,7 @@
 
     <div>
         <div>
-            <span data-truncate>
+            <span data-truncate-marquee>
                 {{ $slot }}
             </span>
         </div>