diff --git a/app/Abstracts/Listeners/Report.php b/app/Abstracts/Listeners/Report.php
index e5a02b2cb..44ac1e195 100644
--- a/app/Abstracts/Listeners/Report.php
+++ b/app/Abstracts/Listeners/Report.php
@@ -150,7 +150,7 @@ abstract class Report
 
     public function applySearchStringFilter($event)
     {
-        $input = request('search');
+        $input = request('search', '');
 
         // Remove year as it's handled based on financial start
         $search_year = 'year:' . $this->getSearchStringValue('year', '', $input);
diff --git a/app/Abstracts/Report.php b/app/Abstracts/Report.php
index 811d5f7eb..94b27db1f 100644
--- a/app/Abstracts/Report.php
+++ b/app/Abstracts/Report.php
@@ -56,6 +56,10 @@ abstract class Report
 
     public $loaded = false;
 
+    public $bar_formatter_type = 'money';
+
+    public $donut_formatter_type = 'percent';
+
     public $chart = [
         'bar' => [
             'colors' => [
@@ -310,12 +314,12 @@ abstract class Report
                     continue;
                 }
 
-                $this->chart[$table_key]['bar']['yaxis']['labels']['formatter'] = $this->getChartLabelFormatter();
-                $this->chart[$table_key]['donut']['yaxis']['labels']['formatter'] = $this->getChartLabelFormatter('percent');
+                $this->chart[$table_key]['bar']['yaxis']['labels']['formatter'] = $this->getChartLabelFormatter($this->bar_formatter_type);
+                $this->chart[$table_key]['donut']['yaxis']['labels']['formatter'] = $this->getChartLabelFormatter($this->donut_formatter_type);
             }
         } else {
-            $this->chart['bar']['yaxis']['labels']['formatter'] = $this->getChartLabelFormatter();
-            $this->chart['donut']['yaxis']['labels']['formatter'] = $this->getChartLabelFormatter('percent');
+            $this->chart['bar']['yaxis']['labels']['formatter'] = $this->getChartLabelFormatter($this->bar_formatter_type);
+            $this->chart['donut']['yaxis']['labels']['formatter'] = $this->getChartLabelFormatter($this->donut_formatter_type);
         }
     }
 
diff --git a/app/Traits/SearchString.php b/app/Traits/SearchString.php
index 1acded948..01b01488d 100644
--- a/app/Traits/SearchString.php
+++ b/app/Traits/SearchString.php
@@ -8,16 +8,12 @@ trait SearchString
      * Get the value of a name in search string
      * Example: search=type:customer year:2020 account_id:20
      * Example: issued_at>=2021-02-01 issued_at<=2021-02-10 account_id:49
-     *
-     * @return string|array
      */
-    public function getSearchStringValue($name, $default = '', $input = null)
+    public function getSearchStringValue(string $name, string $default = '', string $input = ''): string|array
     {
         $value = $default;
 
-        if (is_null($input)) {
-            $input = request('search');
-        }
+        $input = $input ?: request('search', '');
 
         // $manager = $this->getSearchStringManager();
         // $parsed = $manager->parse($input);
@@ -30,14 +26,14 @@ trait SearchString
             if (empty($variable[0]) || ($variable[0] != $name) || empty($variable[1])) {
                 continue;
             }
-            
+
             if (strpos($column, ':')) {
                 $value = $variable[1];
 
                 break;
             }
 
-            if (!is_array($value)) {
+            if (! is_array($value)) {
                 $value = [];
             }
 
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 80eaffce3..0abe2a8dd 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -1618,6 +1618,36 @@ input[type="date"]::-webkit-inner-spin-button,
         height: 4rem;
     }
 
+/* widget container name will change as lg:px-12 on database. When container class name change on database, this code will clean  */
+
+.dashboard .px-12{
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
+@media (min-width: 1024px){
+
+  .dashboard .px-12{
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+}
+
+.dashboard .px-6{
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
+@media (min-width: 1024px){
+
+  .dashboard .px-6{
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+}
+
+/* widget container name will change as lg:px-12 on database. When container class name change on database, this code will clean  */
+
 *, ::before, ::after{
   --tw-translate-x: 0;
   --tw-translate-y: 0;
@@ -10011,6 +10041,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;
 }
@@ -49475,6 +49561,12 @@ body{
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+[dir="rtl"] .rtl\:-scale-x-100{
+  --tw-scale-x: -1;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 [dir="rtl"] .rtl\:space-x-reverse > :not([hidden]) ~ :not([hidden]){
   --tw-space-x-reverse: 1;
 }
@@ -49937,425 +50029,449 @@ body{
 }
 
 @media (min-width: 1024px){
+    .dashboard .lg\:px-12{
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+    @media (min-width: 1024px){
 
-  .lg\:absolute{
+    .dashboard .lg\:px-12{
+      padding-left: 3rem;
+      padding-right: 3rem;
+    }
+  }
+
+    .dashboard .lg\:px-6{
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+    @media (min-width: 1024px){
+
+    .dashboard .lg\:px-6{
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+    }
+  }
+
+    .lg\:absolute{
     position: absolute;
   }
 
-  .lg\:relative{
+    .lg\:relative{
     position: relative;
   }
 
-  .lg\:right-0{
+    .lg\:right-0{
     right: 0px;
   }
 
-  .lg\:right-24{
+    .lg\:right-24{
     right: 6rem;
   }
 
-  .lg\:top-2{
+    .lg\:top-2{
     top: 0.5rem;
   }
 
-  .lg\:col-span-5{
+    .lg\:col-span-5{
     grid-column: span 5 / span 5;
   }
 
-  .lg\:my-12{
+    .lg\:my-12{
     margin-top: 3rem;
     margin-bottom: 3rem;
   }
 
-  .lg\:-mx-12{
+    .lg\:-mx-12{
     margin-left: -3rem;
     margin-right: -3rem;
   }
 
-  .lg\:my-0{
+    .lg\:my-0{
     margin-top: 0px;
     margin-bottom: 0px;
   }
 
-  .lg\:mt-2{
+    .lg\:mt-2{
     margin-top: 0.5rem;
   }
 
-  .lg\:mt-4{
+    .lg\:mt-4{
     margin-top: 1rem;
   }
 
-  .lg\:mt-11{
+    .lg\:mt-11{
     margin-top: 2.75rem;
   }
 
-  .lg\:mt-60{
+    .lg\:mt-60{
     margin-top: 15rem;
   }
 
-  .lg\:mt-8{
+    .lg\:mt-8{
     margin-top: 2rem;
   }
 
-  .lg\:mt-0{
+    .lg\:mt-0{
     margin-top: 0px;
   }
 
-  .lg\:-mt-16{
+    .lg\:-mt-16{
     margin-top: -4rem;
   }
 
-  .lg\:mb-0{
+    .lg\:mb-0{
     margin-bottom: 0px;
   }
 
-  .lg\:mt-20{
+    .lg\:mt-20{
     margin-top: 5rem;
   }
 
-  .lg\:block{
+    .lg\:block{
     display: block;
   }
 
-  .lg\:flex{
+    .lg\:flex{
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
   }
 
-  .lg\:hidden{
+    .lg\:hidden{
     display: none;
   }
 
-  .lg\:h-64{
+    .lg\:h-64{
     height: 16rem;
   }
 
-  .lg\:h-auto{
+    .lg\:h-auto{
     height: auto;
   }
 
-  .lg\:h-48{
+    .lg\:h-48{
     height: 12rem;
   }
 
-  .lg\:h-60{
+    .lg\:h-60{
     height: 15rem;
   }
 
-  .lg\:h-4{
+    .lg\:h-4{
     height: 1rem;
   }
 
-  .lg\:h-12{
+    .lg\:h-12{
     height: 3rem;
   }
 
-  .lg\:w-9{
+    .lg\:w-9{
     width: 2.25rem;
   }
 
-  .lg\:w-96{
+    .lg\:w-96{
     width: 24rem;
   }
 
-  .lg\:w-1\/2{
+    .lg\:w-1\/2{
     width: 50%;
   }
 
-  .lg\:w-11\/12{
+    .lg\:w-11\/12{
     width: 91.666667%;
   }
 
-  .lg\:w-1\/12{
+    .lg\:w-1\/12{
     width: 8.333333%;
   }
 
-  .lg\:w-3\/12{
+    .lg\:w-3\/12{
     width: 25%;
   }
 
-  .lg\:w-2\/12{
+    .lg\:w-2\/12{
     width: 16.666667%;
   }
 
-  .lg\:w-80{
+    .lg\:w-80{
     width: 20rem;
   }
 
-  .lg\:w-8\/12{
+    .lg\:w-8\/12{
     width: 66.666667%;
   }
 
-  .lg\:w-46{
+    .lg\:w-46{
     width: 46.875rem;
   }
 
-  .lg\:w-4\/5{
+    .lg\:w-4\/5{
     width: 80%;
   }
 
-  .lg\:w-3\/5{
+    .lg\:w-3\/5{
     width: 60%;
   }
 
-  .lg\:w-7\/12{
+    .lg\:w-7\/12{
     width: 58.333333%;
   }
 
-  .lg\:w-5\/12{
+    .lg\:w-5\/12{
     width: 41.666667%;
   }
 
-  .lg\:w-full{
+    .lg\:w-full{
     width: 100%;
   }
 
-  .lg\:w-1\/3{
+    .lg\:w-1\/3{
     width: 33.333333%;
   }
 
-  .lg\:w-2\/3{
+    .lg\:w-2\/3{
     width: 66.666667%;
   }
 
-  .lg\:w-auto{
+    .lg\:w-auto{
     width: auto;
   }
 
-  .lg\:w-1\/4{
+    .lg\:w-1\/4{
     width: 25%;
   }
 
-  .lg\:w-6\/12{
+    .lg\:w-6\/12{
     width: 50%;
   }
 
-  .lg\:w-4\/12{
+    .lg\:w-4\/12{
     width: 33.333333%;
   }
 
-  .lg\:w-4{
+    .lg\:w-4{
     width: 1rem;
   }
 
-  .lg\:w-2\/4{
+    .lg\:w-2\/4{
     width: 50%;
   }
 
-  .lg\:w-3\/4{
+    .lg\:w-3\/4{
     width: 75%;
   }
 
-  .lg\:max-w-7xl{
+    .lg\:max-w-7xl{
     max-width: 80rem;
   }
 
-  .lg\:max-w-6xl{
+    .lg\:max-w-6xl{
     max-width: 72rem;
   }
 
-  .lg\:flex-row{
+    .lg\:flex-row{
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
   }
 
-  .lg\:flex-row-reverse{
+    .lg\:flex-row-reverse{
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
         -ms-flex-direction: row-reverse;
             flex-direction: row-reverse;
   }
 
-  .lg\:flex-col{
+    .lg\:flex-col{
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
   }
 
-  .lg\:flex-nowrap{
+    .lg\:flex-nowrap{
     -ms-flex-wrap: nowrap;
         flex-wrap: nowrap;
   }
 
-  .lg\:items-center{
+    .lg\:items-center{
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
   }
 
-  .lg\:justify-end{
+    .lg\:justify-end{
     -webkit-box-pack: end;
         -ms-flex-pack: end;
             justify-content: flex-end;
   }
 
-  .lg\:justify-center{
+    .lg\:justify-center{
     -webkit-box-pack: center;
         -ms-flex-pack: center;
             justify-content: center;
   }
 
-  .lg\:justify-around{
+    .lg\:justify-around{
     -ms-flex-pack: distribute;
         justify-content: space-around;
   }
 
-  .lg\:gap-16{
+    .lg\:gap-16{
     gap: 4rem;
   }
 
-  .lg\:space-y-0 > :not([hidden]) ~ :not([hidden]){
+    .lg\:space-y-0 > :not([hidden]) ~ :not([hidden]){
     --tw-space-y-reverse: 0;
     margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
     margin-bottom: calc(0px * var(--tw-space-y-reverse));
   }
 
-  .lg\:space-x-24 > :not([hidden]) ~ :not([hidden]){
+    .lg\:space-x-24 > :not([hidden]) ~ :not([hidden]){
     --tw-space-x-reverse: 0;
     margin-right: calc(6rem * var(--tw-space-x-reverse));
     margin-left: calc(6rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
-  .lg\:divide-y-0 > :not([hidden]) ~ :not([hidden]){
+    .lg\:divide-y-0 > :not([hidden]) ~ :not([hidden]){
     --tw-divide-y-reverse: 0;
     border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
     border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
   }
 
-  .lg\:divide-x > :not([hidden]) ~ :not([hidden]){
+    .lg\:divide-x > :not([hidden]) ~ :not([hidden]){
     --tw-divide-x-reverse: 0;
     border-right-width: calc(1px * var(--tw-divide-x-reverse));
     border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
   }
 
-  .lg\:overflow-visible{
+    .lg\:overflow-visible{
     overflow: visible;
   }
 
-  .lg\:border-r{
+    .lg\:border-r{
     border-right-width: 1px;
   }
 
-  .lg\:px-3{
+    .lg\:px-3{
     padding-left: 0.75rem;
     padding-right: 0.75rem;
   }
 
-  .lg\:px-4{
+    .lg\:px-4{
     padding-left: 1rem;
     padding-right: 1rem;
   }
 
-  .lg\:px-6{
+    .lg\:px-6{
     padding-left: 1.5rem;
     padding-right: 1.5rem;
   }
 
-  .lg\:px-12{
+    .lg\:px-12{
     padding-left: 3rem;
     padding-right: 3rem;
   }
 
-  .lg\:px-24{
+    .lg\:px-24{
     padding-left: 6rem;
     padding-right: 6rem;
   }
 
-  .lg\:py-0{
+    .lg\:py-0{
     padding-top: 0px;
     padding-bottom: 0px;
   }
 
-  .lg\:pl-24{
+    .lg\:pl-24{
     padding-left: 6rem;
   }
 
-  .lg\:pl-6{
+    .lg\:pl-6{
     padding-left: 1.5rem;
   }
 
-  .lg\:pl-12{
+    .lg\:pl-12{
     padding-left: 3rem;
   }
 
-  .lg\:pt-0{
+    .lg\:pt-0{
     padding-top: 0px;
   }
 
-  .lg\:pl-8{
+    .lg\:pl-8{
     padding-left: 2rem;
   }
 
-  .lg\:pr-0{
+    .lg\:pr-0{
     padding-right: 0px;
   }
 
-  .lg\:text-8xl{
+    .lg\:text-8xl{
     font-size: 3rem;
     line-height: 3.25rem;
   }
 
-  .lg\:text-7xl{
+    .lg\:text-7xl{
     font-size: 2.75rem;
     line-height: 3rem;
   }
 
-  .lg\:text-2xl{
+    .lg\:text-2xl{
     font-size: 1.375rem;
     line-height: 1.5rem;
   }
 
-  .lg\:text-5xl{
+    .lg\:text-5xl{
     font-size: 2.25rem;
     line-height: 2.5rem;
   }
 
-  .lg\:text-lg{
+    .lg\:text-lg{
     font-size: 1.125rem;
     line-height: 1.75rem;
   }
 
-  [dir="ltr"] .lg\:ltr\:right-0{
+    [dir="ltr"] .lg\:ltr\:right-0{
     right: 0px;
   }
 
-  [dir="ltr"] .lg\:ltr\:pr-12{
+    [dir="ltr"] .lg\:ltr\:pr-12{
     padding-right: 3rem;
   }
 
-  [dir="ltr"] .lg\:ltr\:pl-12{
+    [dir="ltr"] .lg\:ltr\:pl-12{
     padding-left: 3rem;
   }
 
-  [dir="ltr"] .ltr\:lg\:pl-8{
+    [dir="ltr"] .ltr\:lg\:pl-8{
     padding-left: 2rem;
   }
 
-  [dir="ltr"] .lg\:ltr\:pl-24{
+    [dir="ltr"] .lg\:ltr\:pl-24{
     padding-left: 6rem;
   }
 
-  [dir="rtl"] .lg\:rtl\:left-0{
+    [dir="rtl"] .lg\:rtl\:left-0{
     left: 0px;
   }
 
-  [dir="rtl"] .lg\:rtl\:pl-12{
+    [dir="rtl"] .lg\:rtl\:pl-12{
     padding-left: 3rem;
   }
 
-  [dir="rtl"] .lg\:rtl\:pr-12{
+    [dir="rtl"] .lg\:rtl\:pr-12{
     padding-right: 3rem;
   }
 
-  [dir="rtl"] .rtl\:lg\:pr-8{
+    [dir="rtl"] .rtl\:lg\:pr-8{
     padding-right: 2rem;
   }
 
-  [dir="rtl"] .lg\:rtl\:pr-24{
+    [dir="rtl"] .lg\:rtl\:pr-24{
     padding-right: 6rem;
   }
 }
diff --git a/resources/assets/js/components/AkauntingSelectRemote.vue b/resources/assets/js/components/AkauntingSelectRemote.vue
index 90db6c7be..e6050b8b2 100644
--- a/resources/assets/js/components/AkauntingSelectRemote.vue
+++ b/resources/assets/js/components/AkauntingSelectRemote.vue
@@ -842,7 +842,8 @@ export default {
                             if (!check) {
                                 this.sorted_options.push({
                                     key: option.id.toString(),
-                                    value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
+                                    value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name,
+                                    level: (option.parent_id) ? 1 : 0 // 0: parent, 1: child. Level data get 0 via backend. This control will refactor.
                                 });
                             }
 
diff --git a/resources/assets/js/components/AkauntingWidget.vue b/resources/assets/js/components/AkauntingWidget.vue
index baa02eba9..e88944260 100644
--- a/resources/assets/js/components/AkauntingWidget.vue
+++ b/resources/assets/js/components/AkauntingWidget.vue
@@ -165,19 +165,19 @@ export default {
             widthOptions: [
                 {
                     label: '25%',
-                    value: 'w-full lg:w-1/4 px-6'
+                    value: 'w-full lg:w-1/4 lg:px-6'
                 },
                 {
                     label: '33%',
-                    value: 'w-full lg:w-1/3 px-6'
+                    value: 'w-full lg:w-1/3 lg:px-6'
                 },
                 {
                     label: '50%',
-                    value: 'w-full lg:w-2/4 px-12'
+                    value: 'w-full lg:w-2/4 lg:px-12'
                 },
                 {
                     label: '100%',
-                    value: 'w-full px-12'
+                    value: 'w-full lg:px-12'
                 }
             ],
             form: {
diff --git a/resources/assets/sass/app.css b/resources/assets/sass/app.css
index 6b307fe98..965ba680e 100644
--- a/resources/assets/sass/app.css
+++ b/resources/assets/sass/app.css
@@ -203,6 +203,15 @@
         overflow: hidden; 
         height: 4rem;
     }
+    /* widget container name will change as lg:px-12 on database. When container class name change on database, this code will clean  */
+    .dashboard .px-12 {
+        @apply px-0 lg:pl-12 lg:pr-12;
+    }
+
+    .dashboard .px-6 {
+        @apply px-0 lg:pl-6 lg:pr-6;
+    }
+    /* widget container name will change as lg:px-12 on database. When container class name change on database, this code will clean  */
 }
 
 /* menu */
diff --git a/resources/views/auth/users/index.blade.php b/resources/views/auth/users/index.blade.php
index c9520ef0c..4ae639573 100644
--- a/resources/views/auth/users/index.blade.php
+++ b/resources/views/auth/users/index.blade.php
@@ -58,11 +58,11 @@
                                 <x-table.td class="w-4/12 sm:w-5/12">
                                     <div class="flex items-center space-x-2">
                                         @if (setting('default.use_gravatar', '0') == '1')
-                                            <img src="{{ $item->picture }}" class="w-6 h-6 rounded-full mr-2 hidden lg:block" title="{{ $item->name }}" alt="{{ $item->name }}">
+                                            <img src="{{ $item->picture }}" class="w-6 h-6 rounded-full mr-2 hidden lg:block text-transparent" title="{{ $item->name }}" alt="{{ $item->name }}">
                                         @elseif (is_object($item->picture))
-                                            <img src="{{ Storage::url($item->picture->id) }}" class="w-6 h-6 rounded-full mr-2 hidden lg:block" alt="{{ $item->name }}" title="{{ $item->name }}">
+                                            <img src="{{ Storage::url($item->picture->id) }}" class="w-6 h-6 rounded-full mr-2 hidden lg:block text-transparent" alt="{{ $item->name }}" title="{{ $item->name }}">
                                         @else
-                                            <img src="{{ asset('public/img/user.svg') }}" class="w-6 h-6 rounded-full mr-2 hidden lg:block" alt="{{ $item->name }}"/>
+                                            <img src="{{ asset('public/img/user.svg') }}" class="w-6 h-6 rounded-full mr-2 hidden lg:block text-transparent" alt="{{ $item->name }}"/>
                                         @endif
 
                                         {{ !empty($item->name) ? $item->name : trans('general.na') }}
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/documents/form/totals.blade.php b/resources/views/components/documents/form/totals.blade.php
index e519ea068..8d8480cea 100644
--- a/resources/views/components/documents/form/totals.blade.php
+++ b/resources/views/components/documents/form/totals.blade.php
@@ -3,10 +3,10 @@
         <div class="overflow-y-hidden py-6">
             <table id="totals" class="float-right">
                 <colgroup>
-                    <col style="width: 47.5%;">
-                    <col style="width: 30%;">
-                    <col style="width: 18%;">
-                    <col style="width: 50px;">
+                    <col class="small-col" style="width: 47.5%;">
+                    <col class="small-col" style="width: 30%;">
+                    <col class="small-col" style="width: 18%;">
+                    <col class="small-col" style="width: 50px;">
                 </colgroup>
 
                 <tbody id="invoice-total-rows">
diff --git a/resources/views/components/form/group/select.blade.php b/resources/views/components/form/group/select.blade.php
index f77ae8b03..2802fb0ef 100644
--- a/resources/views/components/form/group/select.blade.php
+++ b/resources/views/components/form/group/select.blade.php
@@ -139,6 +139,10 @@
         @visible-change="{{ $attributes['visible-change'] }}"
         @endif
 
+        @if (! empty($attributes['clear']))
+        @clear="{{ $attributes['clear'] }}($event)"
+        @endif
+
         @if (isset($attributes['readonly']))
         :readonly="{{ $attributes['readonly'] }}"
         @endif
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/layouts/admin/menu.blade.php b/resources/views/components/layouts/admin/menu.blade.php
index 328aecfb9..79fb48b3f 100644
--- a/resources/views/components/layouts/admin/menu.blade.php
+++ b/resources/views/components/layouts/admin/menu.blade.php
@@ -40,9 +40,9 @@
             </span>
 
             @if (setting('default.use_gravatar', '0') == '1')
-                <img src="{{ user()->picture }}" alt="{{ user()->name }}" class="w-8 h-8 m-auto rounded-full" alt="{{ user()->name }}" title="{{ user()->name }}">
+                <img src="{{ user()->picture }}" alt="{{ user()->name }}" class="w-8 h-8 m-auto rounded-full text-transparent" alt="{{ user()->name }}" title="{{ user()->name }}">
             @elseif (is_object(user()->picture))
-                <img src="{{ Storage::url(user()->picture->id) }}" class="w-8 h-8 m-auto rounded-full" alt="{{ user()->name }}" title="{{ user()->name }}">
+                <img src="{{ Storage::url(user()->picture->id) }}" class="w-8 h-8 m-auto rounded-full text-transparent" alt="{{ user()->name }}" title="{{ user()->name }}">
             @else
                 <span id="menu-profile-icon" name="account_circle" class="material-icons-outlined text-purple w-8 h-8 flex items-center justify-center text-center text-2xl pointer-events-none" alt="{{ user()->name }}" title="{{ user()->name }}">
                     account_circle
diff --git a/resources/views/components/layouts/portal/menu.blade.php b/resources/views/components/layouts/portal/menu.blade.php
index 40965da02..054eb2ac0 100644
--- a/resources/views/components/layouts/portal/menu.blade.php
+++ b/resources/views/components/layouts/portal/menu.blade.php
@@ -24,9 +24,9 @@
             </span>
 
             @if (setting('default.use_gravatar', '0') == '1')
-                <img src="{{ user()->picture }}" alt="{{ user()->name }}" class="w-8 h-8 m-auto rounded-full" alt="{{ user()->name }}" title="{{ user()->name }}">
+                <img src="{{ user()->picture }}" alt="{{ user()->name }}" class="w-8 h-8 m-auto rounded-full text-transparent" alt="{{ user()->name }}" title="{{ user()->name }}">
             @elseif (is_object(user()->picture))
-                <img src="{{ Storage::url(user()->picture->id) }}" class="w-8 h-8 m-auto rounded-full" alt="{{ user()->name }}" title="{{ user()->name }}">
+                <img src="{{ Storage::url(user()->picture->id) }}" class="w-8 h-8 m-auto rounded-full text-transparent" alt="{{ user()->name }}" title="{{ user()->name }}">
             @else
                 <span name="account_circle" class="material-icons-outlined text-purple w-8 h-8 flex items-center justify-center text-center text-2xl pointer-events-none" alt="{{ user()->name }}" title="{{ user()->name }}">
                     account_circle
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/modules/item/show.blade.php b/resources/views/modules/item/show.blade.php
index f04e0cfb3..19be9a869 100644
--- a/resources/views/modules/item/show.blade.php
+++ b/resources/views/modules/item/show.blade.php
@@ -15,7 +15,7 @@
 
     <x-slot name="content">
         <div class="flex flex-col space-y-16 py-4">
-            <div class="flex flex-col lg:flex-row w-full space-x-16 space-y-0">
+            <div class="flex flex-col lg:flex-row w-full space-x-16 rtl:space-x-reverse space-y-0">
                 <div class="w-full lg:w-7/12 flex flex-col space-x-2 banner">
                     @foreach ($module->files as $file)
                         @if ($loop->first)
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>
diff --git a/resources/views/widgets/bank_feeds.blade.php b/resources/views/widgets/bank_feeds.blade.php
index 6c0e83f53..b3cc4a979 100644
--- a/resources/views/widgets/bank_feeds.blade.php
+++ b/resources/views/widgets/bank_feeds.blade.php
@@ -17,7 +17,7 @@
         </div>
 
         <div class="relative flex justify-end -mt-28">
-            <img src="https://assets.akaunting.com/software/admin/bank-feeds.png" alt="Bank Feeds" />
+            <img src="https://assets.akaunting.com/software/admin/bank-feeds.png" class="rtl:-scale-x-100" alt="Bank Feeds" />
         </div>
     </div>
 @endif
diff --git a/safelist.txt b/safelist.txt
index 1aa9577b4..96edddc49 100644
--- a/safelist.txt
+++ b/safelist.txt
@@ -15,4 +15,5 @@ lg:relative
 lg:right-0
 lg:justify-around
 ltr:-right-1.5
-rtl:-left-1.5
\ No newline at end of file
+rtl:-left-1.5
+rtl:-scale-x-100
\ No newline at end of file