diff --git a/app/Listeners/Update/V30/Version308.php b/app/Listeners/Update/V30/Version309.php
similarity index 91%
rename from app/Listeners/Update/V30/Version308.php
rename to app/Listeners/Update/V30/Version309.php
index c0c2fd9f3..07202609a 100644
--- a/app/Listeners/Update/V30/Version308.php
+++ b/app/Listeners/Update/V30/Version309.php
@@ -7,13 +7,13 @@ use App\Events\Install\UpdateFinished as Event;
 use App\Traits\Permissions;
 use Illuminate\Support\Facades\Log;
 
-class Version308 extends Listener
+class Version309 extends Listener
 {
     use Permissions;
 
     const ALIAS = 'core';
 
-    const VERSION = '3.0.8';
+    const VERSION = '3.0.9';
 
     /**
      * Handle the event.
@@ -27,7 +27,7 @@ class Version308 extends Listener
             return;
         }
 
-        Log::channel('stdout')->info('Updating to 3.0.8 version...');
+        Log::channel('stdout')->info('Updating to 3.0.9 version...');
 
         $this->updatePermissions();
 
diff --git a/app/Providers/Event.php b/app/Providers/Event.php
index 3942b3e8f..5b4a64535 100644
--- a/app/Providers/Event.php
+++ b/app/Providers/Event.php
@@ -20,7 +20,7 @@ class Event extends Provider
             'App\Listeners\Update\V30\Version304',
             'App\Listeners\Update\V30\Version305',
             'App\Listeners\Update\V30\Version307',
-            'App\Listeners\Update\V30\Version308',
+            'App\Listeners\Update\V30\Version309',
         ],
         'Illuminate\Auth\Events\Login' => [
             'App\Listeners\Auth\Login',
diff --git a/app/View/Components/Form/Group/Country.php b/app/View/Components/Form/Group/Country.php
index b54a86b17..76f600bda 100644
--- a/app/View/Components/Form/Group/Country.php
+++ b/app/View/Components/Form/Group/Country.php
@@ -15,6 +15,14 @@ class Country extends Form
      */
     public function render()
     {
+        if (empty($this->name)) {
+            $this->name = 'country';
+        }
+
+        if (empty($this->selected) && empty($this->getParentData('model'))) {
+            $this->selected = setting('company.country');
+        }
+
         return view('components.form.group.country');
     }
 }
diff --git a/app/View/Components/Form/Group/PaymentMethod.php b/app/View/Components/Form/Group/PaymentMethod.php
index 6675f145f..9fc45a1b3 100644
--- a/app/View/Components/Form/Group/PaymentMethod.php
+++ b/app/View/Components/Form/Group/PaymentMethod.php
@@ -18,6 +18,10 @@ class PaymentMethod extends Form
      */
     public function render()
     {
+        if (empty($this->name)) {
+            $this->name = 'payment_method';
+        }
+
         $this->payment_methods = Modules::getPaymentMethods();
 
         if (empty($this->selected) && empty($this->getParentData('model'))) {
diff --git a/composer.lock b/composer.lock
index eec933fe5..db0cfd06d 100644
--- a/composer.lock
+++ b/composer.lock
@@ -907,16 +907,16 @@
         },
         {
             "name": "aws/aws-sdk-php",
-            "version": "3.240.5",
+            "version": "3.240.8",
             "source": {
                 "type": "git",
                 "url": "https://github.com/aws/aws-sdk-php.git",
-                "reference": "7fb4c933795c5908fe5e2cb32913eed608901195"
+                "reference": "72a4381a59f42720b033865d265aa64c3190cc13"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/aws/aws-sdk-php/zipball/7fb4c933795c5908fe5e2cb32913eed608901195",
-                "reference": "7fb4c933795c5908fe5e2cb32913eed608901195",
+                "url": "https://api.github.com/repos/aws/aws-sdk-php/zipball/72a4381a59f42720b033865d265aa64c3190cc13",
+                "reference": "72a4381a59f42720b033865d265aa64c3190cc13",
                 "shasum": ""
             },
             "require": {
@@ -995,9 +995,9 @@
             "support": {
                 "forum": "https://forums.aws.amazon.com/forum.jspa?forumID=80",
                 "issues": "https://github.com/aws/aws-sdk-php/issues",
-                "source": "https://github.com/aws/aws-sdk-php/tree/3.240.5"
+                "source": "https://github.com/aws/aws-sdk-php/tree/3.240.8"
             },
-            "time": "2022-10-28T18:17:24+00:00"
+            "time": "2022-11-02T18:44:20+00:00"
         },
         {
             "name": "balping/json-raw-encoder",
@@ -1302,23 +1302,23 @@
         },
         {
             "name": "barryvdh/reflection-docblock",
-            "version": "v2.0.6",
+            "version": "v2.1.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/barryvdh/ReflectionDocBlock.git",
-                "reference": "6b69015d83d3daf9004a71a89f26e27d27ef6a16"
+                "reference": "bf44b757feb8ba1734659029357646466ded673e"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/barryvdh/ReflectionDocBlock/zipball/6b69015d83d3daf9004a71a89f26e27d27ef6a16",
-                "reference": "6b69015d83d3daf9004a71a89f26e27d27ef6a16",
+                "url": "https://api.github.com/repos/barryvdh/ReflectionDocBlock/zipball/bf44b757feb8ba1734659029357646466ded673e",
+                "reference": "bf44b757feb8ba1734659029357646466ded673e",
                 "shasum": ""
             },
             "require": {
                 "php": ">=5.3.3"
             },
             "require-dev": {
-                "phpunit/phpunit": "~4.0,<4.5"
+                "phpunit/phpunit": "^8.5.14|^9"
             },
             "suggest": {
                 "dflydev/markdown": "~1.0",
@@ -1348,9 +1348,9 @@
                 }
             ],
             "support": {
-                "source": "https://github.com/barryvdh/ReflectionDocBlock/tree/v2.0.6"
+                "source": "https://github.com/barryvdh/ReflectionDocBlock/tree/v2.1.0"
             },
-            "time": "2018-12-13T10:34:14+00:00"
+            "time": "2022-10-31T15:35:43+00:00"
         },
         {
             "name": "bkwld/cloner",
@@ -4858,16 +4858,16 @@
         },
         {
             "name": "laravel/framework",
-            "version": "v9.37.0",
+            "version": "v9.38.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/framework.git",
-                "reference": "0c9675abf6d966e834b2ebeca3319f524e07a330"
+                "reference": "abf198e443e06696af3f356b44de67c0fa516107"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/framework/zipball/0c9675abf6d966e834b2ebeca3319f524e07a330",
-                "reference": "0c9675abf6d966e834b2ebeca3319f524e07a330",
+                "url": "https://api.github.com/repos/laravel/framework/zipball/abf198e443e06696af3f356b44de67c0fa516107",
+                "reference": "abf198e443e06696af3f356b44de67c0fa516107",
                 "shasum": ""
             },
             "require": {
@@ -5040,7 +5040,7 @@
                 "issues": "https://github.com/laravel/framework/issues",
                 "source": "https://github.com/laravel/framework"
             },
-            "time": "2022-10-25T15:43:46+00:00"
+            "time": "2022-11-01T14:05:55+00:00"
         },
         {
             "name": "laravel/sanctum",
@@ -13247,16 +13247,16 @@
         },
         {
             "name": "filp/whoops",
-            "version": "2.14.5",
+            "version": "2.14.6",
             "source": {
                 "type": "git",
                 "url": "https://github.com/filp/whoops.git",
-                "reference": "a63e5e8f26ebbebf8ed3c5c691637325512eb0dc"
+                "reference": "f7948baaa0330277c729714910336383286305da"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/filp/whoops/zipball/a63e5e8f26ebbebf8ed3c5c691637325512eb0dc",
-                "reference": "a63e5e8f26ebbebf8ed3c5c691637325512eb0dc",
+                "url": "https://api.github.com/repos/filp/whoops/zipball/f7948baaa0330277c729714910336383286305da",
+                "reference": "f7948baaa0330277c729714910336383286305da",
                 "shasum": ""
             },
             "require": {
@@ -13306,7 +13306,7 @@
             ],
             "support": {
                 "issues": "https://github.com/filp/whoops/issues",
-                "source": "https://github.com/filp/whoops/tree/2.14.5"
+                "source": "https://github.com/filp/whoops/tree/2.14.6"
             },
             "funding": [
                 {
@@ -13314,7 +13314,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2022-01-07T12:00:00+00:00"
+            "time": "2022-11-02T16:23:29+00:00"
         },
         {
             "name": "hamcrest/hamcrest-php",
diff --git a/config/version.php b/config/version.php
index d4db79abc..4e96885c6 100644
--- a/config/version.php
+++ b/config/version.php
@@ -10,15 +10,15 @@ return [
 
     'minor'     =>  '0',
 
-    'patch'     =>  '8',
+    'patch'     =>  '9',
 
     'build'     =>  '',
 
     'status'    =>  'Stable',
 
-    'date'      =>  '31-October-2022',
+    'date'      =>  '03-November-2022',
 
-    'time'      =>  '18:00',
+    'time'      =>  '17:00',
 
     'zone'      =>  'GMT +3',
 
diff --git a/presets.js b/presets.js
index 11994f889..a41f04657 100644
--- a/presets.js
+++ b/presets.js
@@ -189,6 +189,7 @@ module.exports = {
 
           spacing: {
               'modal': '610px',
+              '500':   '500px',
               '5.5':   '1.30rem', 
               '9.5':   '2.45rem',
               '12.5':  '3.2rem',
diff --git a/public/css/app.css b/public/css/app.css
index d0bef2ece..c907379ff 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -1588,6 +1588,10 @@ button, input, optgroup, select, textarea{
 
 /* changelog modal styling for update center */
 
+#button-monthly {
+        margin-left: unset !important;
+    }
+
 *, ::before, ::after{
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -2051,6 +2055,12 @@ button, input, optgroup, select, textarea{
   bottom: 24rem;
   left: 24rem;
 }
+.inset-500{
+  top: 500px;
+  right: 500px;
+  bottom: 500px;
+  left: 500px;
+}
 .inset-auto{
   top: auto;
   right: auto;
@@ -2327,6 +2337,12 @@ button, input, optgroup, select, textarea{
   bottom: -24rem;
   left: -24rem;
 }
+.-inset-500{
+  top: -500px;
+  right: -500px;
+  bottom: -500px;
+  left: -500px;
+}
 .-inset-px{
   top: -1px;
   right: -1px;
@@ -2529,6 +2545,10 @@ button, input, optgroup, select, textarea{
   left: 24rem;
   right: 24rem;
 }
+.inset-x-500{
+  left: 500px;
+  right: 500px;
+}
 .inset-x-auto{
   left: auto;
   right: auto;
@@ -2713,6 +2733,10 @@ button, input, optgroup, select, textarea{
   left: -24rem;
   right: -24rem;
 }
+.-inset-x-500{
+  left: -500px;
+  right: -500px;
+}
 .-inset-x-px{
   left: -1px;
   right: -1px;
@@ -2893,6 +2917,10 @@ button, input, optgroup, select, textarea{
   top: 24rem;
   bottom: 24rem;
 }
+.inset-y-500{
+  top: 500px;
+  bottom: 500px;
+}
 .inset-y-auto{
   top: auto;
   bottom: auto;
@@ -3077,6 +3105,10 @@ button, input, optgroup, select, textarea{
   top: -24rem;
   bottom: -24rem;
 }
+.-inset-y-500{
+  top: -500px;
+  bottom: -500px;
+}
 .-inset-y-px{
   top: -1px;
   bottom: -1px;
@@ -3121,10 +3153,6 @@ button, input, optgroup, select, textarea{
   top: -100%;
   bottom: -100%;
 }
-.inset-y-1\/2{
-  top: 50%;
-  bottom: 50%;
-}
 .top-0{
   top: 0px;
 }
@@ -3227,6 +3255,9 @@ button, input, optgroup, select, textarea{
 .top-96{
   top: 24rem;
 }
+.top-500{
+  top: 500px;
+}
 .top-auto{
   top: auto;
 }
@@ -3365,6 +3396,9 @@ button, input, optgroup, select, textarea{
 .-top-96{
   top: -24rem;
 }
+.-top-500{
+  top: -500px;
+}
 .-top-px{
   top: -1px;
 }
@@ -3500,6 +3534,9 @@ button, input, optgroup, select, textarea{
 .right-96{
   right: 24rem;
 }
+.right-500{
+  right: 500px;
+}
 .right-auto{
   right: auto;
 }
@@ -3656,6 +3693,9 @@ button, input, optgroup, select, textarea{
 .-right-96{
   right: -24rem;
 }
+.-right-500{
+  right: -500px;
+}
 .-right-px{
   right: -1px;
 }
@@ -3791,6 +3831,9 @@ button, input, optgroup, select, textarea{
 .bottom-96{
   bottom: 24rem;
 }
+.bottom-500{
+  bottom: 500px;
+}
 .bottom-auto{
   bottom: auto;
 }
@@ -3929,6 +3972,9 @@ button, input, optgroup, select, textarea{
 .-bottom-96{
   bottom: -24rem;
 }
+.-bottom-500{
+  bottom: -500px;
+}
 .-bottom-px{
   bottom: -1px;
 }
@@ -4064,6 +4110,9 @@ button, input, optgroup, select, textarea{
 .left-96{
   left: 24rem;
 }
+.left-500{
+  left: 500px;
+}
 .left-auto{
   left: auto;
 }
@@ -4220,6 +4269,9 @@ button, input, optgroup, select, textarea{
 .-left-96{
   left: -24rem;
 }
+.-left-500{
+  left: -500px;
+}
 .-left-px{
   left: -1px;
 }
@@ -4775,6 +4827,9 @@ button, input, optgroup, select, textarea{
 .m-96{
   margin: 24rem;
 }
+.m-500{
+  margin: 500px;
+}
 .m-auto{
   margin: auto;
 }
@@ -4913,6 +4968,9 @@ button, input, optgroup, select, textarea{
 .-m-96{
   margin: -24rem;
 }
+.-m-500{
+  margin: -500px;
+}
 .-m-px{
   margin: -1px;
 }
@@ -5082,6 +5140,10 @@ button, input, optgroup, select, textarea{
   margin-left: 24rem;
   margin-right: 24rem;
 }
+.mx-500{
+  margin-left: 500px;
+  margin-right: 500px;
+}
 .mx-auto{
   margin-left: auto;
   margin-right: auto;
@@ -5266,6 +5328,10 @@ button, input, optgroup, select, textarea{
   margin-left: -24rem;
   margin-right: -24rem;
 }
+.-mx-500{
+  margin-left: -500px;
+  margin-right: -500px;
+}
 .-mx-px{
   margin-left: -1px;
   margin-right: -1px;
@@ -5446,6 +5512,10 @@ button, input, optgroup, select, textarea{
   margin-top: 24rem;
   margin-bottom: 24rem;
 }
+.my-500{
+  margin-top: 500px;
+  margin-bottom: 500px;
+}
 .my-auto{
   margin-top: auto;
   margin-bottom: auto;
@@ -5630,6 +5700,10 @@ button, input, optgroup, select, textarea{
   margin-top: -24rem;
   margin-bottom: -24rem;
 }
+.-my-500{
+  margin-top: -500px;
+  margin-bottom: -500px;
+}
 .-my-px{
   margin-top: -1px;
   margin-bottom: -1px;
@@ -5776,6 +5850,9 @@ button, input, optgroup, select, textarea{
 .mt-96{
   margin-top: 24rem;
 }
+.mt-500{
+  margin-top: 500px;
+}
 .mt-auto{
   margin-top: auto;
 }
@@ -5914,6 +5991,9 @@ button, input, optgroup, select, textarea{
 .-mt-96{
   margin-top: -24rem;
 }
+.-mt-500{
+  margin-top: -500px;
+}
 .-mt-px{
   margin-top: -1px;
 }
@@ -6049,6 +6129,9 @@ button, input, optgroup, select, textarea{
 .mr-96{
   margin-right: 24rem;
 }
+.mr-500{
+  margin-right: 500px;
+}
 .mr-auto{
   margin-right: auto;
 }
@@ -6187,6 +6270,9 @@ button, input, optgroup, select, textarea{
 .-mr-96{
   margin-right: -24rem;
 }
+.-mr-500{
+  margin-right: -500px;
+}
 .-mr-px{
   margin-right: -1px;
 }
@@ -6322,6 +6408,9 @@ button, input, optgroup, select, textarea{
 .mb-96{
   margin-bottom: 24rem;
 }
+.mb-500{
+  margin-bottom: 500px;
+}
 .mb-auto{
   margin-bottom: auto;
 }
@@ -6460,6 +6549,9 @@ button, input, optgroup, select, textarea{
 .-mb-96{
   margin-bottom: -24rem;
 }
+.-mb-500{
+  margin-bottom: -500px;
+}
 .-mb-px{
   margin-bottom: -1px;
 }
@@ -6595,6 +6687,9 @@ button, input, optgroup, select, textarea{
 .ml-96{
   margin-left: 24rem;
 }
+.ml-500{
+  margin-left: 500px;
+}
 .ml-auto{
   margin-left: auto;
 }
@@ -6733,6 +6828,9 @@ button, input, optgroup, select, textarea{
 .-ml-96{
   margin-left: -24rem;
 }
+.-ml-500{
+  margin-left: -500px;
+}
 .-ml-px{
   margin-left: -1px;
 }
@@ -6964,6 +7062,9 @@ button, input, optgroup, select, textarea{
 .h-96{
   height: 24rem;
 }
+.h-500{
+  height: 500px;
+}
 .h-auto{
   height: auto;
 }
@@ -7123,6 +7224,9 @@ button, input, optgroup, select, textarea{
 .max-h-96{
   max-height: 24rem;
 }
+.max-h-500{
+  max-height: 500px;
+}
 .max-h-px{
   max-height: 1px;
 }
@@ -7300,6 +7404,9 @@ button, input, optgroup, select, textarea{
 .w-96{
   width: 24rem;
 }
+.w-500{
+  width: 500px;
+}
 .w-auto{
   width: auto;
 }
@@ -7354,30 +7461,30 @@ button, input, optgroup, select, textarea{
   width: -moz-fit-content;
   width: fit-content;
 }
-.w-5\/12{
-  width: 41.666667%;
+.w-8\/12{
+  width: 66.666667%;
 }
 .w-4\/12{
   width: 33.333333%;
 }
-.w-3\/12{
-  width: 25%;
-}
 .w-6\/12{
   width: 50%;
 }
+.w-3\/12{
+  width: 25%;
+}
 .w-2\/12{
   width: 16.666667%;
 }
 .w-9\/12{
   width: 75%;
 }
-.w-8\/12{
-  width: 66.666667%;
-}
 .w-7\/12{
   width: 58.333333%;
 }
+.w-5\/12{
+  width: 41.666667%;
+}
 .w-1\/2{
   width: 50%;
 }
@@ -7687,6 +7794,10 @@ button, input, optgroup, select, textarea{
   -ms-flex-preferred-size: 24rem;
       flex-basis: 24rem;
 }
+.basis-500{
+  -ms-flex-preferred-size: 500px;
+      flex-basis: 500px;
+}
 .basis-auto{
   -ms-flex-preferred-size: auto;
       flex-basis: auto;
@@ -7917,6 +8028,11 @@ button, input, optgroup, select, textarea{
   --tw-border-spacing-y: 24rem;
   border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
 }
+.border-spacing-500{
+  --tw-border-spacing-x: 500px;
+  --tw-border-spacing-y: 500px;
+  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+}
 .border-spacing-px{
   --tw-border-spacing-x: 1px;
   --tw-border-spacing-y: 1px;
@@ -8103,6 +8219,10 @@ button, input, optgroup, select, textarea{
   --tw-border-spacing-x: 24rem;
   border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
 }
+.border-spacing-x-500{
+  --tw-border-spacing-x: 500px;
+  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+}
 .border-spacing-x-px{
   --tw-border-spacing-x: 1px;
   border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
@@ -8279,6 +8399,10 @@ button, input, optgroup, select, textarea{
   --tw-border-spacing-y: 24rem;
   border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
 }
+.border-spacing-y-500{
+  --tw-border-spacing-y: 500px;
+  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+}
 .border-spacing-y-px{
   --tw-border-spacing-y: 1px;
   border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
@@ -8525,6 +8649,11 @@ button, input, optgroup, select, textarea{
   -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));
 }
+.translate-x-500{
+  --tw-translate-x: 500px;
+  -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));
+}
 .translate-x-px{
   --tw-translate-x: 1px;
   -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));
@@ -8750,6 +8879,11 @@ button, input, optgroup, select, textarea{
   -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));
 }
+.-translate-x-500{
+  --tw-translate-x: -500px;
+  -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));
+}
 .-translate-x-px{
   --tw-translate-x: -1px;
   -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));
@@ -8975,6 +9109,11 @@ button, input, optgroup, select, textarea{
   -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));
 }
+.translate-y-500{
+  --tw-translate-y: 500px;
+  -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));
+}
 .translate-y-px{
   --tw-translate-y: 1px;
   -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));
@@ -9200,6 +9339,11 @@ button, input, optgroup, select, textarea{
   -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));
 }
+.-translate-y-500{
+  --tw-translate-y: -500px;
+  -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));
+}
 .-translate-y-px{
   --tw-translate-y: -1px;
   -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));
@@ -10494,6 +10638,9 @@ button, input, optgroup, select, textarea{
 .scroll-m-96{
   scroll-margin: 24rem;
 }
+.scroll-m-500{
+  scroll-margin: 500px;
+}
 .scroll-m-px{
   scroll-margin: 1px;
 }
@@ -10626,6 +10773,9 @@ button, input, optgroup, select, textarea{
 .-scroll-m-96{
   scroll-margin: -24rem;
 }
+.-scroll-m-500{
+  scroll-margin: -500px;
+}
 .-scroll-m-px{
   scroll-margin: -1px;
 }
@@ -10792,6 +10942,10 @@ button, input, optgroup, select, textarea{
   scroll-margin-left: 24rem;
   scroll-margin-right: 24rem;
 }
+.scroll-mx-500{
+  scroll-margin-left: 500px;
+  scroll-margin-right: 500px;
+}
 .scroll-mx-px{
   scroll-margin-left: 1px;
   scroll-margin-right: 1px;
@@ -10968,6 +11122,10 @@ button, input, optgroup, select, textarea{
   scroll-margin-left: -24rem;
   scroll-margin-right: -24rem;
 }
+.-scroll-mx-500{
+  scroll-margin-left: -500px;
+  scroll-margin-right: -500px;
+}
 .-scroll-mx-px{
   scroll-margin-left: -1px;
   scroll-margin-right: -1px;
@@ -11144,6 +11302,10 @@ button, input, optgroup, select, textarea{
   scroll-margin-top: 24rem;
   scroll-margin-bottom: 24rem;
 }
+.scroll-my-500{
+  scroll-margin-top: 500px;
+  scroll-margin-bottom: 500px;
+}
 .scroll-my-px{
   scroll-margin-top: 1px;
   scroll-margin-bottom: 1px;
@@ -11320,6 +11482,10 @@ button, input, optgroup, select, textarea{
   scroll-margin-top: -24rem;
   scroll-margin-bottom: -24rem;
 }
+.-scroll-my-500{
+  scroll-margin-top: -500px;
+  scroll-margin-bottom: -500px;
+}
 .-scroll-my-px{
   scroll-margin-top: -1px;
   scroll-margin-bottom: -1px;
@@ -11462,6 +11628,9 @@ button, input, optgroup, select, textarea{
 .scroll-mt-96{
   scroll-margin-top: 24rem;
 }
+.scroll-mt-500{
+  scroll-margin-top: 500px;
+}
 .scroll-mt-px{
   scroll-margin-top: 1px;
 }
@@ -11594,6 +11763,9 @@ button, input, optgroup, select, textarea{
 .-scroll-mt-96{
   scroll-margin-top: -24rem;
 }
+.-scroll-mt-500{
+  scroll-margin-top: -500px;
+}
 .-scroll-mt-px{
   scroll-margin-top: -1px;
 }
@@ -11726,6 +11898,9 @@ button, input, optgroup, select, textarea{
 .scroll-mr-96{
   scroll-margin-right: 24rem;
 }
+.scroll-mr-500{
+  scroll-margin-right: 500px;
+}
 .scroll-mr-px{
   scroll-margin-right: 1px;
 }
@@ -11858,6 +12033,9 @@ button, input, optgroup, select, textarea{
 .-scroll-mr-96{
   scroll-margin-right: -24rem;
 }
+.-scroll-mr-500{
+  scroll-margin-right: -500px;
+}
 .-scroll-mr-px{
   scroll-margin-right: -1px;
 }
@@ -11990,6 +12168,9 @@ button, input, optgroup, select, textarea{
 .scroll-mb-96{
   scroll-margin-bottom: 24rem;
 }
+.scroll-mb-500{
+  scroll-margin-bottom: 500px;
+}
 .scroll-mb-px{
   scroll-margin-bottom: 1px;
 }
@@ -12122,6 +12303,9 @@ button, input, optgroup, select, textarea{
 .-scroll-mb-96{
   scroll-margin-bottom: -24rem;
 }
+.-scroll-mb-500{
+  scroll-margin-bottom: -500px;
+}
 .-scroll-mb-px{
   scroll-margin-bottom: -1px;
 }
@@ -12254,6 +12438,9 @@ button, input, optgroup, select, textarea{
 .scroll-ml-96{
   scroll-margin-left: 24rem;
 }
+.scroll-ml-500{
+  scroll-margin-left: 500px;
+}
 .scroll-ml-px{
   scroll-margin-left: 1px;
 }
@@ -12386,6 +12573,9 @@ button, input, optgroup, select, textarea{
 .-scroll-ml-96{
   scroll-margin-left: -24rem;
 }
+.-scroll-ml-500{
+  scroll-margin-left: -500px;
+}
 .-scroll-ml-px{
   scroll-margin-left: -1px;
 }
@@ -12518,6 +12708,9 @@ button, input, optgroup, select, textarea{
 .scroll-p-96{
   scroll-padding: 24rem;
 }
+.scroll-p-500{
+  scroll-padding: 500px;
+}
 .scroll-p-px{
   scroll-padding: 1px;
 }
@@ -12684,6 +12877,10 @@ button, input, optgroup, select, textarea{
   scroll-padding-left: 24rem;
   scroll-padding-right: 24rem;
 }
+.scroll-px-500{
+  scroll-padding-left: 500px;
+  scroll-padding-right: 500px;
+}
 .scroll-px-px{
   scroll-padding-left: 1px;
   scroll-padding-right: 1px;
@@ -12860,6 +13057,10 @@ button, input, optgroup, select, textarea{
   scroll-padding-top: 24rem;
   scroll-padding-bottom: 24rem;
 }
+.scroll-py-500{
+  scroll-padding-top: 500px;
+  scroll-padding-bottom: 500px;
+}
 .scroll-py-px{
   scroll-padding-top: 1px;
   scroll-padding-bottom: 1px;
@@ -13002,6 +13203,9 @@ button, input, optgroup, select, textarea{
 .scroll-pt-96{
   scroll-padding-top: 24rem;
 }
+.scroll-pt-500{
+  scroll-padding-top: 500px;
+}
 .scroll-pt-px{
   scroll-padding-top: 1px;
 }
@@ -13134,6 +13338,9 @@ button, input, optgroup, select, textarea{
 .scroll-pr-96{
   scroll-padding-right: 24rem;
 }
+.scroll-pr-500{
+  scroll-padding-right: 500px;
+}
 .scroll-pr-px{
   scroll-padding-right: 1px;
 }
@@ -13266,6 +13473,9 @@ button, input, optgroup, select, textarea{
 .scroll-pb-96{
   scroll-padding-bottom: 24rem;
 }
+.scroll-pb-500{
+  scroll-padding-bottom: 500px;
+}
 .scroll-pb-px{
   scroll-padding-bottom: 1px;
 }
@@ -13398,6 +13608,9 @@ button, input, optgroup, select, textarea{
 .scroll-pl-96{
   scroll-padding-left: 24rem;
 }
+.scroll-pl-500{
+  scroll-padding-left: 500px;
+}
 .scroll-pl-px{
   scroll-padding-left: 1px;
 }
@@ -14050,6 +14263,9 @@ button, input, optgroup, select, textarea{
 .gap-96{
   gap: 24rem;
 }
+.gap-500{
+  gap: 500px;
+}
 .gap-px{
   gap: 1px;
 }
@@ -14250,6 +14466,11 @@ button, input, optgroup, select, textarea{
      -moz-column-gap: 24rem;
           column-gap: 24rem;
 }
+.gap-x-500{
+  -webkit-column-gap: 500px;
+     -moz-column-gap: 500px;
+          column-gap: 500px;
+}
 .gap-x-px{
   -webkit-column-gap: 1px;
      -moz-column-gap: 1px;
@@ -14402,6 +14623,9 @@ button, input, optgroup, select, textarea{
 .gap-y-96{
   row-gap: 24rem;
 }
+.gap-y-500{
+  row-gap: 500px;
+}
 .gap-y-px{
   row-gap: 1px;
 }
@@ -14602,6 +14826,11 @@ button, input, optgroup, select, textarea{
   margin-right: calc(24rem * var(--tw-space-x-reverse));
   margin-left: calc(24rem * calc(1 - var(--tw-space-x-reverse)));
 }
+.space-x-500 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(500px * var(--tw-space-x-reverse));
+  margin-left: calc(500px * calc(1 - var(--tw-space-x-reverse)));
+}
 .space-x-px > :not([hidden]) ~ :not([hidden]){
   --tw-space-x-reverse: 0;
   margin-right: calc(1px * var(--tw-space-x-reverse));
@@ -14822,6 +15051,11 @@ button, input, optgroup, select, textarea{
   margin-right: calc(-24rem * var(--tw-space-x-reverse));
   margin-left: calc(-24rem * calc(1 - var(--tw-space-x-reverse)));
 }
+.-space-x-500 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(-500px * var(--tw-space-x-reverse));
+  margin-left: calc(-500px * calc(1 - var(--tw-space-x-reverse)));
+}
 .-space-x-px > :not([hidden]) ~ :not([hidden]){
   --tw-space-x-reverse: 0;
   margin-right: calc(-1px * var(--tw-space-x-reverse));
@@ -15042,6 +15276,11 @@ button, input, optgroup, select, textarea{
   margin-top: calc(24rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(24rem * var(--tw-space-y-reverse));
 }
+.space-y-500 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(500px * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(500px * var(--tw-space-y-reverse));
+}
 .space-y-px > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(1px * calc(1 - var(--tw-space-y-reverse)));
@@ -15262,6 +15501,11 @@ button, input, optgroup, select, textarea{
   margin-top: calc(-24rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(-24rem * var(--tw-space-y-reverse));
 }
+.-space-y-500 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(-500px * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(-500px * var(--tw-space-y-reverse));
+}
 .-space-y-px > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(-1px * calc(1 - var(--tw-space-y-reverse)));
@@ -31515,6 +31759,9 @@ button, input, optgroup, select, textarea{
 .p-96{
   padding: 24rem;
 }
+.p-500{
+  padding: 500px;
+}
 .p-px{
   padding: 1px;
 }
@@ -31681,6 +31928,10 @@ button, input, optgroup, select, textarea{
   padding-left: 24rem;
   padding-right: 24rem;
 }
+.px-500{
+  padding-left: 500px;
+  padding-right: 500px;
+}
 .px-px{
   padding-left: 1px;
   padding-right: 1px;
@@ -31857,6 +32108,10 @@ button, input, optgroup, select, textarea{
   padding-top: 24rem;
   padding-bottom: 24rem;
 }
+.py-500{
+  padding-top: 500px;
+  padding-bottom: 500px;
+}
 .py-px{
   padding-top: 1px;
   padding-bottom: 1px;
@@ -31999,6 +32254,9 @@ button, input, optgroup, select, textarea{
 .pt-96{
   padding-top: 24rem;
 }
+.pt-500{
+  padding-top: 500px;
+}
 .pt-px{
   padding-top: 1px;
 }
@@ -32131,6 +32389,9 @@ button, input, optgroup, select, textarea{
 .pr-96{
   padding-right: 24rem;
 }
+.pr-500{
+  padding-right: 500px;
+}
 .pr-px{
   padding-right: 1px;
 }
@@ -32263,6 +32524,9 @@ button, input, optgroup, select, textarea{
 .pb-96{
   padding-bottom: 24rem;
 }
+.pb-500{
+  padding-bottom: 500px;
+}
 .pb-px{
   padding-bottom: 1px;
 }
@@ -32395,6 +32659,9 @@ button, input, optgroup, select, textarea{
 .pl-96{
   padding-left: 24rem;
 }
+.pl-500{
+  padding-left: 500px;
+}
 .pl-px{
   padding-left: 1px;
 }
@@ -32545,6 +32812,9 @@ button, input, optgroup, select, textarea{
 .indent-96{
   text-indent: 24rem;
 }
+.indent-500{
+  text-indent: 500px;
+}
 .indent-px{
   text-indent: 1px;
 }
@@ -32677,6 +32947,9 @@ button, input, optgroup, select, textarea{
 .-indent-96{
   text-indent: -24rem;
 }
+.-indent-500{
+  text-indent: -500px;
+}
 .-indent-px{
   text-indent: -1px;
 }
@@ -48007,10 +48280,18 @@ html[dir='rtl'] .el-scrollbar__wrap {
     }
     /* apex-chart cash-flow */
     .apex-chart-cash-flow .apexcharts-legend {
-        width: 24rem !important;
+        width: 100% !important;
         -ms-flex-pack: distribute !important;
             justify-content: space-around !important;
         padding: 0;
+        -ms-flex-wrap: nowrap !important;
+            flex-wrap: nowrap !important;
+    }
+
+    .apex-chart-cash-flow .apexcharts-legend-series {
+        width: 8rem;
+        text-align: center;
+        margin: 0 !important;
     }
 
     .apex-chart-cash-flow  .apexcharts-toolbar {
@@ -48127,6 +48408,17 @@ html[dir="rtl"] .lines-radius-border thead td:last-child {
     }
 }
 
+@media only screen and (max-width: 480px) {
+    .dashboard-picker .el-picker-panel__body {
+        width: 100% !important;
+        margin-left: unset !important;
+    }
+
+    .dashboard-picker.el-date-range-picker.el-popper.has-sidebar {
+        width: 100% !important;
+    }
+}
+
 #nprogress .bar {
     background: #A6A8C9 !important;
     height: 5px !important;
@@ -48509,6 +48801,11 @@ body{
   background-color: rgb(153 0 0 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-orange-700:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(184 119 8 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-lilac-900:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(220 226 249 / var(--tw-bg-opacity));
@@ -48677,13 +48974,13 @@ body{
   visibility: visible;
 }
 
-.group\/actions:hover .group-hover\/actions\:flex{
+.group:hover .group-hover\:flex{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
 
-.group:hover .group-hover\:flex{
+.group\/actions:hover .group-hover\/actions\:flex{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -48868,6 +49165,10 @@ body{
   right: 24rem;
 }
 
+[dir="ltr"] .ltr\:right-500{
+  right: 500px;
+}
+
 [dir="ltr"] .ltr\:right-auto{
   right: auto;
 }
@@ -49076,6 +49377,10 @@ body{
   left: 24rem;
 }
 
+[dir="ltr"] .ltr\:left-500{
+  left: 500px;
+}
+
 [dir="ltr"] .ltr\:left-auto{
   left: auto;
 }
@@ -49308,6 +49613,10 @@ body{
   margin: 24rem;
 }
 
+[dir="ltr"] .ltr\:m-500{
+  margin: 500px;
+}
+
 [dir="ltr"] .ltr\:m-auto{
   margin: auto;
 }
@@ -49562,6 +49871,10 @@ body{
   padding: 24rem;
 }
 
+[dir="ltr"] .ltr\:p-500{
+  padding: 500px;
+}
+
 [dir="ltr"] .ltr\:p-px{
   padding: 1px;
 }
@@ -49791,6 +50104,10 @@ body{
   right: 24rem;
 }
 
+[dir="rtl"] .rtl\:right-500{
+  right: 500px;
+}
+
 [dir="rtl"] .rtl\:right-auto{
   right: auto;
 }
@@ -49999,6 +50316,10 @@ body{
   left: 24rem;
 }
 
+[dir="rtl"] .rtl\:left-500{
+  left: 500px;
+}
+
 [dir="rtl"] .rtl\:left-auto{
   left: auto;
 }
@@ -50235,6 +50556,10 @@ body{
   margin: 24rem;
 }
 
+[dir="rtl"] .rtl\:m-500{
+  margin: 500px;
+}
+
 [dir="rtl"] .rtl\:m-auto{
   margin: auto;
 }
@@ -50499,6 +50824,10 @@ body{
   padding: 24rem;
 }
 
+[dir="rtl"] .rtl\:p-500{
+  padding: 500px;
+}
+
 [dir="rtl"] .rtl\:p-px{
   padding: 1px;
 }
@@ -50589,6 +50918,15 @@ body{
 
 @media (min-width: 640px){
 
+  .sm\:inset-y-1\/2{
+    top: 50%;
+    bottom: 50%;
+  }
+
+  .sm\:-right-1{
+    right: -0.25rem;
+  }
+
   .sm\:col-span-6{
     grid-column: span 6 / span 6;
   }
@@ -50625,6 +50963,10 @@ body{
     grid-row: span 3 / span 3;
   }
 
+  .sm\:float-right{
+    float: right;
+  }
+
   .sm\:mt-12{
     margin-top: 3rem;
   }
@@ -50637,18 +50979,22 @@ body{
     margin-top: -6rem;
   }
 
-  .sm\:mt-10{
-    margin-top: 2.5rem;
-  }
-
   .sm\:mt-2{
     margin-top: 0.5rem;
   }
 
+  .sm\:mb-5{
+    margin-bottom: 1.25rem;
+  }
+
   .sm\:mt-0{
     margin-top: 0px;
   }
 
+  .sm\:ml-8{
+    margin-left: 2rem;
+  }
+
   .sm\:block{
     display: block;
   }
@@ -50667,18 +51013,22 @@ body{
     display: none;
   }
 
+  .sm\:w-500{
+    width: 500px;
+  }
+
   .sm\:w-6\/12{
     width: 50%;
   }
 
-  .sm\:w-3\/12{
-    width: 25%;
-  }
-
   .sm\:w-5\/12{
     width: 41.666667%;
   }
 
+  .sm\:w-3\/12{
+    width: 25%;
+  }
+
   .sm\:w-4\/12{
     width: 33.333333%;
   }
@@ -50695,6 +51045,18 @@ body{
     width: 33.333333%;
   }
 
+  .sm\:w-96{
+    width: 24rem;
+  }
+
+  .sm\:w-60{
+    width: 15rem;
+  }
+
+  .sm\:w-auto{
+    width: auto;
+  }
+
   .sm\:flex-1{
     -webkit-box-flex: 1;
         -ms-flex: 1 1 0%;
@@ -50780,11 +51142,29 @@ body{
     border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
   }
 
+  .sm\:px-0{
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  .sm\:px-2{
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
   .sm\:text-6xl{
     font-size: 2.5rem;
     line-height: 2.75rem;
   }
 
+  [dir="ltr"] .sm\:ltr\:right-4{
+    right: 1rem;
+  }
+
+  [dir="rtl"] .sm\:rtl\:left-4{
+    left: 1rem;
+  }
+
   [dir="rtl"] .sm\:rtl\:space-x-reverse > :not([hidden]) ~ :not([hidden]){
     --tw-space-x-reverse: 1;
   }
@@ -50822,6 +51202,14 @@ body{
     right: 6rem;
   }
 
+  .lg\:bottom-2\.5{
+    bottom: 0.625rem;
+  }
+
+  .lg\:bottom-2{
+    bottom: 0.5rem;
+  }
+
   .lg\:top-2{
     top: 0.5rem;
   }
@@ -50907,6 +51295,10 @@ body{
     height: 12rem;
   }
 
+  .lg\:h-28{
+    height: 7rem;
+  }
+
   .lg\:h-60{
     height: 15rem;
   }
@@ -51073,6 +51465,12 @@ body{
     }
   }
 
+    .lg\:items-start{
+    -webkit-box-align: start;
+        -ms-flex-align: start;
+            align-items: flex-start;
+  }
+
     .lg\:items-center{
     -webkit-box-align: center;
         -ms-flex-align: center;
@@ -51163,6 +51561,11 @@ body{
     padding-right: 6rem;
   }
 
+    .lg\:px-0{
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
     .lg\:py-0{
     padding-top: 0px;
     padding-bottom: 0px;
@@ -51217,6 +51620,10 @@ body{
     line-height: 1.75rem;
   }
 
+    [dir="ltr"] .ltr\:lg\:right-0{
+    right: 0px;
+  }
+
     [dir="ltr"] .lg\:ltr\:right-0{
     right: 0px;
   }
@@ -51237,6 +51644,10 @@ body{
     padding-left: 6rem;
   }
 
+    [dir="rtl"] .rtl\:lg\:left-0{
+    left: 0px;
+  }
+
     [dir="rtl"] .lg\:rtl\:left-0{
     left: 0px;
   }
diff --git a/public/css/print.css b/public/css/print.css
index 8a9655a83..c19970f17 100644
--- a/public/css/print.css
+++ b/public/css/print.css
@@ -379,48 +379,6 @@ html[dir='rtl'] .text-right
 /*--General Finish--*/
 
 /*--Print Template Default Start--*/
-.col-60
-{
-    display: inline-block;
-    width: 60%;
-    vertical-align: top;
-}
-
-.col-58
-{
-    display: inline-block;
-    width: 58%;
-    vertical-align: top;
-}
-
-.col-50
-{
-    display: inline-block;
-    width: 50%;
-    vertical-align: top;
-}
-
-.col-42
-{
-    display: inline-block;
-    width: 42%;
-    vertical-align: top;
-}
-
-.col-40
-{
-    display: inline-block;
-    width: 40%;
-    vertical-align: top;
-}
-
-.col-16
-{
-    display: inline-block;
-    max-width: 16%;
-    vertical-align: top;
-}
-
 .col-100
 {
     display: inline-block;
@@ -805,8 +763,78 @@ html[dir='rtl'] .print-heading {
 .custom-product-hunt {
     display: none;
 }
+
+.classic-invoice {
+    margin-top: 10px;
+}
+
+.col-60
+{
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+}
+
+.col-50
+{
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+}
+
+.col-40
+{
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+}
+.col-58
+{
+    display: inline-block;
+    width: 58%;
+    vertical-align: top;
+}
+.col-42
+{
+    display: inline-block;
+    width: 42%;
+    vertical-align: top;
+}
+.col-16
+{
+    display: inline-block;
+    max-width: 16%;
+    vertical-align: top;
+}
 /*--Print --*/
 
+@media (min-width: 991px) {
+    .col-60
+    {
+        display: inline-block;
+        width: 60%;
+        vertical-align: top;
+    }
+    
+    .col-50
+    {
+        display: inline-block;
+        width: 50%;
+        vertical-align: top;
+    }
+    
+    .col-40
+    {
+        display: inline-block;
+        width: 40%;
+        vertical-align: top;
+    }
+
+    .classic-invoice {
+        margin-top: unset;
+    }
+}
+
 @media (max-width: 1600px) {
     .p-index-right {
         padding: 0;
diff --git a/resources/assets/js/components/AkauntingModal.vue b/resources/assets/js/components/AkauntingModal.vue
index 2a20e0f1e..a9b46550b 100644
--- a/resources/assets/js/components/AkauntingModal.vue
+++ b/resources/assets/js/components/AkauntingModal.vue
@@ -7,7 +7,7 @@
             tabindex="-1"
             role="dialog"
             :aria-hidden="!show">
-            <div class="w-full my-10 m-auto flex flex-col" :class="modalDialogClass ? modalDialogClass : 'max-w-md'">
+            <div class="w-full my-10 m-auto flex flex-col px-2 sm:px-0" :class="modalDialogClass ? modalDialogClass : 'max-w-md'">
                 <slot name="modal-content">
                     <div class="modal-content">
                         <div class="p-5 bg-body rounded-tl-lg rounded-tr-lg">
diff --git a/resources/assets/js/components/AkauntingModalAddNew.vue b/resources/assets/js/components/AkauntingModalAddNew.vue
index 4d9c35627..62b942aa5 100644
--- a/resources/assets/js/components/AkauntingModalAddNew.vue
+++ b/resources/assets/js/components/AkauntingModalAddNew.vue
@@ -7,7 +7,7 @@
             tabindex="-1"
             role="dialog"
             :aria-hidden="!show">
-            <div class="w-full my-10 m-auto flex flex-col" :class="modalDialogClass ? modalDialogClass : 'max-w-md'">
+            <div class="w-full my-10 m-auto flex flex-col px-2 sm:px-0" :class="modalDialogClass ? modalDialogClass : 'max-w-md'">
                 <slot name="modal-content">
                     <div class="modal-content">
                         <div class="p-5 bg-body rounded-tl-lg rounded-tr-lg">
diff --git a/resources/assets/js/components/AkauntingRecurring.vue b/resources/assets/js/components/AkauntingRecurring.vue
index 1387bf737..fb9d16882 100644
--- a/resources/assets/js/components/AkauntingRecurring.vue
+++ b/resources/assets/js/components/AkauntingRecurring.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="sm:col-span-6 space-y-8 sm:space-y-2">
-        <div class="flex flex-wrap lg:flex-nowrap items-center space-y-3 lg:space-y-0" :class="{ 'justify-between sm:justify-start': frequency == 'custom' }">
-            <div class="w-60 px-2 text-sm">
+    <div class="sm:col-span-6 space-y-6 sm:space-y-2">
+        <div class="flex flex-wrap lg:flex-nowrap items-center space-y-1 lg:space-y-0" :class="{ 'justify-start': frequency == 'custom' }">
+            <div class="w-24 sm:w-60 px-0 sm:px-2 text-sm">
                 {{ frequencyText }}
             </div>
 
@@ -14,7 +14,7 @@
                 </el-option>
             </el-select>
 
-            <div class="w-20 px-2 text-sm text-center" v-if="frequency == 'custom'">
+            <div class="w-20 sm:w-auto px-2 text-sm text-center" v-if="frequency == 'custom'">
                 {{ frequencyEveryText }}
             </div>
 
@@ -30,8 +30,8 @@
             </el-select>
         </div>
 
-        <div class="flex flex-wrap lg:flex-nowrap items-center space-y-3 lg:space-y-0" :class="{ 'justify-between sm:justify-start': limit !== 'never' }">
-            <div class="w-60 px-2 text-sm">
+        <div class="flex flex-wrap lg:flex-nowrap items-center space-y-3 lg:space-y-0" :class="{ 'justify-start': limit !== 'never' }">
+            <div class="w-24 sm:w-60 px-0 sm:px-2 text-sm">
                 {{ startText }}
             </div>
 
diff --git a/resources/assets/js/components/NotificationPlugin/Notification.vue b/resources/assets/js/components/NotificationPlugin/Notification.vue
index 941151db7..aff6ef9af 100644
--- a/resources/assets/js/components/NotificationPlugin/Notification.vue
+++ b/resources/assets/js/components/NotificationPlugin/Notification.vue
@@ -2,8 +2,7 @@
   <div
     @click="tryClose"
     data-notify="container"
-    class="alert alert-notify fixed flex items-center justify-between ltr:right-4 rtl:left-4 p-4 text-black font-bold rounded-lg z-30"
-    style="width: 500px;"
+    class="alert alert-notify fixed w-full sm:w-500 flex items-center justify-between ltr:right-0 rtl:left-0 sm:ltr:right-4 sm:rtl:left-4 p-4 text-black font-bold rounded-lg z-30"
     :class="[
       { 'alert-with-icon': icon },
       verticalAlign,
diff --git a/resources/assets/sass/app.css b/resources/assets/sass/app.css
index f43a0c352..53b35d8f4 100644
--- a/resources/assets/sass/app.css
+++ b/resources/assets/sass/app.css
@@ -217,6 +217,10 @@
         @apply text-green underline;
     }
     /* changelog modal styling for update center */
+
+    #button-monthly {
+        margin-left: unset !important;
+    }
 }
 
 /* menu */
@@ -480,9 +484,16 @@ html[dir='rtl'] .el-scrollbar__wrap {
     }
     /* apex-chart cash-flow */
     .apex-chart-cash-flow .apexcharts-legend {
-        width: 24rem !important;
+        width: 100% !important;
         justify-content: space-around !important;
         padding: 0;
+        flex-wrap: nowrap !important;
+    }
+
+    .apex-chart-cash-flow .apexcharts-legend-series {
+        width: 8rem;
+        text-align: center;
+        margin: 0 !important;
     }
 
     .apex-chart-cash-flow  .apexcharts-toolbar {
@@ -590,6 +601,17 @@ html[dir="rtl"] .lines-radius-border thead td:last-child {
     }
 }
 
+@media only screen and (max-width: 480px) {
+    .dashboard-picker .el-picker-panel__body {
+        width: 100% !important;
+        margin-left: unset !important;
+    }
+
+    .dashboard-picker.el-date-range-picker.el-popper.has-sidebar {
+        width: 100% !important;
+    }
+}
+
 #nprogress .bar {
     background: #A6A8C9 !important;
     height: 5px !important;
diff --git a/resources/lang/bg-BG/modules.php b/resources/lang/bg-BG/modules.php
index 85a423a43..d7a97439b 100644
--- a/resources/lang/bg-BG/modules.php
+++ b/resources/lang/bg-BG/modules.php
@@ -36,7 +36,7 @@ return [
     'install'               => 'Инсталирай',
     'buy_now'               => 'Купете сега',
     'get_api_key'           => '<a href=":url" target="_blank">Натиснете тук</a> за да получите вашия API ключ.',
-    'no_apps'               => 'Все още няма приложения в тази категория.',
+    'no_apps'               => 'Вижте най-професионалните приложения за вашия бизнес и ги вземете на най-добра цена.',
     'become_developer'      => 'Вие сте разработчик? <a href=":url" target="_blank">Тук</a> може да научите как да създадете приложение и да стартирате продажби днес!',
     'recommended_apps'      => 'Препоръчани Добавки',
     'can_not_install'       => 'Месечните абонаменти са налични само за Cloud service. <a href="https://akaunting.com/upgrade-to-yearly" target="_blank">Научете повече.</a>',
diff --git a/resources/lang/da-DK/email_templates.php b/resources/lang/da-DK/email_templates.php
index 32f331482..150f9ee35 100644
--- a/resources/lang/da-DK/email_templates.php
+++ b/resources/lang/da-DK/email_templates.php
@@ -29,6 +29,11 @@ return [
         'body'          => 'Hej,<br /><br />Baseret på den tilbagevendende faktura til {customer_name} er fakturanr. <strong>{invoice_number}</strong> automatisk blevet genereret.<br /><br />Du kan se fakturaoplysningerne på følgende link: <a href="{invoice_admin_link}">{invoice_number}</a>.<br / ><br />Med venlig hilsen<br />{company_name}',
     ],
 
+    'invoice_view_admin' => [
+        'subject'       => 'Faktura {invoice_number} set',
+        'body'          => 'Hej,<br /><br />{customer_name} har set faktura <strong>{invoice_number}</strong>.<br /><br />Du kan se fakturaoplysninger fra følgende link: <a href="{invoice_admin_link}">{invoice_number}</a>.<br /><br />Venlig hilsen,<br />{company_name}',
+    ],
+
     'invoice_payment_customer' => [
         'subject'       => 'Betaling for faktura nr. {invoice_number} er modtaget',
         'body'          => 'Kære {customer_name},<br /><br />Tak for din betaling. Find betalingsdetaljerne herunder:<br /><br />-------------------------------------------------<br /><br />Antal: <strong>{transaction_total}<br /></strong>Dato: <strong>{transaction_paid_date}</strong><br />Fakturanummer: <strong>{invoice_number}<br /><br /></strong>-------------------------------------------------<br /><br />Du kan altid se betalingsdetaljerne på dette link: <a href="{invoice_guest_link}">{invoice_number}</a>.<br /><br />Har du spørgsmål, er du velkommen til at kontakte os.<br /><br />Med venlig hilsen,<br />{company_name}',
@@ -49,13 +54,13 @@ return [
         'body'          => 'Hej,<br /><br /> Baseret på {vendor_name}\'s tilbagevendende betaling, er faktura nummer <strong>{bill_number}</strong> automatisk genereret.<br /><br />Du kan se fakturadetaljerne på dette link: <a href="{bill_admin_link}">{bill_number}</a>.<br /><br />Med venlig hilsen,<br />{company_name}',
     ],
 
-    'revenue_new_customer' => [
-        'subject'       => '{revenue_date} betaling oprettet',
-        'body'          => 'Kære {customer_name},<br /><br />Vi har forberedt følgende betaling. <br /><br />Du kan se betalingsdetaljerne på følgende link: <a href="{revenue_guest_link}">{revenue_date}</a>.<br /><br />Du er velkommen til at kontakte os, hvis du har spørgsmål til betalingen.<br /><br />Venlig hilsen,<br />{company_name}',
+    'payment_received_customer' => [
+        'subject'       => 'Din kvittering fra {company_name}',
+        'body'          => 'Kære {contact_name},<br /><br />Tak for betalingen. <br /><br />Du kan se betalingsoplysningerne fra følgende link: <a href="{payment_guest_link}">{payment_date}</a>.<br /><br />Du er velkommen til at kontakte os med spørgsmål.<br /><br />Med venlig hilsen,<br />{company_name}',
     ],
 
-    'payment_new_vendor' => [
-        'subject'       => '{revenue_date} betaling oprettet',
+    'payment_made_vendor' => [
+        'subject'       => 'Betaling foretaget af {company_name}',
         'body'          => 'Kære {vendor_name},<br /><br />Vi har forberedt følgende betaling. <br /><br />Du kan se betalingsdetaljerne på følgende link: <a href="{payment_admin_link}">{payment_date}</a>.<br /><br />Du er velkommen til at kontakte os, hvis du har spørgsmål.<br /><br />Venlig hilsen,<br />{company_name}
 ',
     ],
diff --git a/resources/lang/da-DK/errors.php b/resources/lang/da-DK/errors.php
index 53349e54e..0d117be6b 100644
--- a/resources/lang/da-DK/errors.php
+++ b/resources/lang/da-DK/errors.php
@@ -19,5 +19,7 @@ return [
         '404'       => 'Vi kunne ikke finde siden du kikkede efter.',
         '500'       => 'Vi vil arbejde på at fixe dette straks.',
         'record'    => 'Vi kunne ikke finde det, du ledte efter.',
+        'amount'    => 'Denne side indeholder ugyldige beløb! Kontakt venligst systemadministratoren.',
     ],
+
 ];
diff --git a/resources/lang/da-DK/footer.php b/resources/lang/da-DK/footer.php
index ada0a85dc..6b2e63387 100644
--- a/resources/lang/da-DK/footer.php
+++ b/resources/lang/da-DK/footer.php
@@ -6,5 +6,8 @@ return [
     'powered'               => 'Drevet af Akaunting',
     'link'                  => 'https://akaunting.com',
     'software'              => 'Gratis regnskabsprogram',
+    'powered_by'            => 'Drevet af',
+    'tag_line'              => 'Send fakturaer, spor udgifter, og automatiser regnskab med Akaunting. :get_started_url',
+    'get_started'           => 'Kom I Gang',
 
 ];
diff --git a/resources/lang/de-DE/auth.php b/resources/lang/de-DE/auth.php
index bc1b3934a..69a107349 100644
--- a/resources/lang/de-DE/auth.php
+++ b/resources/lang/de-DE/auth.php
@@ -39,6 +39,7 @@ return [
     'error' => [
         'self_delete'       => 'Fehler: Sie können sich nicht selbst löschen!',
         'self_disable'      => 'Fehler: Sie können Ihr Profil nicht selbst löschen!',
+        'unassigned'        => 'Fehler: Die Firma :company muss mindestens einem Benutzer zugeordnet sein.',
         'no_company'        => 'Fehler: Ihrem Konto wurde kein Unternehmen zugewiesen. Bitte kontaktieren Sie den Systemadministrator.',
     ],
 
diff --git a/resources/lang/de-DE/bills.php b/resources/lang/de-DE/bills.php
index 4aaee5ba5..b86da0e6b 100644
--- a/resources/lang/de-DE/bills.php
+++ b/resources/lang/de-DE/bills.php
@@ -19,7 +19,7 @@ return [
     'total'                 => 'Gesamt',
 
     'item_name'             => 'Artikel-Name|Artikel-Namen',
-    'recurring_bills'       => 'Wiederkehrende Rechnung|Wiederkehrende Rechnungen',
+    'recurring_bills'       => 'Wiederkehrende Rechnung(-en)',
 
     'show_discount'         => ':discount% Rabatt',
     'add_discount'          => 'füge Rabatt hinzu',
diff --git a/resources/lang/de-DE/transactions.php b/resources/lang/de-DE/transactions.php
index 1a5c853ce..7b3ff6944 100644
--- a/resources/lang/de-DE/transactions.php
+++ b/resources/lang/de-DE/transactions.php
@@ -6,7 +6,7 @@ return [
     'payment_made'          => 'Zahlung erfolgt',
     'paid_by'               => 'Bezahlt von',
     'paid_to'               => 'Bezahlt am',
-    'related_invoice'       => 'Zugehörige Rechnung (Einnahme)',
+    'related_invoice'       => 'Zugehörige Rechnung',
     'related_bill'          => 'Zugehörige Rechnung (Ausgabe)',
     'recurring_income'      => 'Wiederkehrende Einnahmen',
     'recurring_expense'     => 'Wiederkehrende Ausgaben',
@@ -24,6 +24,8 @@ return [
         'create_recurring'  => ':user hat diese wiederkehrende Transaktion am :date erstellt',
         'schedule'          => 'Wiederhole alle :interval :frequency seit :date',
         'children'          => ':count Transaktionen wurden automatisch erstellt',
+        'transfer_headline' => 'Von :from_account an :to_account',
+        'transfer_desc'     => 'Am :date erstellte Überweisung',
     ],
 
     'share' => [
diff --git a/resources/lang/en-GB/portal.php b/resources/lang/en-GB/portal.php
index a0ea4a0b1..c4c3fb6b2 100644
--- a/resources/lang/en-GB/portal.php
+++ b/resources/lang/en-GB/portal.php
@@ -12,6 +12,7 @@ return [
     'see_all_details'       => 'See all account details',
     'all_payments'          => 'Login to view all payments',
     'received_date'         => 'Received Date',
+    'redirect_description'  => 'You will be redirected to the :name website to make the payment.',
 
     'last_payment'          => [
         'title'             => 'Last Payment Made',
diff --git a/resources/lang/ro-RO/general.php b/resources/lang/ro-RO/general.php
index a8c8ead90..36adf863c 100644
--- a/resources/lang/ro-RO/general.php
+++ b/resources/lang/ro-RO/general.php
@@ -151,7 +151,7 @@ return [
     'duplicate'             => 'Duplicat',
     'unpaid'                => 'Neplatit',
     'paid'                  => 'Platit',
-    'overdue'               => 'Intarziat',
+    'overdue'               => 'Întârziate',
     'partially'             => 'Partial',
     'partially_paid'        => 'Platit Partial',
     'export'                => 'Export',
@@ -208,7 +208,7 @@ return [
     'client_portal'         => 'Portal Client',
     'issue_date'            => 'Data eliberării',
     'due_date'              => 'Data scadentă',
-    'open'                  => 'Deschide',
+    'open'                  => 'Deschise',
     'invite'                => 'Invită',
     'common'                => 'Comun',
     'api'                   => 'API',
diff --git a/resources/lang/ro-RO/reports.php b/resources/lang/ro-RO/reports.php
index 32cf21b15..aae73ec1c 100644
--- a/resources/lang/ro-RO/reports.php
+++ b/resources/lang/ro-RO/reports.php
@@ -9,7 +9,7 @@ return [
     'this_quarter'                  => 'Trimistrul acesta',
     'previous_quarter'              => 'Trimestrul anterior',
     'last_12_months'                => 'Ultimele 12 luni',
-    'profit_loss'                   => 'Profit & Pierdere',
+    'profit_loss'                   => 'Profit și Pierderi',
     'income_summary'                => 'Rezumat Venituri',
     'expense_summary'               => 'Rezumat Cheltuieli',
     'income_expense_summary'        => 'Venituri vs. Cheltuieli',
diff --git a/resources/lang/ro-RO/widgets.php b/resources/lang/ro-RO/widgets.php
index a2a77fc60..2ce53cb09 100644
--- a/resources/lang/ro-RO/widgets.php
+++ b/resources/lang/ro-RO/widgets.php
@@ -5,7 +5,7 @@ return [
     'receivables'               => 'Creanțe',
     'payables'                  => 'Sume datorate',
     'cash_flow'                 => 'Fluxul de numerar',
-    'profit_loss'               => 'Profit & Pierderi',
+    'profit_loss'               => 'Profit și Pierderi',
     'expenses_by_category'      => 'Cheltuieli pe categorii',
     'account_balance'           => 'Soldul contului',
     'bank_feeds'                => 'Conectează conturile bancare',
diff --git a/resources/views/auth/users/index.blade.php b/resources/views/auth/users/index.blade.php
index 4ae639573..e7ac922dd 100644
--- a/resources/views/auth/users/index.blade.php
+++ b/resources/views/auth/users/index.blade.php
@@ -30,7 +30,7 @@
                                 <x-index.bulkaction.all />
                             </x-table.th>
 
-                            <x-table.th class="w-5/12">
+                            <x-table.th class="w-8/12 sm:w-5/12">
                                 <x-sortablelink column="name" title="{{ trans('general.name') }}" />
                             </x-table.th>
 
@@ -38,7 +38,7 @@
                                 <x-sortablelink column="email" title="{{ trans('general.email') }}" />
                             </x-table.th>
 
-                            <x-table.th class="w-4/12 sm:w-3/12" kind="right">
+                            <x-table.th class="w-4/12" kind="right">
                                 {{ trans_choice('general.roles', 1) }}
                             </x-table.th>
                         </x-table.tr>
@@ -55,7 +55,7 @@
                                     />
                                 </x-table.td>
 
-                                <x-table.td class="w-4/12 sm:w-5/12">
+                                <x-table.td class="w-8/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 text-transparent" title="{{ $item->name }}" alt="{{ $item->name }}">
@@ -81,7 +81,7 @@
                                     {{ $item->email }}
                                 </x-table.td>
 
-                                <x-table.td class="w-3/12" kind="right">
+                                <x-table.td class="w-4/12" kind="right">
                                     <div class="space-x-2">
                                         @foreach($item->roles as $role)
                                             <span class="bg-lilac-900 px-2 py-0.5 test-xs rounded-lg text-black">
diff --git a/resources/views/banking/accounts/show.blade.php b/resources/views/banking/accounts/show.blade.php
index ded360508..c52c61943 100644
--- a/resources/views/banking/accounts/show.blade.php
+++ b/resources/views/banking/accounts/show.blade.php
@@ -25,7 +25,7 @@
         @stack('create_button_start')
 
         <x-dropdown id="show-new-actions-account">
-            <x-slot name="trigger" class="flex items-center px-3 py-1.5 mb-3 sm:mb-0 bg-green hover:bg-green-700 rounded-xl text-white text-sm font-bold leading-6" override="class">
+            <x-slot name="trigger" class="w-full flex items-center justify-between sm:justify-start px-3 py-1.5 mb-3 sm:mb-0 bg-green hover:bg-green-700 rounded-xl text-white text-sm font-bold leading-6" override="class">
                 {{ trans('general.new_more') }}
                 <span class="material-icons ltr:ml-2 rtl:mr-2">expand_more</span>
             </x-slot>
@@ -344,7 +344,7 @@
                                                     </x-slot>
                                                 </x-table.th>
 
-                                                <x-table.th class="w-3/12">
+                                                <x-table.th class="w-6/12 sm:w-3/12">
                                                     <x-slot name="first">
                                                         <x-sortablelink column="expense_transaction.name" title="{{ trans('transfers.from_account') }}" />
                                                     </x-slot>
@@ -353,7 +353,7 @@
                                                     </x-slot>
                                                 </x-table.th>
 
-                                                <x-table.th class="w-3/12">
+                                                <x-table.th class="w-4/12 sm:w-3/12" hidden-mobile>
                                                     <x-slot name="first">
                                                         <x-sortablelink column="expense_transaction.rate" title="{{ trans('transfers.from_rate') }}" />
                                                     </x-slot>
@@ -362,7 +362,7 @@
                                                     </x-slot>
                                                 </x-table.th>
 
-                                                <x-table.th class="w-3/12" kind="amount">
+                                                <x-table.th class="w-6/12 sm:w-3/12" kind="amount">
                                                     <x-slot name="first">
                                                         <x-sortablelink column="expense_transaction.amount" title="{{ trans('transfers.from_amount') }}" />
                                                     </x-slot>
@@ -397,7 +397,7 @@
                                                         </x-slot>
                                                     </x-table.td>
 
-                                                    <x-table.td class="w-3/12 truncate">
+                                                    <x-table.td class="w-6/12 sm:w-3/12 truncate">
                                                         <x-slot name="first">
                                                             {{ $item->expense_transaction->account->name }}
                                                         </x-slot>
@@ -406,7 +406,7 @@
                                                         </x-slot>
                                                     </x-table.td>
 
-                                                    <x-table.td class="w-3/12 truncate">
+                                                    <x-table.td class="w-4/12 sm:w-3/12 truncate" hidden-mobile>
                                                         <x-slot name="first">
                                                             {{ $item->expense_transaction->currency_rate }}
                                                         </x-slot>
@@ -415,7 +415,7 @@
                                                         </x-slot>
                                                     </x-table.td>
 
-                                                    <x-table.td class="w-3/12" kind="amount">
+                                                    <x-table.td class="w-6/12 sm:w-3/12" kind="amount">
                                                         <x-slot name="first">
                                                             <x-money :amount="$item->expense_transaction->amount" :currency="$item->expense_transaction->currency_code" convert />
                                                         </x-slot>
diff --git a/resources/views/banking/reconciliations/create.blade.php b/resources/views/banking/reconciliations/create.blade.php
index a86277b86..51dea0ae1 100644
--- a/resources/views/banking/reconciliations/create.blade.php
+++ b/resources/views/banking/reconciliations/create.blade.php
@@ -166,7 +166,7 @@
 
                     @if ($transactions->count())
                         <table class="min-w-full divide-y divide-gray-200">
-                            <tbody class="float-right">
+                            <tbody class="sm:float-right">
                                 <tr class="border-b">
                                     <th class="w-9/12 ltr:pr-6 rtl:pl-6 py-4 ltr:text-left rtl:text-right whitespace-nowrap text-sm font-bold text-black">
                                         {{ trans('reconciliations.opening_balance') }}:
diff --git a/resources/views/banking/reconciliations/edit.blade.php b/resources/views/banking/reconciliations/edit.blade.php
index e18c402ab..9beb71956 100644
--- a/resources/views/banking/reconciliations/edit.blade.php
+++ b/resources/views/banking/reconciliations/edit.blade.php
@@ -115,7 +115,7 @@
 
                 @if ($transactions->count())
                     <table class="min-w-full divide-y divide-gray-200">
-                        <tbody class="float-right">
+                        <tbody class="sm:float-right">
                             <tr class="border-b">
                                 <th class="w-9/12 ltr:pr-6 rtl:pl-6 py-4 ltr:text-left rtl:text-right whitespace-nowrap text-sm font-bold text-black">
                                     {{ trans('reconciliations.opening_balance') }}:
diff --git a/resources/views/components/contacts/show/buttons.blade.php b/resources/views/components/contacts/show/buttons.blade.php
index e17d9023c..2911e30b4 100644
--- a/resources/views/components/contacts/show/buttons.blade.php
+++ b/resources/views/components/contacts/show/buttons.blade.php
@@ -2,7 +2,7 @@
 
 @if (! $hideNewDropdown)
     <x-dropdown id="show-new-actions-{{ $contact->type }}">
-        <x-slot name="trigger" class="flex items-center px-3 py-1.5 mb-3 sm:mb-0 bg-green hover:bg-green-700 rounded-xl text-white text-sm font-bold leading-6" override="class">
+        <x-slot name="trigger" class="w-full flex items-center justify-between sm:justify-start px-3 py-1.5 mb-3 sm:mb-0 bg-green hover:bg-green-700 rounded-xl text-white text-sm font-bold leading-6" override="class">
             {{ trans('general.new_more') }}
             <span class="material-icons ltr:ml-2 rtl:mr-2">expand_more</span>
         </x-slot>
diff --git a/resources/views/components/contacts/show/content.blade.php b/resources/views/components/contacts/show/content.blade.php
index 323882e4d..104d7879e 100644
--- a/resources/views/components/contacts/show/content.blade.php
+++ b/resources/views/components/contacts/show/content.blade.php
@@ -66,7 +66,7 @@
         <x-show.content.left>
             @stack('customer_address_start')
             @if (! $hideAddress)
-            <div class="flex flex-col text-sm mb-5">
+            <div class="flex flex-col text-sm sm:mb-5">
                 <div class="font-medium">{{ trans('general.address') }}</div>
                 <span>{{ $contact->address }}<br>{{ $contact->location }}</span>
             </div>
@@ -76,7 +76,7 @@
             @stack('customer_tax_number_start')
             @if (! $hideTaxNumber)
             @if ($contact->tax_number)
-                <div class="flex flex-col text-sm mb-5">
+                <div class="flex flex-col text-sm sm:mb-5">
                     <div class="font-medium">{{ trans('general.tax_number') }}</div>
                     <span>{{ $contact->tax_number }}</span>
                 </div>
@@ -87,7 +87,7 @@
             @stack('customer_website_start')
             @if (! $hideWebsite)
             @if ($contact->website)
-                <div class="flex flex-col text-sm mb-5">
+                <div class="flex flex-col text-sm sm:mb-5">
                     <div class="font-medium">{{ trans('general.website') }}</div>
                     <span>{{ $contact->website }}</span>
                 </div>
@@ -98,7 +98,7 @@
             @stack('customer_reference_start')
             @if (! $hideReference)
             @if ($contact->reference)
-                <div class="flex flex-col text-sm mb-5">
+                <div class="flex flex-col text-sm sm:mb-5">
                     <div class="font-medium">{{ trans('general.reference') }}</div>
                     <span>{{ $contact->reference }}</span>
                 </div>
@@ -108,7 +108,7 @@
 
             @stack('customer_client_portal_start')
                 @if (! $hideUser)
-                    <div class="flex flex-col text-sm mb-5">
+                    <div class="flex flex-col text-sm sm:mb-5">
                         <div class="flex items-center font-medium">
                             <div class="flex items-center cursor-default">
                                 <x-tooltip id="tooltip-client-describe" placement="bottom" size="w-2/12" message="{{ trans('customers.client_portal_description') }}">
diff --git a/resources/views/components/documents/index/information.blade.php b/resources/views/components/documents/index/information.blade.php
index 6a48d4c7e..5cd96cd61 100644
--- a/resources/views/components/documents/index/information.blade.php
+++ b/resources/views/components/documents/index/information.blade.php
@@ -1,5 +1,5 @@
-<div id="{{ $id }}" role="tooltip" class="w-full lg:w-96 inline-block absolute left-0 z-10 text-sm font-medium rounded-lg border border-gray-200 shadow-sm whitespace-nowrap transition-visible bg-lilac-900 border-none text-black p-6 cursor-auto opacity-0 invisible information-content">
-    <div class="absolute w-2 h-2 inset-y-1/2 -right-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-lilac-900 before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0 data-popper-arrow"></div>
+<div id="{{ $id }}" role="tooltip" class="w-full sm:w-96 inline-block absolute left-0 z-10 text-sm font-medium rounded-lg border border-gray-200 shadow-sm whitespace-nowrap transition-visible bg-lilac-900 border-none text-black p-6 cursor-auto opacity-0 invisible information-content">
+    <div class="absolute w-2 h-2 sm:inset-y-1/2 sm:-right-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-lilac-900 before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0 data-popper-arrow"></div>
 
     <ul>
         <li class="relative flex items-center text-sm mb-7">
diff --git a/resources/views/components/documents/template/classic.blade.php b/resources/views/components/documents/template/classic.blade.php
index ff7973b73..8db235238 100644
--- a/resources/views/components/documents/template/classic.blade.php
+++ b/resources/views/components/documents/template/classic.blade.php
@@ -2,9 +2,11 @@
     <div class="row">
         <div class="col-100">
             <div class="text text-dark">
+                @stack('title_input_start')
                 <h3>
                     {{ $textDocumentTitle }}
                 </h3>
+                @stack('title_input_end')
             </div>
         </div>
     </div>
@@ -12,7 +14,7 @@
     <div class="row">
         <div class="col-58">
             <div class="text">
-                @stack('company_logo_start')
+                @stack('company_logo_input_start')
                 @if (! $hideCompanyLogo)
                     @if (!empty($document->contact->logo) && !empty($document->contact->logo->id))
                         <img  class="c-logo w-image" src="{{ $logo }}" alt="{{ $document->contact_name }}"/>
@@ -20,7 +22,7 @@
                         <img  class="c-logo w-image" src="{{ $logo }}" alt="{{ setting('company.name') }}" />
                     @endif
                 @endif
-                @stack('company_logo_end')
+                @stack('company_logo_input_end')
             </div>
         </div>
 
@@ -28,9 +30,11 @@
             <div class="text right-column">
                 @stack('company_details_start')
                 @if ($textDocumentSubheading)
+                    @stack('subheading_input_start')
                     <p class="text-normal font-semibold">
                         {{ $textDocumentSubheading }}
                     </p>
+                    @stack('subheading_input_end')
                 @endif
 
                 @if (! $hideCompanyDetails)
@@ -84,7 +88,7 @@
         <div class="col-33">
             <div class="invoice-classic-frame ml-1 mt-1" style="border: 1px solid {{ $backgroundColor }}">
                 <div class="invoice-classic-inline-frame text-center" style="border: 1px solid {{ $backgroundColor }}">
-                    @stack('invoice_number_input_start')
+                    @stack('document_number_input_start')
                     @if (! $hideDocumentNumber)
                         <div class="text small-text font-semibold mt-classic">
                             <span>
@@ -96,7 +100,7 @@
                             {{ $document->document_number }}
                         </div>
                     @endif
-                    @stack('invoice_number_input_end')
+                    @stack('document_number_input_end')
                 </div>
             </div>
         </div>
@@ -157,7 +161,7 @@
                     @endif
                 @stack('phone_input_end')
 
-                @stack('email_start')
+                @stack('email_input_start')
                     @if (! $hideContactEmail)
                         <p class="small-text">
                             {{ $document->contact_email }}
@@ -375,6 +379,7 @@
 
     @if (! $hideFooter)
         @if ($document->footer)
+        @stack('footer_input_start')
             <div class="row mt-1">
                 <div class="col-100">
                     <div class="text company">
@@ -384,6 +389,7 @@
                     </div>
                 </div>
             </div>
+        @stack('footer_input_start')
         @endif
     @endif
 </div>
diff --git a/resources/views/components/documents/template/default.blade.php b/resources/views/components/documents/template/default.blade.php
index df97780ed..d37bb2a1d 100644
--- a/resources/views/components/documents/template/default.blade.php
+++ b/resources/views/components/documents/template/default.blade.php
@@ -2,9 +2,11 @@
     <div class="row">
         <div class="col-100">
             <div class="text text-dark">
+                @stack('title_input_start')
                 <h3>
                     {{ $textDocumentTitle }}
                 </h3>
+                @stack('title_input_end')
             </div>
         </div>
     </div>
@@ -12,7 +14,7 @@
     <div class="row border-bottom-1">
         <div class="col-58">
             <div class="text">
-                @stack('company_logo_start')
+                @stack('company_logo_input_start')
                 @if (! $hideCompanyLogo)
                     @if (! empty($document->contact->logo) && ! empty($document->contact->logo->id))
                         <img class="d-logo w-image" src="{{ $logo }}" alt="{{ $document->contact_name }}"/>
@@ -20,7 +22,7 @@
                         <img class="d-logo w-image" src="{{ $logo }}" alt="{{ setting('company.name') }}"/>
                     @endif
                 @endif
-                @stack('company_logo_end')
+                @stack('company_logo_input_end')
             </div>
         </div>
 
@@ -344,6 +346,7 @@
 
     @if (! $hideFooter)
         @if ($document->footer)
+        @stack('footer_input_start')
             <div class="row mt-4">
                 <div class="col-100 text-left">
                     <div class="text">
@@ -353,6 +356,7 @@
                     </div>
                 </div>
             </div>
+        @stack('footer_input_end')
         @endif
     @endif
 </div>
diff --git a/resources/views/components/documents/template/modern.blade.php b/resources/views/components/documents/template/modern.blade.php
index 304a0f668..03ce54a80 100644
--- a/resources/views/components/documents/template/modern.blade.php
+++ b/resources/views/components/documents/template/modern.blade.php
@@ -2,9 +2,11 @@
     <div class="row">
         <div class="col-100">
             <div class="text text-dark">
+                @stack('title_input_start')
                 <h3>
                     {{ $textDocumentTitle }}
                 </h3>
+                @stack('title_input_end')
             </div>
         </div>
     </div>
@@ -12,7 +14,7 @@
     <div class="row modern-head pt-2 pb-2 mt-1 bg-{{ $backgroundColor }}" style="background-color:{{ $backgroundColor }} !important; -webkit-print-color-adjust: exact;">
         <div class="col-58">
             <div class="text p-modern">
-                @stack('company_logo_start')
+                @stack('company_logo_input_start')
                 @if (! $hideCompanyLogo)
                     @if (! empty($document->contact->logo) && ! empty($document->contact->logo->id))
                         <img class="w-image radius-circle" src="{{ $logo }}" alt="{{ $document->contact_name }}"/>
@@ -20,7 +22,7 @@
                         <img class="w-image radius-circle" src="{{ $logo }}" alt="{{ setting('company.name') }}" />
                     @endif
                 @endif
-                @stack('company_logo_end')
+                @stack('company_logo_input_end')
             </div>
         </div>
 
@@ -157,7 +159,7 @@
                     @endif
                 @stack('order_number_input_end')
 
-                @stack('invoice_number_input_start')
+                @stack('document_number_input_start')
                     @if (! $hideDocumentNumber)
                         <p class="mb-0">
                             <span class="font-semibold spacing">
@@ -169,7 +171,7 @@
                             </span>
                         </p>
                     @endif
-                @stack('invoice_number_input_end')
+                @stack('document_number_input_end')
 
                 @stack('issued_at_input_start')
                     @if (! $hideIssuedAt)
@@ -345,6 +347,7 @@
 
     @if (! $hideFooter)
         @if ($document->footer)
+        @stack('footer_input_start')
             <div class="row mt-7">
                 <div class="col-100 py-top p-modern" style="background-color:{{ $backgroundColor }} !important; -webkit-print-color-adjust: exact;">
                     <div class="text pl-2">
@@ -354,6 +357,7 @@
                     </div>
                 </div>
             </div>
+        @stack('footer_input_end')
         @endif
     @endif
 </div>
\ No newline at end of file
diff --git a/resources/views/components/empty-page.blade.php b/resources/views/components/empty-page.blade.php
index 77e19239b..4afd4e13f 100644
--- a/resources/views/components/empty-page.blade.php
+++ b/resources/views/components/empty-page.blade.php
@@ -66,7 +66,7 @@
         </ul>
     </div>
 
-    <div class="w-full lg:w-1/2 flex justify-end lg:mt-60">
+    <div class="w-full lg:w-1/2 flex justify-end mt-8 lg:mt-60">
         <img src="{{ $image }}" alt="{{ $title }}" />
     </div>
 </div>
diff --git a/resources/views/components/form/group/country.blade.php b/resources/views/components/form/group/country.blade.php
index 4b7dc4732..587be1f97 100644
--- a/resources/views/components/form/group/country.blade.php
+++ b/resources/views/components/form/group/country.blade.php
@@ -2,7 +2,7 @@
     name="country"
     label="{!! trans_choice('general.countries', 1) !!}"
     :options="trans('countries')"
-    :selected="setting('company.country')"
+    :selected="$selected"
     required="{{ $required }}"
     not-required="{{ $notRequired }}"
     model="form.country"
diff --git a/resources/views/components/form/group/invoice_text.blade.php b/resources/views/components/form/group/invoice_text.blade.php
index 60018d6c6..c6c40c7e9 100644
--- a/resources/views/components/form/group/invoice_text.blade.php
+++ b/resources/views/components/form/group/invoice_text.blade.php
@@ -1,7 +1,7 @@
 @stack($name . '_input_start')
 <div
     @class([
-        'grid grid-cols-6 gap-8',
+        'grid sm:grid-cols-6 gap-8',
         $formGroupClass,
         'required' => $required,
         'readonly' => $readonly,
diff --git a/resources/views/components/index/summary.blade.php b/resources/views/components/index/summary.blade.php
index 075238924..2a2757150 100644
--- a/resources/views/components/index/summary.blade.php
+++ b/resources/views/components/index/summary.blade.php
@@ -1,4 +1,4 @@
-<div class="flex items-center justify-center text-black mt-5 sm:mt-10 mb-10">
+<div class="flex items-center justify-center text-black mt-10 mb-10">
     @if (! empty($slot) && $slot->isNotEmpty())
         {!! $slot !!}
     @elseif (! empty($items))
diff --git a/resources/views/components/layouts/admin/footer.blade.php b/resources/views/components/layouts/admin/footer.blade.php
index 4ccdcdc2f..0b58f77bb 100644
--- a/resources/views/components/layouts/admin/footer.blade.php
+++ b/resources/views/components/layouts/admin/footer.blade.php
@@ -1,6 +1,6 @@
 @stack('footer_start')
     <footer class="footer">
-        <div class="flex flex-col sm:flex-row items-center justify-between mt-10 lg:mt-20 py-7 text-sm font-light">
+        <div class="flex flex-col sm:flex-row items-center justify-between lg:mt-20 py-7 text-sm font-light">
             <div>
                 {{ trans('footer.powered') }}:
                 <x-link href="{{ trans('footer.link') }}" target="_blank" override="class">{{ trans('footer.software') }}</x-link>
diff --git a/resources/views/components/layouts/modules/bar.blade.php b/resources/views/components/layouts/modules/bar.blade.php
index 126afca6b..0a50a65a9 100644
--- a/resources/views/components/layouts/modules/bar.blade.php
+++ b/resources/views/components/layouts/modules/bar.blade.php
@@ -1,66 +1,66 @@
-<div class="relative w-full flex border-b pt-8 mb-4">
-    <div class="flex flex-row items-center place-center border-r">
-        <button class="flex items-center" id="dropdownButton" data-dropdown-toggle="dropdown">
-            <i class="material-icons w-10 flex items-center aspect-square text-light-gray ltr:pl-2 rtl:pr-2 hover:text-gray-700"> apps_outlined </i>
-        </button>
+<div class="relative w-full flex flex-col sm:flex-row border-b pt-8 mb-4">
+    <div class="flex items-center">
+        <div class="flex flex-row items-center place-center border-r">
+            <button class="flex items-center" id="dropdownButton" data-dropdown-toggle="dropdown">
+                <i class="material-icons w-10 flex items-center aspect-square text-light-gray ltr:pl-2 rtl:pr-2 hover:text-gray-700"> apps_outlined </i>
+            </button>
 
-        <div id="dropdown" data-click-outside-none class="w-full px-0 hidden z-10">
-            <div class="flex flex-col md:flex-row">
-                <div class="w-full lg:w-6/12 flex flex-col shadow-md bg-white px-4 lg:pl-8 py-8 gap-2 rounded-l-xl">
-                    <h4 class="capitalize font-thin">
-                        {{ trans_choice('general.categories', 1) }}
-                    </h4>
+            <div id="dropdown" data-click-outside-none class="w-full px-0 hidden z-10">
+                <div class="flex flex-col md:flex-row">
+                    <div class="w-full lg:w-6/12 flex flex-col shadow-md bg-white px-4 lg:pl-8 py-8 gap-2 rounded-l-xl">
+                        <h4 class="capitalize font-thin">
+                            {{ trans_choice('general.categories', 1) }}
+                        </h4>
 
-                    <div class="grid grid-cols-2 gap-2">
-                        @foreach ($categories as $slug => $category)
-                            <x-link href="{{ $categoryUrl($slug) }}" class="font-semibold text-sm ltr:pr-4 rtl:pl-4 lg:pr-0 truncate bg-transparent" override="class">
-                                <x-link.hover>
-                                    {{ $category }}
-                                </x-link.hover>
-                            </x-link>
-                        @endforeach
-                    </div>
-                </div>
-
-                <div class="w-full lg:w-6/12 flex flex-col shadow-md bg-purple-lighter px-4 lg:px-12 py-8 gap-2 rounded-r-xl">
-                    <h4 class="capitalize font-thin mb-2">
-                        {{ trans('modules.popular_this_week') }}
-                    </h4>
-
-                    @if ($popular)
-                        <div class="flex flex-col gap-4">
-                            @foreach ($popular->data as $item)
-                                <div class="hover:shadow-2xl rounded-lg">
-                                    <x-link href="{{ route('apps.app.show', $item->slug) }}" class="flex items-center p-2" override="class">
-                                        @foreach ($item->files as $file)
-                                            @if (($file->media_type == 'image') && ($file->pivot->zone == 'thumbnail'))
-                                                <img src="{{ $file->path_string }}" alt="{{ $item->name }}" class="w-28 h-20 rounded-md object-cover ltr:mr-3 rtl:ml-3" />
-                                            @endif
-                                        @endforeach
-
-                                        <div class="flex flex-col py-1 gap-0">
-                                            <h6 class="text-sm font-bold capitalize">
-                                                {!! $item->name !!}
-                                            </h6>
-
-                                            <div class="line-clamp-2">
-                                                <p class="font-thin text-xs text-left">
-                                                    {!! $item->description !!}
-                                                </p>
-                                            </div>
-                                        </div>
-                                    </x-link>
-                                </div>
+                        <div class="grid grid-cols-2 gap-2">
+                            @foreach ($categories as $slug => $category)
+                                <x-link href="{{ $categoryUrl($slug) }}" class="font-semibold text-sm ltr:pr-4 rtl:pl-4 lg:pr-0 truncate bg-transparent" override="class">
+                                    <x-link.hover>
+                                        {{ $category }}
+                                    </x-link.hover>
+                                </x-link>
                             @endforeach
                         </div>
-                    @else
-                    @endif
+                    </div>
+
+                    <div class="w-full lg:w-6/12 flex flex-col shadow-md bg-purple-lighter px-4 lg:px-12 py-8 gap-2 rounded-r-xl">
+                        <h4 class="capitalize font-thin mb-2">
+                            {{ trans('modules.popular_this_week') }}
+                        </h4>
+
+                        @if ($popular)
+                            <div class="flex flex-col gap-4">
+                                @foreach ($popular->data as $item)
+                                    <div class="hover:shadow-2xl rounded-lg">
+                                        <x-link href="{{ route('apps.app.show', $item->slug) }}" class="flex items-center p-2" override="class">
+                                            @foreach ($item->files as $file)
+                                                @if (($file->media_type == 'image') && ($file->pivot->zone == 'thumbnail'))
+                                                    <img src="{{ $file->path_string }}" alt="{{ $item->name }}" class="w-28 h-20 rounded-md object-cover ltr:mr-3 rtl:ml-3" />
+                                                @endif
+                                            @endforeach
+
+                                            <div class="flex flex-col py-1 gap-0">
+                                                <h6 class="text-sm font-bold capitalize">
+                                                    {!! $item->name !!}
+                                                </h6>
+
+                                                <div class="line-clamp-2">
+                                                    <p class="font-thin text-xs text-left">
+                                                        {!! $item->description !!}
+                                                    </p>
+                                                </div>
+                                            </div>
+                                        </x-link>
+                                    </div>
+                                @endforeach
+                            </div>
+                        @else
+                        @endif
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
 
-    <div class="flex flex-col lg:flex-row w-full justify-between">
         <div class="w-8/12 h-full">
             <form method="GET" action="{{ url("/" . company_id()) }}/apps/search">
                 <div class="h-full flex items-center pl-2 gap-2">
@@ -107,31 +107,31 @@
             </div>
             </form>
         </div>
+    </div>
 
-        <div class="flex flex-row items-end lg:items-center mb-1 divide-x divide-black-400 mt-4 lg:mt-0">
-            <x-link href="{{ route('apps.home.index') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
-                <x-link.hover color="to-black-400">
-                    {{ trans('modules.home') }}
-                </x-link.hover>
-            </x-link>
+    <div class="lg:absolute lg:bottom-2.5 ltr:lg:right-0 rtl:lg:left-0 flex flex-row items-end lg:items-center mb-1 divide-x divide-black-400 mt-4 lg:mt-0">
+        <x-link href="{{ route('apps.home.index') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
+            <x-link.hover color="to-black-400">
+                {{ trans('modules.home') }}
+            </x-link.hover>
+        </x-link>
 
-            <x-link href="{{ route('apps.new') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
-                <x-link.hover color="to-black-400">
-                    {{ trans('modules.new') }}
-                </x-link.hover>
-            </x-link>
+        <x-link href="{{ route('apps.new') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
+            <x-link.hover color="to-black-400">
+                {{ trans('modules.new') }}
+            </x-link.hover>
+        </x-link>
 
-            <x-link href="{{ route('apps.paid') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
-                <x-link.hover color="to-black-400">
-                    {{ trans('modules.top_paid') }}
-                </x-link.hover>
-            </x-link>
+        <x-link href="{{ route('apps.paid') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
+            <x-link.hover color="to-black-400">
+                {{ trans('modules.top_paid') }}
+            </x-link.hover>
+        </x-link>
 
-            <x-link href="{{ route('apps.free') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
-                <x-link.hover color="to-black-400">
-                    {{ trans('modules.top_free') }}
-                </x-link.hover>
-            </x-link>
-        </div>
+        <x-link href="{{ route('apps.free') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
+            <x-link.hover color="to-black-400">
+                {{ trans('modules.top_free') }}
+            </x-link.hover>
+        </x-link>
     </div>
 </div>
\ No newline at end of file
diff --git a/resources/views/components/layouts/modules/show/buttons.blade.php b/resources/views/components/layouts/modules/show/buttons.blade.php
index ace49d0fe..9646db9a2 100644
--- a/resources/views/components/layouts/modules/show/buttons.blade.php
+++ b/resources/views/components/layouts/modules/show/buttons.blade.php
@@ -5,7 +5,7 @@
         <x-link
             href="{{ $module->action_url }}"
             target="_blank"
-            class="bg-green hover:bg-green-700 rounded-md text-white text-sm text-center w-full flex items-center justify-center px-3 py-2 truncate"
+            class="bg-green rounded-md text-white text-sm text-center w-full flex items-center justify-center px-3 py-2 truncate hover:bg-green-700"
             override="class"
         >
             {{ trans('modules.switch_to_cloud') }}
@@ -16,7 +16,7 @@
         @can('delete-modules-item')
             <x-link
                 href="{{ route('apps.app.uninstall', $module->slug) }}"
-                class="bg-red rounded-md text-white text-sm text-center w-1/2 py-2 truncate"
+                class="bg-red rounded-md text-white text-sm text-center w-full py-2 truncate hover:bg-red-700"
                 override="class"
             >
                 <x-link.loading>
@@ -29,7 +29,7 @@
             @if ($enable)
                 <x-link
                     href="{{ route('apps.app.disable', $module->slug) }}"
-                    class="bg-orange rounded-md text-white text-sm text-center w-1/2 py-2 truncate"
+                    class="bg-orange rounded-md text-white text-sm text-center w-full py-2 truncate hover:bg-orange-700"
                     override="class"
                 >
                     <x-link.loading>
@@ -39,7 +39,7 @@
             @else
                 <x-link
                     href="{{ route('apps.app.enable', $module->slug) }}"
-                    class="bg-green rounded-md text-white text-sm text-center w-1/2 py-2 truncate"
+                    class="bg-green rounded-md text-white text-sm text-center w-full py-2 truncate hover:bg-green-700"
                     override="class"
                 >
                     <x-link.loading>
@@ -60,7 +60,7 @@
                 @else
                     <button type="button"
                         @click="onInstall('{{ $module->action_url }}', '{{ $module->slug }}', '{!! str_replace("'", "\'", $module->name) !!}', '{{ $module->version }}')"
-                        class="bg-green hover:bg-green-700 disabled:bg-green-100 rounded-md text-white text-sm text-center w-full py-2 truncate"
+                        class="bg-green disabled:bg-green-100 rounded-md text-white text-sm text-center w-full py-2 truncate hover:bg-green-700"
                         id="install-module"
                         :disabled="installation.show"
                     >
@@ -73,7 +73,7 @@
                 <x-link
                     href="{{ $module->action_url }}"
                     target="_blank"
-                    class="bg-green hover:bg-green-700 rounded-md text-white text-sm text-center w-full py-2 truncate"
+                    class="bg-green rounded-md text-white text-sm text-center w-full py-2 truncate hover:bg-green-700"
                     override="class"
                 >
                     {{ trans('modules.use_app') }}
@@ -87,7 +87,7 @@
             <x-link
                 href="{{ $module->action_url }}"
                 target="_blank"
-                class="bg-green hover:bg-green-700 rounded-md text-white text-sm text-center w-full flex items-center justify-center px-3 py-2 truncate"
+                class="bg-green rounded-md text-white text-sm text-center w-full flex items-center justify-center px-3 py-2 truncate hover:bg-green-700"
                 override="class"
             >
                 {{ trans('modules.switch_to_cloud') }}
@@ -98,7 +98,7 @@
             <x-link
                 href="{{ $module->action_url }}"
                 target="_blank"
-                class="bg-green hover:bg-green-700 rounded-md text-white text-sm text-center w-full flex items-center justify-center px-3 py-2 truncate"
+                class="bg-green rounded-md text-white text-sm text-center w-full flex items-center justify-center px-3 py-2 truncate hover:bg-green-700"
                 override="class"
             >
                 {{ trans('modules.switch_to_cloud') }}
diff --git a/resources/views/components/layouts/modules/show/information.blade.php b/resources/views/components/layouts/modules/show/information.blade.php
index d8c460fea..a568a145a 100644
--- a/resources/views/components/layouts/modules/show/information.blade.php
+++ b/resources/views/components/layouts/modules/show/information.blade.php
@@ -7,11 +7,7 @@
         </span>
     </div>
 @elseif (in_array('onprime', $module->where_to_use))
-    <div x-show="price_type == true" class="text-center text-sm mt-3 mb--2">
-        <span style="height: 21px;display: block;"></span>
-    </div>
-
-    <div x-show="price_type == false" class="text-center text-sm mt-3 mb--2">
+    <div x-show="price_type == false" class="text-center text-sm mt-3">
         <span style="font-size: 12px;">
             <span class="text-red">*</span> <x-link href="https://akaunting.com/features/why-akaunting-cloud?utm_source=software&utm_medium=app_show&utm_campaign={{ str_replace('-', '_', $module->slug) }}" target="_blank" override="class">{!! trans('modules.information_monthly') !!}</x-link>
         </span>
diff --git a/resources/views/components/layouts/portal/footer.blade.php b/resources/views/components/layouts/portal/footer.blade.php
index 919ec690e..bdc132f23 100644
--- a/resources/views/components/layouts/portal/footer.blade.php
+++ b/resources/views/components/layouts/portal/footer.blade.php
@@ -1,6 +1,6 @@
 @stack('footer_start')
     <footer class="footer">
-        <div class="flex flex-col sm:flex-row items-center justify-between mt-10 lg:mt-20 py-7 text-sm font-light">
+        <div class="flex flex-col sm:flex-row items-center justify-between lg:mt-20 py-7 text-sm font-light">
             <div>
                 {{ trans('footer.powered') }}:
                 <a href="{{ trans('footer.link') }}" target="_blank">{{ trans('footer.software') }}</a> |
diff --git a/resources/views/components/layouts/preview.blade.php b/resources/views/components/layouts/preview.blade.php
index 4d6bbd2a2..623287ed8 100644
--- a/resources/views/components/layouts/preview.blade.php
+++ b/resources/views/components/layouts/preview.blade.php
@@ -11,8 +11,8 @@
 
         <div class="flex flex-col h-screen">
             <header class="py-5 bg-purple-lighter text-purple text-center">
-                <div class="w-full lg:max-w-6xl m-auto flex flex-col lg:flex-row items-center justify-between">
-                    <div class="flex flex-col items-start">
+                <div class="w-full lg:max-w-6xl m-auto flex flex-col lg:flex-row items-center justify-between px-4 lg:px-0">
+                    <div class="flex flex-col items-center lg:items-start">
                         <span class="font-medium uppercase">
                             {{ trans('general.preview_mode') }}
                         </span>
@@ -22,7 +22,7 @@
                         </span>
                     </div>
 
-                    <x-link href="{!! !empty($sticky->attributes->has('url')) ? $sticky->attributes->get('url') : route('dashboard') !!}" class="px-3 py-1.5 rounded-xl text-sm font-medium leading-6 bg-purple hover:bg-purple-700 text-white disabled:bg-purple-100" override="class">
+                    <x-link href="{!! !empty($sticky->attributes->has('url')) ? $sticky->attributes->get('url') : route('dashboard') !!}" class="px-3 py-1.5 mt-5 lg:mt-0 rounded-xl text-sm font-medium leading-6 bg-purple hover:bg-purple-700 text-white disabled:bg-purple-100" override="class">
                         {{ trans('general.go_back', ['type' => company()->name]) }}
                     </x-link>
                 </div>
diff --git a/resources/views/components/layouts/preview/footer.blade.php b/resources/views/components/layouts/preview/footer.blade.php
index 1fa36fb37..992a74f6c 100644
--- a/resources/views/components/layouts/preview/footer.blade.php
+++ b/resources/views/components/layouts/preview/footer.blade.php
@@ -1,7 +1,7 @@
 @stack('footer_start')
 
     <footer class="footer">
-        <div class="flex flex-col sm:flex-row items-center justify-between mt-10 lg:mt-20 py-7 text-sm font-light">
+        <div class="flex flex-col sm:flex-row items-center justify-between lg:mt-20 py-7 text-sm font-light">
             <div>
                 {{ trans('footer.powered') }}:
                 <x-link href="{{ trans('footer.link') }}" target="_blank" override="class">{{ trans('footer.software') }}</x-link>
diff --git a/resources/views/components/layouts/signed/footer.blade.php b/resources/views/components/layouts/signed/footer.blade.php
index 1fa36fb37..992a74f6c 100644
--- a/resources/views/components/layouts/signed/footer.blade.php
+++ b/resources/views/components/layouts/signed/footer.blade.php
@@ -1,7 +1,7 @@
 @stack('footer_start')
 
     <footer class="footer">
-        <div class="flex flex-col sm:flex-row items-center justify-between mt-10 lg:mt-20 py-7 text-sm font-light">
+        <div class="flex flex-col sm:flex-row items-center justify-between lg:mt-20 py-7 text-sm font-light">
             <div>
                 {{ trans('footer.powered') }}:
                 <x-link href="{{ trans('footer.link') }}" target="_blank" override="class">{{ trans('footer.software') }}</x-link>
diff --git a/resources/views/components/modules/banners.blade.php b/resources/views/components/modules/banners.blade.php
index 0ba2a014a..42dfa82dd 100644
--- a/resources/views/components/modules/banners.blade.php
+++ b/resources/views/components/modules/banners.blade.php
@@ -6,7 +6,7 @@
     <div class="w-full lg:h-48 px-6 bg-dark-blue rounded-lg flex flex-col lg:flex-row justify-between items-center my-8">
         <div class="w-full lg:w-1/2 flex flex-col self-end py-6">
             <div
-                class="h-28"
+                class="lg:h-28"
                 x-data="{
                     text: '',
                     textArray : ['{{ trans('modules.premium_banner') }}'],
diff --git a/resources/views/components/payment_method/redirect.blade.php b/resources/views/components/payment_method/redirect.blade.php
index 8f392bb7a..b87001873 100644
--- a/resources/views/components/payment_method/redirect.blade.php
+++ b/resources/views/components/payment_method/redirect.blade.php
@@ -1,24 +1,17 @@
-<div>
-    <div class="hidden">
-        @if (!empty($setting['name']))
-            <h2>{{ $setting['name'] }}</h2>
-        @endif
+{{ trans('portal.redirect_description', ['name' => $setting['name']]) }}
 
-        @if (!empty($setting['description']))
-            <div>{{ $setting['description'] }}</div>
-        @endif
-    </div>
-    <br>
-
-    <div class="buttons">
-        <div class="pull-right">
-            <x-form id="redirect-form" :url="$confirm_url">
-                <button @click="onRedirectConfirm" type="button" id="button-confirm" class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100">
-                    <span>
-                        {{ trans('general.confirm') }}
-                    </span>
-                </button>
-            </x-form>
-        </div>
-    </div>
+<div class="mt-3">
+    <x-form id="redirect-form" :url="$confirm_url">
+        <x-button
+            id="button-confirm"
+            kind="primary"
+            override="class"
+            class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100"
+            @click="onRedirectConfirm"
+        >
+            <span>
+                {{ trans('general.confirm') }}
+            </span>
+        </x-button>
+    </x-form>
 </div>
diff --git a/resources/views/components/reports/detail/table.blade.php b/resources/views/components/reports/detail/table.blade.php
index 474f5834d..1f3667d07 100644
--- a/resources/views/components/reports/detail/table.blade.php
+++ b/resources/views/components/reports/detail/table.blade.php
@@ -1,5 +1,5 @@
-<div class="overflow-x-visible mb-8 margin-bottom-spacing">
-    <table class="w-full rp-border-collapse">
+<div class="overflow-x-scroll large-overflow-unset mb-8 margin-bottom-spacing">
+    <table class="w-full small-table-width rp-border-collapse">
         @include($class->views['detail.table.header'])
         @include($class->views['detail.table.body'])
         @include($class->views['detail.table.footer'])
diff --git a/resources/views/components/show/content/index.blade.php b/resources/views/components/show/content/index.blade.php
index 064eb81d0..f54e9e7db 100644
--- a/resources/views/components/show/content/index.blade.php
+++ b/resources/views/components/show/content/index.blade.php
@@ -1,3 +1,3 @@
-<div class="flex flex-col lg:flex-row mt-12">
+<div class="flex flex-col lg:flex-row sm:mt-12">
     {!! $slot !!}
 </div>
diff --git a/resources/views/components/show/content/left.blade.php b/resources/views/components/show/content/left.blade.php
index ad6c10d49..f90e645c2 100644
--- a/resources/views/components/show/content/left.blade.php
+++ b/resources/views/components/show/content/left.blade.php
@@ -1,3 +1,3 @@
-<div class="lg:w-4/12 lg:border-r border-gray-300 pr-12">
+<div class="lg:w-4/12 lg:border-r border-gray-300 pr-12 mb-4 sm:mb-0">
     {!! $slot !!}
 </div>
diff --git a/resources/views/components/show/summary/left.blade.php b/resources/views/components/show/summary/left.blade.php
index 575e9b394..db91ff461 100644
--- a/resources/views/components/show/summary/left.blade.php
+++ b/resources/views/components/show/summary/left.blade.php
@@ -1,11 +1,11 @@
-<div class="w-full lg:w-5/12 flex items-center">
+<div class="w-full lg:w-5/12 flex items-center mb-10 sm:mb-0">
     @if (! empty($avatar) && $avatar->isNotEmpty())
     <div class="w-12 h-12 flex items-center justify-center text-2xl font-regular border border-gray-300 rounded-full p-6">
         {!! $avatar !!}
     </div>
     @endif
 
-    <div class="flex flex-col text-black text-sm font-medium ml-8">
+    <div class="flex flex-col text-black text-sm font-medium ml-2 sm:ml-8">
         {!! $slot !!}
     </div>
 </div>
diff --git a/resources/views/components/show/summary/right.blade.php b/resources/views/components/show/summary/right.blade.php
index 1276e4fe2..15a8c3b0d 100644
--- a/resources/views/components/show/summary/right.blade.php
+++ b/resources/views/components/show/summary/right.blade.php
@@ -1,4 +1,4 @@
-<div class="w-full lg:w-7/12 flex items-center mt-5 lg:mt-0">
+<div class="w-full lg:w-7/12 flex items-center">
     @if (! empty($slot) && $slot->isNotEmpty())
         {!! $slot !!}
     @elseif (! empty($items))
diff --git a/resources/views/components/tabs/index.blade.php b/resources/views/components/tabs/index.blade.php
index 9b1171122..6e317a89a 100644
--- a/resources/views/components/tabs/index.blade.php
+++ b/resources/views/components/tabs/index.blade.php
@@ -2,7 +2,7 @@
 
 <div x-data="{ active: window.location.hash.split('#')[1] == undefined ? '{{ $active }}' : window.location.hash.split('#')[1] }">
     <div>
-        <ul {{ ((! $attributes->has('override')) || ($attributes->has('override') && ! in_array('class', explode(',', $attributes->get('override'))))) ? $attributes->merge(['class' => 'flex items-center']) : $attributes }}>
+        <ul {{ ((! $attributes->has('override')) || ($attributes->has('override') && ! in_array('class', explode(',', $attributes->get('override'))))) ? $attributes->merge(['class' => 'flex items-center overflow-x-scroll lg:overflow-visible']) : $attributes }}>
             {!! $navs !!}
         </ul>
     </div>
diff --git a/resources/views/components/tabs/nav-link.blade.php b/resources/views/components/tabs/nav-link.blade.php
index e50ba7711..4e363be7f 100644
--- a/resources/views/components/tabs/nav-link.blade.php
+++ b/resources/views/components/tabs/nav-link.blade.php
@@ -1,7 +1,7 @@
 @props(['id', 'name', 'href', 'active'])
 
 <li 
-    class="relative px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b tabs-link"
+    class="relative px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b whitespace-nowrap tabs-link"
     id="tab-{{ $id }}"
     data-id="tab-{{ $id }}"
     data-tabs="{{ $id }}"
diff --git a/resources/views/components/tabs/nav.blade.php b/resources/views/components/tabs/nav.blade.php
index 10a1546b8..47743f05f 100644
--- a/resources/views/components/tabs/nav.blade.php
+++ b/resources/views/components/tabs/nav.blade.php
@@ -1,7 +1,7 @@
 @props(['id', 'name', 'active'])
 
 <li 
-    class="relative px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b tabs-link"
+    class="relative px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b whitespace-nowrap tabs-link"
     id="tab-{{ $id }}"
     data-id="tab-{{ $id }}"
     data-tabs="{{ $id }}"
diff --git a/resources/views/components/tips/fixed.blade.php b/resources/views/components/tips/fixed.blade.php
index f7a48cb02..0bf1f61ea 100644
--- a/resources/views/components/tips/fixed.blade.php
+++ b/resources/views/components/tips/fixed.blade.php
@@ -10,18 +10,28 @@
                 {{ $item->title }}
             </h2>
 
-            <div class="text-sm mb-2">
-                {!! $item->description !!}
-            </div>
+            <div
+                @class([
+                    'float-right' => $item->align == 'right',
+                    'float-left' => $item->align == 'left',
+                ])
 
-            <x-link href="{{ $item->action }}" class="font-light text-sm" override="class" target="_blank">
-                <x-link.hover>
-                    {{ $item->learn_more }}
-                </x-link.hover>
-            </x-link>
+                style="width: 200px;"
+            >
+
+                <div class="text-sm mb-2">
+                    {!! $item->description !!}
+                </div>
+
+                <x-link href="{{ $item->action }}" class="font-light text-sm" override="class" target="_blank">
+                    <x-link.hover>
+                        {{ $item->learn_more }}
+                    </x-link.hover>
+                </x-link>
+            </div>
         </div>
 
-        <div class="absolute ltr:right-0 rtl:left-0 -top-4">
+        <div class="absolute ltr:right-0 rtl:left-0">
             <img src="{{ $item->thumb }}" alt="{{ $item->title }}" />
         </div>
     </div>
diff --git a/resources/views/components/tips/relative.blade.php b/resources/views/components/tips/relative.blade.php
index bf56e29f2..7847c1f98 100644
--- a/resources/views/components/tips/relative.blade.php
+++ b/resources/views/components/tips/relative.blade.php
@@ -10,18 +10,27 @@
                 {{ $item->title }}
             </h2>
 
-            <div class="text-sm mb-2">
-                {!! $item->description !!}
-            </div>
+            <div
+                @class([
+                    'float-right' => $item->align == 'right',
+                    'float-left' => $item->align == 'left',
+                ])
 
-            <x-link href="{{ $item->action }}" class="font-light text-sm" override="class" target="_blank">
-                <x-link.hover>
-                    {{ $item->learn_more }}
-                </x-link.hover>
-            </x-link>
+                style="width: 200px;"
+            >
+                <div class="text-sm mb-2">
+                    {!! $item->description !!}
+                </div>
+
+                <x-link href="{{ $item->action }}" class="font-light text-sm" override="class" target="_blank">
+                    <x-link.hover>
+                        {{ $item->learn_more }}
+                    </x-link.hover>
+                </x-link>
+            </div>
         </div>
 
-        <div class="absolute ltr:right-0 rtl:left-0 -top-4">
+        <div class="absolute ltr:right-0 rtl:left-0">
             <img src="{{ $item->thumb }}" alt="{{ $item->title }}" />
         </div>
     </div>
diff --git a/resources/views/components/transactions/template/default.blade.php b/resources/views/components/transactions/template/default.blade.php
index 8017c885f..be80ca1d4 100644
--- a/resources/views/components/transactions/template/default.blade.php
+++ b/resources/views/components/transactions/template/default.blade.php
@@ -5,13 +5,13 @@
             <tr>
                 @if (! $hideCompanyLogo)
                 <td style="width:20%; padding: 0 0 15px 0;" valign="top">
-                    @stack('company_logo_start')
+                    @stack('company_logo_input_start')
                     @if (!empty($transaction->contact->logo) && !empty($transaction->contact->logo->id))
                         <img src="{{ Storage::url($transaction->contact->logo->id) }}" height="70" width="70" alt="{{ $transaction->contact_name }}" />
                     @else
                         <img src="{{ $logo }}" height="70" width="70" alt="{{ setting('company.name') }}" />
                     @endif
-                    @stack('company_logo_end')
+                    @stack('company_logo_input_end')
                 </td>
                 @endif
 
@@ -264,6 +264,10 @@
             @stack('email_input_end')
         @endif
 
+        @stack('amount_input_start')
+        {{-- The reason for adding the amount part here is because the amount style is broken in the view. --}}
+        @stack('amount_input_end')
+
         <tr>
             <td></td>
         </tr>
diff --git a/resources/views/components/transfers/template/default.blade.php b/resources/views/components/transfers/template/default.blade.php
index 5ff3758db..87b4f38b6 100644
--- a/resources/views/components/transfers/template/default.blade.php
+++ b/resources/views/components/transfers/template/default.blade.php
@@ -2,7 +2,7 @@
     @stack('from_account_start')
     <table class="border-bottom-1">
         <tbody>
-            @stack('from_account_id_start')
+            @stack('from_account_id_input_start')
             <tr>
                 <td style="width: 60%; padding: 0 0 15px 0;">
                     <div class="mb-1 font-semibold" style="font-size: 14px; margin-bottom: 15px;">
@@ -86,7 +86,7 @@
                     @endif
                 </td>
             </tr>
-            @stack('from_account_id_end')
+            @stack('from_account_id_input_end')
         </tbody>
     </table>
     @stack('from_account_end')
@@ -94,7 +94,7 @@
     @stack('to_account_start')
     <table class="border-bottom-1" style="margin-top:15px;">
         <tbody>
-            @stack('to_account_id_start')
+            @stack('to_account_id_input_start')
             <tr>
                 <td style="width: 60%; padding: 0 0 15px 0;">
                     <div class="mb-1 font-semibold" style="font-size: 14px; margin-bottom: 15px;">
@@ -178,7 +178,7 @@
                     @endif
                 </td>
             </tr>
-            @stack('to_account_id_end')
+            @stack('to_account_id_input_end')
         </tbody>
     </table>
     @stack('to_account_end')
@@ -247,19 +247,21 @@
         </tr>
         @stack('description_input_end')
 
+        @stack('amount_input_start')
+        {{-- The reason for adding the amount part here is because the amount style is broken in the view. --}}
+        @stack('amount_input_end')
+
         <tr>
             <td></td>
         </tr>
     </table>
     @stack('details_end')
 
-    @stack('amount_start')
+    
     <table style="text-align: right; margin-top:55px;">
-        @stack('amount_table_start')
         <tr>
             <td valign="center" style="width:80%; display:block; float:right; background-color: #55588B; -webkit-print-color-adjust: exact; color:#ffffff; border-radius: 5px;">
                 <table>
-                    @stack('amount_input_start')
                     <tr>
                         <td valign="center" class="font-semibold" style="padding:0; font-size: 14px; color:#ffffff;">
                             <span class="ml-2">
@@ -269,11 +271,8 @@
                             <x-money :amount="$transfer->expense_transaction->amount" :currency="$transfer->expense_transaction->currency_code" convert />
                         </td>
                     </tr>
-                    @stack('amount_input_end')
                 </table>
             </td>
         </tr>
-        @stack('amount_table_end')
     </table>
-    @stack('amount_end')
 </div>
diff --git a/resources/views/components/transfers/template/second.blade.php b/resources/views/components/transfers/template/second.blade.php
index cd3379192..830d242a8 100644
--- a/resources/views/components/transfers/template/second.blade.php
+++ b/resources/views/components/transfers/template/second.blade.php
@@ -68,7 +68,7 @@
     @stack('from_account_start')
     <table style="width: 100%; margin-top:35px;">
         <tbody>
-            @stack('from_account_id_start')
+            @stack('from_account_id_input_start')
             <tr>
                 <td class="border-bottom-1 border-top-1" style="width: 60%; padding: 15px 0 15px 0;">
                     <div class="mb-1 font-semibold" style="font-size: 14px; margin-bottom: 15px;">
@@ -152,7 +152,7 @@
                     @endif
                 </td>
             </tr>
-            @stack('from_account_id_end')
+            @stack('from_account_id_input_end')
         </tbody>
     </table>
     @stack('from_account_end')
@@ -160,7 +160,7 @@
     @stack('to_account_start')
     <table style="width: 100%; margin-top:15px;">
         <tbody>
-            @stack('to_account_id_start')
+            @stack('to_account_id_input_start')
             <tr>
                 <td style="width: 60%; padding: 0 0 15px 0;">
                     <div class="mb-1 font-semibold" style="font-size: 14px; margin-bottom: 15px;">
@@ -242,20 +242,21 @@
                         @stack('to_account_address_input_end')
                     </table>
                     @endif
+
+                    @stack('amount_input_start')
+                    {{-- The reason for adding the amount part here is because the amount style is broken in the view. --}}
+                    @stack('amount_input_end')
                 </td>
             </tr>
-            @stack('to_account_id_end')
+            @stack('to_account_id_input_end')
         </tbody>
     </table>
     @stack('to_account_end')
 
-    @stack('amount_start')
     <table style="text-align: right;">
-        @stack('amount_table_start')
         <tr>
             <td valign="center" style="width:80%; display:block; float:right;">
                 <table>
-                    @stack('amount_input_start')
                     <tr>
                         <td valign="center" class="font-semibold" style="padding:0; font-size: 14px;">
                             <span class="ml-2">
@@ -265,11 +266,8 @@
                             <x-money :amount="$transfer->expense_transaction->amount" :currency="$transfer->expense_transaction->currency_code" convert />
                         </td>
                     </tr>
-                    @stack('amount_input_end')
                 </table>
             </td>
         </tr>
-        @stack('amount_table_end')
     </table>
-    @stack('amount_end')
 </div>
diff --git a/resources/views/components/transfers/template/third.blade.php b/resources/views/components/transfers/template/third.blade.php
index e1034c8bd..323facb10 100644
--- a/resources/views/components/transfers/template/third.blade.php
+++ b/resources/views/components/transfers/template/third.blade.php
@@ -6,7 +6,7 @@
                     @stack('from_account_start')
                     <table>
                         <tbody>
-                            @stack('from_account_id_start')
+                            @stack('from_account_id_input_start')
                             <tr>
                                 <td style="padding:0;">
                                     <div class="mb-1 font-semibold" style="font-size: 14px; margin-bottom: 15px;">
@@ -90,7 +90,7 @@
                                     @endif
                                 </td>
                             </tr>
-                            @stack('from_account_id_end')
+                            @stack('from_account_id_input_end')
                         </tbody>
                     </table>
                     @stack('from_account_end')
@@ -100,7 +100,7 @@
                     @stack('to_account_start')
                     <table>
                         <tbody>
-                            @stack('to_account_id_start')
+                            @stack('to_account_id_input_start')
                             <tr>
                                 <td style="padding:0;">
                                     <div class="mb-1 font-semibold" style="font-size: 14px; margin-bottom: 15px;">
@@ -184,7 +184,7 @@
                                     @endif
                                 </td>
                             </tr>
-                            @stack('to_account_id_end')
+                            @stack('to_account_id_input_end')
                         </tbody>
                     </table>
                     @stack('to_account_end')
@@ -257,19 +257,20 @@
         </tr>
         @stack('description_input_end')
 
+        @stack('amount_input_start')
+        {{-- The reason for adding the amount part here is because the amount style is broken in the view. --}}
+        @stack('amount_input_end')
+
         <tr>
             <td></td>
         </tr>
     </table>
     @stack('details_end')
 
-    @stack('amount_start')
     <table style="text-align: right;">
-        @stack('amount_table_start')
         <tr>
             <td valign="center" style="width:80%; display:block; float:right;">
                 <table>
-                    @stack('amount_input_start')
                     <tr>
                         <td valign="center" class="font-semibold" style="width: 80%; padding:0; font-size: 14px;">
                             <span class="ml-2">
@@ -279,11 +280,8 @@
                             <x-money :amount="$transfer->expense_transaction->amount" :currency="$transfer->expense_transaction->currency_code" convert />
                         </td>
                     </tr>
-                    @stack('amount_input_end')
                 </table>
             </td>
         </tr>
-        @stack('amount_table_end')
     </table>
-    @stack('amount_end')
 </div>
diff --git a/resources/views/modules/item/show.blade.php b/resources/views/modules/item/show.blade.php
index 3896086ee..fcb7fe31f 100644
--- a/resources/views/modules/item/show.blade.php
+++ b/resources/views/modules/item/show.blade.php
@@ -98,7 +98,7 @@
                         </div>
 
                         @if (! in_array('onprime', $module->where_to_use))
-                            <div class="text-sm truncate line-clamp-1">
+                            <div class="text-sm line-clamp-1">
                                 {!! ! empty($module->sort_desc) ? $module->sort_desc : strip_tags($module->description) !!}
                             </div>
 
@@ -112,7 +112,7 @@
                                 </div>
                             @endif
                         @else
-                            <div class="text-sm truncate line-clamp-1">
+                            <div class="text-sm line-clamp-1">
                                 {!! ! empty($module->sort_desc) ? $module->sort_desc : strip_tags($module->description) !!}
                             </div>
 
diff --git a/resources/views/portal/invoices/signed.blade.php b/resources/views/portal/invoices/signed.blade.php
index 403d1d89d..c3e00e454 100644
--- a/resources/views/portal/invoices/signed.blade.php
+++ b/resources/views/portal/invoices/signed.blade.php
@@ -1,4 +1,4 @@
-<div class="w-full lg:max-w-6xl m-auto">
+<div class="w-full lg:max-w-6xl px-4 lg:px-0  m-auto">
     <x-layouts.signed>
         <x-slot name="title">
             {{ setting('invoice.title', trans_choice('general.invoices', 1)) . ': ' . $invoice->document_number }}
diff --git a/resources/views/reports/profit_loss/content/footer.blade.php b/resources/views/reports/profit_loss/content/footer.blade.php
index f58f632fa..a0527c971 100644
--- a/resources/views/reports/profit_loss/content/footer.blade.php
+++ b/resources/views/reports/profit_loss/content/footer.blade.php
@@ -1,5 +1,5 @@
-<div class="overflow-x-visible mb-8">
-    <table class="w-full rp-border-collapse">
+<div class="overflow-x-scroll large-overflow-unset mb-8">
+    <table class="w-full small-table-width  rp-border-collapse">
         <tbody>
             <tr>
                 <td class="{{ $class->column_name_width }} w-24 ltr:text-left rtl:text-right text-black-400 uppercase font-bold">
diff --git a/resources/views/reports/tax_summary/content/header.blade.php b/resources/views/reports/tax_summary/content/header.blade.php
index 34be3ec76..c52f75fad 100644
--- a/resources/views/reports/tax_summary/content/header.blade.php
+++ b/resources/views/reports/tax_summary/content/header.blade.php
@@ -1,5 +1,5 @@
-<div class="overflow-x-visible my-8">
-    <table class="w-full rp-border-collapse">
+<div class="overflow-x-scroll large-overflow-unset my-8">
+    <table class="w-full small-table-width rp-border-collapse">
         <thead>
             <tr>
                 <th class="{{ $class->column_name_width }} w-24 print-alignment">&nbsp;</th>
diff --git a/resources/views/settings/invoice/edit.blade.php b/resources/views/settings/invoice/edit.blade.php
index cc69d56ef..a4b249c6a 100644
--- a/resources/views/settings/invoice/edit.blade.php
+++ b/resources/views/settings/invoice/edit.blade.php
@@ -30,30 +30,39 @@
                     <x-slot name="body">
                         <div class="sm:col-span-2 rounded-lg cursor-pointer text-center py-2 px-2">
                             <label class="cursor-pointer">
-                                <div @click="form.template='default'">
+                                <div @click="form.template='default'" class="flex flex-col items-center">
                                     <img src="{{ asset('public/img/invoice_templates/default.png') }}" class="h-60 my-3" alt="Default" />
-                                    <input type="radio" name="template" value="default" v-model="form._template">
-                                    {{ trans('settings.invoice.default') }}
+
+                                    <div class="flex items-center space-x-2 rtl:space-x-reverse">
+                                        <input type="radio" name="template" value="default" v-model="form._template">
+                                        <span> {{ trans('settings.invoice.default') }} </span>
+                                    </div>
                                 </div>
                             </label>
                         </div>
 
                         <div class="sm:col-span-2 rounded-lg cursor-pointer text-center py-2 px-2">
                             <label class="cursor-pointer">
-                                <div @click="form.template='classic'">
+                                <div @click="form.template='classic'" class="flex flex-col items-center">
                                     <img src="{{ asset('public/img/invoice_templates/classic.png') }}" class="h-60 my-3" alt="Classic" />
-                                    <input type="radio" name="template" value="classic" v-model="form._template">
-                                    {{ trans('settings.invoice.classic') }}
+
+                                    <div class="flex items-center space-x-2 rtl:space-x-reverse">
+                                        <input type="radio" name="template" value="classic" v-model="form._template">
+                                        <span> {{ trans('settings.invoice.classic') }} </span>
+                                    </div>
                                 </div>
                             </label>
                         </div>
 
                         <div class="sm:col-span-2 rounded-lg cursor-pointer text-center py-2 px-2">
                             <label class="cursor-pointer">
-                                <div @click="form.template='modern'">
+                                <div @click="form.template='modern'" class="flex flex-col items-center">
                                     <img src="{{ asset('public/img/invoice_templates/modern.png') }}" class="h-60 my-3" alt="Modern" />
-                                    <input type="radio" name="template" value="modern" v-model="form._template">
-                                    {{ trans('settings.invoice.modern') }}
+
+                                    <div class="flex items-center space-x-2 rtl:space-x-reverse">
+                                        <input type="radio" name="template" value="modern" v-model="form._template">
+                                        <span> {{ trans('settings.invoice.modern') }} </span>
+                                    </div>
                                 </div>
                             </label>
                         </div>
diff --git a/safelist.txt b/safelist.txt
index a5d5f2780..504cd8b73 100644
--- a/safelist.txt
+++ b/safelist.txt
@@ -15,6 +15,9 @@ lg:relative
 lg:right-0
 lg:justify-around
 lg:space-x-16
+sm:ltr:right-4
+sm:rtl:left-4
+sm:w-500
 ltr:-right-1.5
 rtl:-left-1.5
 rtl:-scale-x-100
\ No newline at end of file