diff --git a/public/akaunting-js/generalAction.js b/public/akaunting-js/generalAction.js
index 73cade366..1f8e516c1 100644
--- a/public/akaunting-js/generalAction.js
+++ b/public/akaunting-js/generalAction.js
@@ -441,38 +441,43 @@ document.querySelectorAll('[data-index-icon]').forEach((defaultText) => {
 
 //margue animation for truncated text
 
+// set with for page header
 document.querySelectorAll('[data-page-title-first]').forEach((first) => {
     document.querySelectorAll('[data-page-title-second]').forEach((second) => {
         let title_truncate = first.querySelector('[data-title-truncate]');
-        
-        if (title_truncate !== null) {
-            if (title_truncate.clientWidth > first.clientWidth) {
-                title_truncate.style.width = first.clientWidth + 'px';
-                let subtract = title_truncate.clientWidth - 40;
-                title_truncate.style.width = subtract + 'px';
-            }
 
-            if (second.clientHeight > 44) {
-                first.classList.add('w-full', 'sm:w-6/12');
-            } else {
-                first.classList.remove('sm:w-6/12');
-            }
+        if (first.clientWidth < title_truncate.clientWidth) {
+            // added specific width styling for truncate text
+            title_truncate.style.width = first.clientWidth + 'px';
+            let subtract = title_truncate.clientWidth - 40;
+            title_truncate.style.width = subtract + 'px';
+            title_truncate.classList.add('truncate');
+            // added specific width styling for truncate text
 
-            if (title_truncate.clientWidth > first.clientWidth) { 
-                let marquee = first.querySelector('[data-title-truncate]');
+            // added specific width styling into the parent title element for truncate text
+            first.classList.add('w-full', 'sm:w-6/12');
+            // added specific width styling into the parent title element for truncate text
 
-                marquee.addEventListener('mouseover', function () {
-                    marquee.classList.add('animate-marquee');
-                    marquee.classList.remove('truncate');
-                    marquee.style.animationPlayState = 'running';
-                });
+            title_truncate.parentNode.classList.add('overflow-x-hidden', 'hide-scroll-bar');
     
-                marquee.addEventListener('mouseout', function () {
-                    marquee.style.animationPlayState = 'paused';
-                    marquee.classList.remove('animate-marquee');
-                    marquee.classList.add('truncate');
-                });
-            }
+            // added truncate animation for truncated text
+            title_truncate.addEventListener('mouseover', function () {
+                this.classList.add('animate-marquee');
+                this.classList.remove('truncate');
+                this.style.animationPlayState = 'running';
+            });
+    
+            title_truncate.addEventListener('mouseout', function () {
+                this.style.animationPlayState = 'paused';
+                this.classList.remove('animate-marquee');
+                this.classList.add('truncate');
+            });
+            // added truncate animation for truncated text
         }
+
+        // remove width class name for extend the right side
+        first.classList.remove('w-full', 'sm:w-6/12');
+        // remove width class name for extend the right side
     });
 });
+// set with for page header
diff --git a/public/css/app.css b/public/css/app.css
index 1c0719d7c..3c02d86e4 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -54091,6 +54091,17 @@ html[dir="rtl"] .lines-radius-border thead td:last-child {
   }
   /* plans page accordion */
 
+  /* hidden scroll-bar */
+  .hide-scroll-bar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .hide-scroll-bar {
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
+  /* hidden scroll-bar */
+
 @media only screen and (max-width: 480px) {
     .small-table-width {
         width: 550px;
@@ -57030,6 +57041,12 @@ body{
     gap: 0px;
   }
 
+  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]){
+    --tw-space-x-reverse: 0;
+    margin-right: calc(1rem * var(--tw-space-x-reverse));
+    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
   .sm\:space-y-2 > :not([hidden]) ~ :not([hidden]){
     --tw-space-y-reverse: 0;
     margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
diff --git a/resources/assets/sass/app.css b/resources/assets/sass/app.css
index 1493610da..5951c3f43 100644
--- a/resources/assets/sass/app.css
+++ b/resources/assets/sass/app.css
@@ -605,6 +605,17 @@ html[dir="rtl"] .lines-radius-border thead td:last-child {
   }
   /* plans page accordion */
 
+  /* hidden scroll-bar */
+  .hide-scroll-bar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .hide-scroll-bar {
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
+  /* hidden scroll-bar */
+
 @media only screen and (max-width: 480px) {
     .small-table-width {
         width: 550px;
diff --git a/resources/views/components/layouts/admin/header.blade.php b/resources/views/components/layouts/admin/header.blade.php
index b92cb33b2..19aeb37aa 100644
--- a/resources/views/components/layouts/admin/header.blade.php
+++ b/resources/views/components/layouts/admin/header.blade.php
@@ -1,7 +1,7 @@
 @stack('header_start')
 
 <div id="header" class="xl:pt-6 -mt-2">
-    <div class="flex flex-col sm:flex-row items-start justify-between space-x-4 hide-empty-page">
+    <div class="flex flex-col sm:flex-row items-start justify-between sm:space-x-4 hide-empty-page">
         <div data-page-title-first class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
             <div class="flex items-center">
                 <h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5 mt-2 whitespace-nowrap">
diff --git a/resources/views/components/layouts/portal/header.blade.php b/resources/views/components/layouts/portal/header.blade.php
index c16665f54..13be37276 100644
--- a/resources/views/components/layouts/portal/header.blade.php
+++ b/resources/views/components/layouts/portal/header.blade.php
@@ -1,11 +1,13 @@
 @stack('header_start')
 
-<div id="header" class="xl:pt-6">
-    <div class="flex flex-col sm:flex-row flex-wrap items-start justify-between hide-empty-page">
-        <div class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
+<div id="header" class="xl:pt-6 -mt-2">
+    <div class="flex flex-col sm:flex-row items-start justify-between space-x-4 hide-empty-page">
+        <div data-page-title-first class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
             <div class="flex items-center">
-                <h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5">
-                    {!! $title !!}
+                <h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5 mt-2 whitespace-nowrap">
+                    <x-title>
+                        {!! $title !!}
+                    </x-title>
 
                     @yield('dashboard_action')
                 </h1>
@@ -22,16 +24,14 @@
             </div>
         </div>
 
-        <div class="w-full sm:w-6/12">
-            <div class="flex flex-wrap flex-col sm:flex-row sm:items-center justify-end sm:space-x-2 sm:rtl:space-x-reverse">
-                @stack('header_button_start')
+        <div data-page-title-second class="w-full flex flex-wrap flex-col sm:flex-row sm:items-center justify-end sm:space-x-2 sm:rtl:space-x-reverse space-y-2 suggestion-buttons">
+            @stack('header_button_start')
 
-                {!! $buttons !!}
+            {!! $buttons !!}
 
-                @stack('header_button_end')
+            @stack('header_button_end')
 
-                {!! $moreButtons !!}
-            </div>
+            {!! $moreButtons !!}
         </div>
     </div>
 </div>
diff --git a/resources/views/components/layouts/preview/header.blade.php b/resources/views/components/layouts/preview/header.blade.php
index a771c3136..13be37276 100644
--- a/resources/views/components/layouts/preview/header.blade.php
+++ b/resources/views/components/layouts/preview/header.blade.php
@@ -1,10 +1,10 @@
 @stack('header_start')
 
-<div id="header" class="xl:pt-6">
-    <div class="flex flex-col sm:flex-row flex-wrap items-start justify-between hide-empty-page">
-        <div class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
+<div id="header" class="xl:pt-6 -mt-2">
+    <div class="flex flex-col sm:flex-row items-start justify-between space-x-4 hide-empty-page">
+        <div data-page-title-first class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
             <div class="flex items-center">
-                <h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5">
+                <h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5 mt-2 whitespace-nowrap">
                     <x-title>
                         {!! $title !!}
                     </x-title>
@@ -24,16 +24,14 @@
             </div>
         </div>
 
-        <div class="w-full sm:w-6/12">
-            <div class="flex flex-wrap flex-col sm:flex-row sm:items-center justify-end sm:space-x-2 sm:rtl:space-x-reverse">
-                @stack('header_button_start')
+        <div data-page-title-second class="w-full flex flex-wrap flex-col sm:flex-row sm:items-center justify-end sm:space-x-2 sm:rtl:space-x-reverse space-y-2 suggestion-buttons">
+            @stack('header_button_start')
 
-                {!! $buttons !!}
+            {!! $buttons !!}
 
-                @stack('header_button_end')
+            @stack('header_button_end')
 
-                {!! $moreButtons !!}
-            </div>
+            {!! $moreButtons !!}
         </div>
     </div>
 </div>
diff --git a/resources/views/components/layouts/signed/header.blade.php b/resources/views/components/layouts/signed/header.blade.php
index a771c3136..478d6a956 100644
--- a/resources/views/components/layouts/signed/header.blade.php
+++ b/resources/views/components/layouts/signed/header.blade.php
@@ -1,10 +1,10 @@
 @stack('header_start')
 
-<div id="header" class="xl:pt-6">
-    <div class="flex flex-col sm:flex-row flex-wrap items-start justify-between hide-empty-page">
-        <div class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
+<div id="header" class="xl:pt-6 -mt-2">
+    <div lass="flex flex-col sm:flex-row items-start justify-between space-x-4 hide-empty-page">
+        <div data-page-title-first class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
             <div class="flex items-center">
-                <h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5">
+                <h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5 mt-2 whitespace-nowrap">
                     <x-title>
                         {!! $title !!}
                     </x-title>
@@ -24,16 +24,14 @@
             </div>
         </div>
 
-        <div class="w-full sm:w-6/12">
-            <div class="flex flex-wrap flex-col sm:flex-row sm:items-center justify-end sm:space-x-2 sm:rtl:space-x-reverse">
-                @stack('header_button_start')
+        <div data-page-title-second class="w-full flex flex-wrap flex-col sm:flex-row sm:items-center justify-end sm:space-x-2 sm:rtl:space-x-reverse space-y-2 suggestion-buttons">
+            @stack('header_button_start')
 
-                {!! $buttons !!}
+            {!! $buttons !!}
 
-                @stack('header_button_end')
+            @stack('header_button_end')
 
-                {!! $moreButtons !!}
-            </div>
+            {!! $moreButtons !!}
         </div>
     </div>
 </div>
diff --git a/resources/views/components/suggestions.blade.php b/resources/views/components/suggestions.blade.php
index f640ce8ed..4ab701889 100644
--- a/resources/views/components/suggestions.blade.php
+++ b/resources/views/components/suggestions.blade.php
@@ -8,4 +8,4 @@
     >
         {{ $suggestion->name }}
     </x-link>
-@endforeach
+@endforeach
\ No newline at end of file
diff --git a/resources/views/components/title.blade.php b/resources/views/components/title.blade.php
index 68eccf90b..14eb6cf45 100644
--- a/resources/views/components/title.blade.php
+++ b/resources/views/components/title.blade.php
@@ -4,12 +4,8 @@
     $slot_is_string = strval(strlen($slot));
 @endphp
 
-@if ($slot_is_string >= $textSize && ! $slot_isHtml)
-<div class="overflow-x-hidden">
-    <div data-title-truncate class="truncate">
+<div>
+    <div data-title-truncate>
         {!! $slot !!}
     </div>
 </div>
-@else 
-    {!! $slot !!}
-@endif
\ No newline at end of file
diff --git a/safelist.txt b/safelist.txt
index b6d71623c..92d07070d 100644
--- a/safelist.txt
+++ b/safelist.txt
@@ -16,6 +16,7 @@ sm:rtl:left-4
 sm:w-500
 sm:min-h-500
 sm:max-w-4xl
+sm:space-x-4
 md:grid-cols-2
 lg:mt-2
 lg:mt-4