diff --git a/app/Listeners/Menu/ShowInNotifications.php b/app/Listeners/Menu/ShowInNotifications.php
index db5168fdc..1c6f5103d 100644
--- a/app/Listeners/Menu/ShowInNotifications.php
+++ b/app/Listeners/Menu/ShowInNotifications.php
@@ -32,7 +32,12 @@ class ShowInNotifications
 
             foreach ($updates as $key => $update) {
                 $prefix = ($key == 'core') ? 'core' : 'module';
-                $name = ($prefix == 'core') ? 'Akaunting' : module($key)->getName();
+
+                if ($prefix == 'module' && ! module($key)) {
+                    continue;
+                }
+
+                $name = ($prefix == 'core') ? 'Akaunting' : module($key)?->getName();
 
                 $new = new DatabaseNotification();
                 $new->id = $key;
diff --git a/public/css/app.css b/public/css/app.css
index 03c7f7963..404b634c4 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -47133,6 +47133,11 @@ html[dir='rtl'] .el-input__suffix {
     text-align: left;
 }
 
+html[dir='rtl'] .el-scrollbar__wrap {
+    margin-left: -15px !important;
+    margin-right: unset !important;
+}
+
 .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
     right: 15px !important;
 }
@@ -47846,6 +47851,10 @@ body{
   right: 0.5rem;
 }
 
+[dir="ltr"] .ltr\:left-3{
+  left: 0.75rem;
+}
+
 [dir="ltr"] .ltr\:-right-2{
   right: -0.5rem;
 }
@@ -47862,10 +47871,6 @@ body{
   left: 0px;
 }
 
-[dir="ltr"] .ltr\:left-3{
-  left: 0.75rem;
-}
-
 [dir="ltr"] .ltr\:left-8{
   left: 2rem;
 }
@@ -48013,6 +48018,10 @@ body{
   left: 0.5rem;
 }
 
+[dir="rtl"] .rtl\:right-3{
+  right: 0.75rem;
+}
+
 [dir="rtl"] .rtl\:-left-2{
   left: -0.5rem;
 }
@@ -48029,10 +48038,6 @@ body{
   right: 0px;
 }
 
-[dir="rtl"] .rtl\:right-3{
-  right: 0.75rem;
-}
-
 [dir="rtl"] .rtl\:right-8{
   right: 2rem;
 }
diff --git a/resources/assets/js/components/AkauntingItemButton.vue b/resources/assets/js/components/AkauntingItemButton.vue
index f0d73cccc..81cf6f2f0 100644
--- a/resources/assets/js/components/AkauntingItemButton.vue
+++ b/resources/assets/js/components/AkauntingItemButton.vue
@@ -40,7 +40,7 @@
                                 v-bind="money"
                                 masked
                                 disabled
-                                class="text-right disabled-money text-gray"
+                                class="ltr:text-right rtl:text-left disabled-money text-gray"
                             ></money>
                         </div>
                     </div>
diff --git a/resources/assets/js/components/AkauntingSwitch.vue b/resources/assets/js/components/AkauntingSwitch.vue
index 05775e336..f8e9245d4 100644
--- a/resources/assets/js/components/AkauntingSwitch.vue
+++ b/resources/assets/js/components/AkauntingSwitch.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="lg:absolute w-12 hidden lg:flex items-center lg:ltr:right-0 lg:rtl:left-0 xl:-top-12 cursor-pointer">
+    <div class="relative lg:absolute w-12 flex items-center lg:ltr:right-0 lg:rtl:left-0 xl:-top-12 cursor-pointer">
         <input type="radio" :name="name" v-show="selected == '0'" @click="enabled = 1" value="1" id="enabled-1" v-model="selected" class="w-full h-full absolute right-0 z-20 opacity-0 cursor-pointer">
         <input type="radio" :name="name" v-show="selected == '1'" @click="enabled = 0" value="0" id="enabled-0" v-model="selected" class="w-full h-full absolute left-0 z-20 opacity-0 cursor-pointer">
 
diff --git a/resources/assets/sass/app.css b/resources/assets/sass/app.css
index b470be399..2e5d15b39 100644
--- a/resources/assets/sass/app.css
+++ b/resources/assets/sass/app.css
@@ -436,6 +436,11 @@ html[dir='rtl'] .el-input__suffix {
     text-align: left;
 }
 
+html[dir='rtl'] .el-scrollbar__wrap {
+    margin-left: -15px !important;
+    margin-right: unset !important;
+}
+
 .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
     right: 15px !important;
 }
diff --git a/resources/lang/en-GB/install.php b/resources/lang/en-GB/install.php
index a75a84d6d..af6686441 100644
--- a/resources/lang/en-GB/install.php
+++ b/resources/lang/en-GB/install.php
@@ -22,6 +22,7 @@ return [
         'extension'         => ':extension extension needs to be installed and loaded!',
         'directory'         => ':directory directory needs to be writable!',
         'executable'        => 'The PHP CLI executable file is not defined/working or its version is not :php_version or higher! Please, ask your hosting company to set PHP_BINARY or PHP_PATH environment variable correctly.',
+        'npm'               => '<b>Missing JavaScript files !</b> <br><br><span>You should run <em class="underline">npm install</em> and <em class="underline">npm run dev</em> commands.</span>', 
     ],
 
     'database' => [
diff --git a/resources/views/auth/users/edit.blade.php b/resources/views/auth/users/edit.blade.php
index 3908a8787..25136a84f 100644
--- a/resources/views/auth/users/edit.blade.php
+++ b/resources/views/auth/users/edit.blade.php
@@ -16,7 +16,7 @@
                             <x-form.group.email name="email" label="{{ trans('general.email') }}" ::disabled="{{ $user->hasPendingInvitation() ? 'true' : 'false' }}" />
 
                             @if (user()->id == $user->id)
-                            <x-form.group.checkbox name="change_password" :options="['1' => trans('auth.change_password')]" form-group-class="sm:col-span-3" @input="onChangePassword($event)" />
+                            <x-form.group.checkbox name="change_password" :options="['1' => trans('auth.change_password')]" form-group-class="sm:col-span-3" checkbox-class="sm:col-span-6" @input="onChangePassword($event)" />
 
                             <x-form.group.password name="password" :label="trans('auth.password.new')" v-show="show_password" />
                             @endif
diff --git a/resources/views/components/documents/form/line-item.blade.php b/resources/views/components/documents/form/line-item.blade.php
index 210c23337..99cea16db 100644
--- a/resources/views/components/documents/form/line-item.blade.php
+++ b/resources/views/components/documents/form/line-item.blade.php
@@ -159,8 +159,8 @@
                                     v-model="row.total"
                                     :currency="$currency"
                                     dynamicCurrency="currency"
-                                    money-class="text-right mt-0 disabled-money px-0"
-                                    form-group-class="text-right disabled-money"
+                                    money-class="ltr:text-right rtl:text-left mt-0 disabled-money px-0"
+                                    form-group-class="ltr:text-right rtl:text-left disabled-money"
                                 />
                             </div>
                         @endif
@@ -186,7 +186,7 @@
 
                     <td colspan="4" class="px-0 pb-3">
                         <div class="relative">
-                            <div class="absolute -top-6 left-3 flex items-center">
+                            <div class="absolute -top-6 ltr:left-3 rtl:right-3 flex items-center">
                                 @if (! $hideDiscount && in_array(setting('localisation.discount_location'), ['item', 'both']))
                                     <div class="text-left border-0 p-0 mr-16" v-if="!row.add_discount">
                                         <x-button type="button" class="text-xs text-purple" @click="onAddLineDiscount(index)" override="class">
@@ -252,7 +252,7 @@
 
                             @stack('discount_input_end')
 
-                            <div class="flex items-center lg:absolute right-0">
+                            <div class="flex items-center lg:absolute ltr:right-0 rtl:left-0">
                                 <div class="text-right">
                                     <x-form.input.money
                                         name="discount_amount"
@@ -263,8 +263,8 @@
                                         v-model="row.discount_amount"
                                         :currency="$currency"
                                         dynamicCurrency="currency"
-                                        money-class="text-right disabled-money px-0"
-                                        form-group-class="text-right disabled-money"
+                                        money-class="ltr:text-right rtl:text-left disabled-money px-0"
+                                        form-group-class="ltr:text-right rtl:text-left disabled-money"
                                     />
                                 </div>
 
@@ -327,7 +327,7 @@
                                 @stack('taxes_input_end')
                             </div>
 
-                            <div class="flex items-center lg:absolute right-0">
+                            <div class="flex items-center lg:absolute ltr:right-0 rtl:left-0">
                                 <div class="text-right">
                                     <x-form.input.money
                                         name="tax"
@@ -401,10 +401,10 @@
                                 @stack('taxes_input_end')
                             </div>
 
-                            <div class="flex items-center lg:absolute right-0">
+                            <div class="flex items-center lg:absolute ltr:right-0 rtl:left-0">
                                 <div class="text-right">
                                     <div class="required disabled text-right input-price disabled-money">
-                                        <input type="tel" class="v-money form-control text-right" name="discount_amount" disabled="disabled" value="__">
+                                        <input type="tel" class="v-money form-control ltr:text-right rtl:text-left" name="discount_amount" disabled="disabled" value="__">
                                     </div>
                                 </div>
 
diff --git a/resources/views/components/documents/form/totals.blade.php b/resources/views/components/documents/form/totals.blade.php
index 6766b5650..e519ea068 100644
--- a/resources/views/components/documents/form/totals.blade.php
+++ b/resources/views/components/documents/form/totals.blade.php
@@ -15,11 +15,11 @@
                     <tr id="tr-subtotal">
                         <td class="border-b-0 py-0"></td>
 
-                        <td class="font-medium text-right border-r-0 border-b-0 align-middle pb-0 pr-0">
+                        <td class="font-medium ltr:text-right rtl:text-left border-r-0 border-b-0 align-middle pb-0 pr-0">
                             {{ trans('invoices.sub_total') }}
                         </td>
 
-                        <td class="text-right border-b-0 long-texts py-0">
+                        <td class="ltr:text-right rtl:text-left border-b-0 long-texts py-0">
                             <div>
                                 <x-form.input.money
                                     name="sub_total"
@@ -29,8 +29,8 @@
                                     v-model="totals.sub"
                                     :currency="$currency"
                                     dynamicCurrency="currency"
-                                    money-class="text-right disabled-money px-0"
-                                    form-group-class="text-right disabled-money"
+                                    money-class="ltr:text-right rtl:text-left disabled-money px-0"
+                                    form-group-class="ltr:text-right rtl:text-left disabled-money"
                                 />
                             </div>
                         </td>
@@ -46,11 +46,11 @@
                         <tr id="tr-line-discount" v-if="totals.item_discount">
                             <td class="border-t-0 py-0"></td>
 
-                            <td class="text-right border-t-0 border-r-0 border-b-0 align-middle py-0 pr-0">
+                            <td class="ltr:text-right rtl:text-left border-t-0 border-r-0 border-b-0 align-middle py-0 pr-0">
                                 <span class="font-medium">{{ trans('invoices.item_discount') }}</span>
                             </td>
 
-                            <td class="text-right border-t-0 border-b-0 long-texts py-0 pr-0">
+                            <td class="ltr:text-right rtl:text-left border-t-0 border-b-0 long-texts py-0 pr-0">
                                 <div>
                                     <x-form.input.money
                                         name="item_discount"
@@ -60,8 +60,8 @@
                                         v-model="totals.item_discount"
                                         :currency="$currency"
                                         dynamicCurrency="currency"
-                                        money-class="text-right disabled-money px-0"
-                                        form-group-class="text-right disabled-money"
+                                        money-class="ltr:text-right rtl:text-left disabled-money px-0"
+                                        form-group-class="ltr:text-right rtl:text-left disabled-money"
                                     />
                                 </div>
                             </td>
@@ -78,7 +78,7 @@
                         <tr id="tr-discount">
                             <td class="border-t-0 py-0"></td>
 
-                            <td class="text-right border-t-0 border-r-0 border-b-0 align-middle py-0 pr-0">
+                            <td class="ltr:text-right rtl:text-left border-t-0 border-r-0 border-b-0 align-middle py-0 pr-0">
                                 <div v-if="show_discount_text" v-if="!totals.discount_text" @click="onAddDiscount()">
                                     <x-button.hover color="to-purple">
                                         {{ trans('invoices.add_discount') }}
@@ -110,7 +110,7 @@
                                 </div>
                             </td>
 
-                            <td class="relative text-right border-t-0 border-b-0 py-0 pr-0">
+                            <td class="relative ltr:text-right rtl:text-left border-t-0 border-b-0 py-0 pr-0">
                                 <div>
                                     <x-form.input.money
                                         name="discount_total"
@@ -120,8 +120,8 @@
                                         v-model="totals.discount"
                                         :currency="$currency"
                                         dynamicCurrency="currency"
-                                        money-class="text-right disabled-money px-0"
-                                        form-group-class="text-right disabled-money"
+                                        money-class="ltr:text-right rtl:text-left disabled-money px-0"
+                                        form-group-class="ltr:text-right rtl:text-left disabled-money"
                                     />
                                 </div>
 
@@ -141,11 +141,11 @@
                     <tr v-for="(tax, tax_index) in totals.taxes" :index="tax_index">
                         <td class="border-t-0 pt-5 pb-0"></td>
 
-                        <td class="text-right border-t-0  border-r-0 border-b-0 align-middle pt-5 pb-0 pr-0">
+                        <td class="ltr:text-right rtl:text-left border-t-0  border-r-0 border-b-0 align-middle pt-5 pb-0 pr-0">
                             <span class="font-medium" v-html="tax.name"></span>
                         </td>
 
-                        <td class="text-right border-t-0 border-b-0 long-texts pt-5 pb-0 pl-3">
+                        <td class="ltr:text-right rtl:text-left border-t-0 border-b-0 long-texts pt-5 pb-0 pl-3">
                             <div>
                                 <x-form.input.money
                                     name="tax_total"
@@ -155,8 +155,8 @@
                                     v-model="tax.total"
                                     :currency="$currency"
                                     dynamicCurrency="currency"
-                                    money-class="text-right disabled-money px-0"
-                                    form-group-class="text-right disabled-money"
+                                    money-class="ltr:text-right rtl:text-left disabled-money px-0"
+                                    form-group-class="ltr:text-right rtl:text-left disabled-money"
                                 />
                             </div>
                         </td>
@@ -172,7 +172,7 @@
                         <td class="border-t-0 pt-5 pb-0"></td>
 
                         <td class="flex items-center justify-end pt-5 pb-0">
-                            <span class="w-16 text-right font-medium mt-2 ltr:mr-2 rtl:ml-2">
+                            <span class="w-16 ltr:text-right rtl:text-left font-medium mt-2 ltr:mr-2 rtl:ml-2">
                                 {{ trans('invoices.total') }}
                             </span>
 
@@ -195,7 +195,7 @@
                             <x-form.input.hidden name="currency_rate" :value="(!empty($document)) ? $document->currency_rate : $currency->rate" />
                         </td>
 
-                        <td class="text-right border-t-0 long-texts pt-5 pb-0 pr-0">
+                        <td class="ltr:text-right rtl:text-left border-t-0 long-texts pt-5 pb-0 pr-0">
                             <div>
                                 <x-form.input.money
                                     name="grand_total"
@@ -205,8 +205,8 @@
                                     v-model="totals.total"
                                     :currency="$currency"
                                     dynamicCurrency="currency"
-                                    money-class="text-right disabled-money px-0"
-                                    form-group-class="text-right disabled-money"
+                                    money-class="ltr:text-right rtl:text-left disabled-money px-0"
+                                    form-group-class="ltr:text-right rtl:text-left disabled-money"
                                 />
                             </div>
                         </td>
@@ -224,7 +224,7 @@
                     ]">
                         <td class="border-t-0 pt-5 pb-0"></td>
 
-                        <td colspan="2" class="text-right border-t-0 border-r-0 align-middle pt-5 pb-0 pr-0">
+                        <td colspan="2" class="ltr:text-right rtl:text-left border-t-0 border-r-0 align-middle pt-5 pb-0 pr-0">
                             <akaunting-currency-conversion
                                 currency-conversion-text="{{ trans('currencies.conversion') }}"
                                 :price="(totals.total / form.currency_rate).toFixed(2)"
diff --git a/resources/views/components/empty-page.blade.php b/resources/views/components/empty-page.blade.php
index 598301646..4dba6f8a9 100644
--- a/resources/views/components/empty-page.blade.php
+++ b/resources/views/components/empty-page.blade.php
@@ -2,7 +2,9 @@
     <div class="w-full lg:w-1/2">
         <div class="border-b px-2 pb-3">
             <h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5">
-                {!! $title !!}
+                <x-title>
+                    {!! $title !!}
+                </x-title>
             </h1>
 
             <p class="mt-6 text-sm">
diff --git a/resources/views/components/form/accordion/head.blade.php b/resources/views/components/form/accordion/head.blade.php
index bb4d36897..0a1b81c40 100644
--- a/resources/views/components/form/accordion/head.blade.php
+++ b/resources/views/components/form/accordion/head.blade.php
@@ -4,7 +4,7 @@
     </h2>
 
     @if (! empty($description))
-    <span class="text-sm font-light text-black flex gap-x-1 mt-1">
+    <span class="text-sm font-light text-black block gap-x-1 mt-1">
         {!! $description !!}
     </span>
     @endif
diff --git a/resources/views/components/form/accordion/index.blade.php b/resources/views/components/form/accordion/index.blade.php
index 8a6d5e9d4..338ae59c9 100644
--- a/resources/views/components/form/accordion/index.blade.php
+++ b/resources/views/components/form/accordion/index.blade.php
@@ -5,7 +5,7 @@
     <div class="relative cursor-pointer" x-on:click="{{ $type }} !== 'open' ? {{ $type }} = 'open' : {{ $type }} = 'close'">
         {!! $head !!}
 
-        <x-icon filled class="absolute right-0 top-0 transition-all transform" :icon="$icon" x-bind:class="{{ $type }} === 'open' ? 'rotate-180' : ''" />
+        <x-icon filled class="absolute ltr:right-0 rtl:left-0 top-0 transition-all transform" :icon="$icon" x-bind:class="{{ $type }} === 'open' ? 'rotate-180' : ''" />
     </div>
     @endif
 
diff --git a/resources/views/components/form/group/checkbox.blade.php b/resources/views/components/form/group/checkbox.blade.php
index c16bb5fc7..7a7cadfa6 100644
--- a/resources/views/components/form/group/checkbox.blade.php
+++ b/resources/views/components/form/group/checkbox.blade.php
@@ -30,7 +30,7 @@
         @endif
 
         <div @class([
-                'flex items-center justify-center grid sm:grid-cols-6',
+                'flex items-center justify-start lg:justify-center grid sm:grid-cols-6',
                 $inputGroupClass,
             ])
         >
diff --git a/resources/views/components/form/section/head.blade.php b/resources/views/components/form/section/head.blade.php
index 3b25475cc..08120159b 100644
--- a/resources/views/components/form/section/head.blade.php
+++ b/resources/views/components/form/section/head.blade.php
@@ -4,7 +4,7 @@
     </h2>
 
     @if (!empty($description))
-    <span class="text-sm font-light text-black flex gap-x-1 mt-1">
+    <span class="text-sm font-light text-black block gap-x-1 mt-1">
         {!! $description !!}
     </span>
     @endif
diff --git a/resources/views/components/layouts/admin/header.blade.php b/resources/views/components/layouts/admin/header.blade.php
index 1576049c8..86f67f256 100644
--- a/resources/views/components/layouts/admin/header.blade.php
+++ b/resources/views/components/layouts/admin/header.blade.php
@@ -5,7 +5,9 @@
         <div 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 !!}
+                    <x-title>
+                        {!! $title !!}
+                    </x-title>
 
                     @yield('dashboard_action')
                 </h1>
diff --git a/resources/views/components/layouts/install.blade.php b/resources/views/components/layouts/install.blade.php
index 814b4cc3f..cf9e56c74 100644
--- a/resources/views/components/layouts/install.blade.php
+++ b/resources/views/components/layouts/install.blade.php
@@ -10,21 +10,39 @@
         @stack('body_start')
 
         <div class="bg-no-repeat bg-cover bg-center" style="background-image: url({{ asset('public/img/auth/login-bg.png') }});">
-            <div class="relative w-full lg:max-w-7xl flex items-center m-auto">
-                <x-layouts.auth.slider>
-                    {!! $slider ?? '' !!}
-                </x-layouts.auth.slider>
+            @if (! file_exists(public_path('public/js/install/install.min.js')))
+                <div class="relative w-full lg:max-w-7xl flex flex-col lg:flex-row items-center m-auto">
+                    <div class="md:w-6/12 h-screen hidden lg:flex flex-col items-center justify-center">
+                        <img src="{{ asset('public/img/empty_pages/transactions.png') }}" alt="" />                        
+                    </div>
 
-                <div class="w-full lg:w-46 h-31 flex flex-col justify-center gap-12 px-6 lg:px-24 py-24 mt-12 lg:mt-0">
-                    <div class="flex flex-col gap-4">
-                        <img src="{{ asset('public/img/akaunting-logo-green.svg') }}" class="w-16 my-3" alt="Akaunting" />
+                    <div class="w-full lg:w-46 h-31 flex flex-col justify-center gap-12 px-6 lg:px-24 py-24 mt-12 lg:mt-0">
+                        <div class="flex flex-col gap-4">
+                            <img src="{{ asset('public/img/akaunting-logo-green.svg') }}" class="w-16 my-3" alt="Akaunting" />
 
-                        <x-layouts.install.content :title="$title">
-                            {!! $content !!}
-                        </x-layouts.install.content>
+                            <div class="rounded-xl px-5 py-3 mb-5 bg-red-100 text-sm mb-0 text-red-600">
+                                {!! trans('install.requirements.npm') !!}
+                            </div>
+                        </div>
                     </div>
                 </div>
-            </div>
+            @else
+                <div class="relative w-full lg:max-w-7xl flex items-center m-auto">
+                    <x-layouts.auth.slider>
+                        {!! $slider ?? '' !!}
+                    </x-layouts.auth.slider>
+
+                    <div class="w-full lg:w-46 h-31 flex flex-col justify-center gap-12 px-6 lg:px-24 py-24 mt-12 lg:mt-0">
+                        <div class="flex flex-col gap-4">
+                            <img src="{{ asset('public/img/akaunting-logo-green.svg') }}" class="w-16 my-3" alt="Akaunting" />
+
+                            <x-layouts.install.content :title="$title">
+                                {!! $content !!}
+                            </x-layouts.install.content>
+                        </div>
+                    </div>
+                </div>
+            @endif
         </div>
 
         @stack('body_end')
diff --git a/resources/views/components/layouts/preview/header.blade.php b/resources/views/components/layouts/preview/header.blade.php
index c16665f54..a771c3136 100644
--- a/resources/views/components/layouts/preview/header.blade.php
+++ b/resources/views/components/layouts/preview/header.blade.php
@@ -5,7 +5,9 @@
         <div 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 !!}
+                    <x-title>
+                        {!! $title !!}
+                    </x-title>
 
                     @yield('dashboard_action')
                 </h1>
diff --git a/resources/views/components/layouts/signed/header.blade.php b/resources/views/components/layouts/signed/header.blade.php
index c16665f54..a771c3136 100644
--- a/resources/views/components/layouts/signed/header.blade.php
+++ b/resources/views/components/layouts/signed/header.blade.php
@@ -5,7 +5,9 @@
         <div 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 !!}
+                    <x-title>
+                        {!! $title !!}
+                    </x-title>
 
                     @yield('dashboard_action')
                 </h1>
diff --git a/resources/views/components/show/accordion/head.blade.php b/resources/views/components/show/accordion/head.blade.php
index 69af6ca93..f81998840 100644
--- a/resources/views/components/show/accordion/head.blade.php
+++ b/resources/views/components/show/accordion/head.blade.php
@@ -6,7 +6,7 @@
     </h2>
 
     @if (! empty($description))
-        <span class="text-sm font-light text-black flex gap-x-1 mt-1">
+        <span class="text-sm font-light text-black block gap-x-1 mt-1">
             {!! $description !!}
         </span>
     @endif
diff --git a/resources/views/components/title.blade.php b/resources/views/components/title.blade.php
new file mode 100644
index 000000000..05dd5cd06
--- /dev/null
+++ b/resources/views/components/title.blade.php
@@ -0,0 +1,9 @@
+@if (strlen($slot) >= 25 )
+    <x-tooltip id="page-title" placement="bottom" message="{!! $slot !!}">
+        <div class="truncate" style="width: 22rem;">
+            {!! $slot !!}
+        </div>
+    </x-tooltip>
+@else 
+    {!! $slot !!}
+@endif
\ No newline at end of file
diff --git a/resources/views/components/transfers/show/attachment.blade.php b/resources/views/components/transfers/show/attachment.blade.php
index 6e7020c83..e2a118a26 100644
--- a/resources/views/components/transfers/show/attachment.blade.php
+++ b/resources/views/components/transfers/show/attachment.blade.php
@@ -11,7 +11,7 @@
                 {{ trans('transers.slider.attachments') }}
             </div>
 
-            <span class="material-icons absolute right-0 top-0 transition-all transform" x-bind:class="attachment === 1 ? 'rotate-180' : ''">expand_more</span>
+            <span class="material-icons absolute ltr:right-0 rtl:left-0 top-0 transition-all transform" x-bind:class="attachment === 1 ? 'rotate-180' : ''">expand_more</span>
         </div>
 
         <div class="overflow-hidden transition-transform origin-top-left ease-linear duration-100"
diff --git a/resources/views/components/transfers/show/create.blade.php b/resources/views/components/transfers/show/create.blade.php
index a90c0a978..f1b3f1417 100644
--- a/resources/views/components/transfers/show/create.blade.php
+++ b/resources/views/components/transfers/show/create.blade.php
@@ -12,7 +12,7 @@
             {!! trans('transactions.slider.create', ['user' => $transfer->owner->name, 'date' => $created_date]) !!}
         </div>
 
-        <span class="material-icons absolute right-0 top-0 transition-all transform" x-bind:class="create === 1 ? 'rotate-180' : ''">expand_more</span>
+        <span class="material-icons absolute ltr:right-0 rtl:left-0 top-0 transition-all transform" x-bind:class="create === 1 ? 'rotate-180' : ''">expand_more</span>
     </button>
 
     <div
diff --git a/resources/views/components/transfers/show/transactions.blade.php b/resources/views/components/transfers/show/transactions.blade.php
index 628d17fe2..b427412ff 100644
--- a/resources/views/components/transfers/show/transactions.blade.php
+++ b/resources/views/components/transfers/show/transactions.blade.php
@@ -14,7 +14,7 @@
             {!! trans('transfers.slider.transactions', ['user' => $transfer->owner->name]) !!}
         </div>
 
-        <span class="material-icons absolute right-0 top-0 transition-all transform" x-bind:class="transactions === 1 ? 'rotate-180' : ''">expand_more</span>
+        <span class="material-icons absolute ltr:right-0 rtl:left-0 top-0 transition-all transform" x-bind:class="transactions === 1 ? 'rotate-180' : ''">expand_more</span>
     </button>
 
     <div
diff --git a/resources/views/livewire/menu/favorite.blade.php b/resources/views/livewire/menu/favorite.blade.php
index fc05de211..3df621411 100644
--- a/resources/views/livewire/menu/favorite.blade.php
+++ b/resources/views/livewire/menu/favorite.blade.php
@@ -1,11 +1,13 @@
-<x-tooltip id="favorite" placement="right" message="{{ ($favorited) ? trans('header.favorite.added_favorite') : trans('header.favorite.add_favorite') }}">
-    <span
-        id="{{ $favorited ? 'remove-from-favorite' : 'add-to-favorite' }}"
-        @class([
-            'flex items-center text-purple text-2xl ltr:ml-2 rtl:mr-2 lg:mt-2 cursor-pointer',
-            'material-icons-outlined transform transition-all hover:scale-125' => ($favorited) ? false : true,
-            'material-icons' => (! $favorited) ? false : true,
-        ])
-        wire:click="changeStatus()"
-    >grade</span>
-</x-tooltip>
+<div>
+    <x-tooltip id="favorite" placement="right" message="{{ ($favorited) ? trans('header.favorite.added_favorite') : trans('header.favorite.add_favorite') }}">
+        <span
+            id="{{ $favorited ? 'remove-from-favorite' : 'add-to-favorite' }}"
+            @class([
+                'flex items-center text-purple text-2xl ltr:ml-2 rtl:mr-2 lg:mt-2 cursor-pointer',
+                'material-icons-outlined transform transition-all hover:scale-125' => ($favorited) ? false : true,
+                'material-icons' => (! $favorited) ? false : true,
+            ])
+            wire:click="changeStatus()"
+        >grade</span>
+    </x-tooltip>
+</div>