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..a6bd26e19 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -2051,6 +2051,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 +2333,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 +2541,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 +2729,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 +2913,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 +3101,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 +3149,6 @@ button, input, optgroup, select, textarea{
   top: -100%;
   bottom: -100%;
 }
-.inset-y-1\/2{
-  top: 50%;
-  bottom: 50%;
-}
 .top-0{
   top: 0px;
 }
@@ -3227,6 +3251,9 @@ button, input, optgroup, select, textarea{
 .top-96{
   top: 24rem;
 }
+.top-500{
+  top: 500px;
+}
 .top-auto{
   top: auto;
 }
@@ -3365,6 +3392,9 @@ button, input, optgroup, select, textarea{
 .-top-96{
   top: -24rem;
 }
+.-top-500{
+  top: -500px;
+}
 .-top-px{
   top: -1px;
 }
@@ -3500,6 +3530,9 @@ button, input, optgroup, select, textarea{
 .right-96{
   right: 24rem;
 }
+.right-500{
+  right: 500px;
+}
 .right-auto{
   right: auto;
 }
@@ -3656,6 +3689,9 @@ button, input, optgroup, select, textarea{
 .-right-96{
   right: -24rem;
 }
+.-right-500{
+  right: -500px;
+}
 .-right-px{
   right: -1px;
 }
@@ -3791,6 +3827,9 @@ button, input, optgroup, select, textarea{
 .bottom-96{
   bottom: 24rem;
 }
+.bottom-500{
+  bottom: 500px;
+}
 .bottom-auto{
   bottom: auto;
 }
@@ -3929,6 +3968,9 @@ button, input, optgroup, select, textarea{
 .-bottom-96{
   bottom: -24rem;
 }
+.-bottom-500{
+  bottom: -500px;
+}
 .-bottom-px{
   bottom: -1px;
 }
@@ -4064,6 +4106,9 @@ button, input, optgroup, select, textarea{
 .left-96{
   left: 24rem;
 }
+.left-500{
+  left: 500px;
+}
 .left-auto{
   left: auto;
 }
@@ -4220,6 +4265,9 @@ button, input, optgroup, select, textarea{
 .-left-96{
   left: -24rem;
 }
+.-left-500{
+  left: -500px;
+}
 .-left-px{
   left: -1px;
 }
@@ -4775,6 +4823,9 @@ button, input, optgroup, select, textarea{
 .m-96{
   margin: 24rem;
 }
+.m-500{
+  margin: 500px;
+}
 .m-auto{
   margin: auto;
 }
@@ -4913,6 +4964,9 @@ button, input, optgroup, select, textarea{
 .-m-96{
   margin: -24rem;
 }
+.-m-500{
+  margin: -500px;
+}
 .-m-px{
   margin: -1px;
 }
@@ -5082,6 +5136,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 +5324,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 +5508,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 +5696,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 +5846,9 @@ button, input, optgroup, select, textarea{
 .mt-96{
   margin-top: 24rem;
 }
+.mt-500{
+  margin-top: 500px;
+}
 .mt-auto{
   margin-top: auto;
 }
@@ -5914,6 +5987,9 @@ button, input, optgroup, select, textarea{
 .-mt-96{
   margin-top: -24rem;
 }
+.-mt-500{
+  margin-top: -500px;
+}
 .-mt-px{
   margin-top: -1px;
 }
@@ -6049,6 +6125,9 @@ button, input, optgroup, select, textarea{
 .mr-96{
   margin-right: 24rem;
 }
+.mr-500{
+  margin-right: 500px;
+}
 .mr-auto{
   margin-right: auto;
 }
@@ -6187,6 +6266,9 @@ button, input, optgroup, select, textarea{
 .-mr-96{
   margin-right: -24rem;
 }
+.-mr-500{
+  margin-right: -500px;
+}
 .-mr-px{
   margin-right: -1px;
 }
@@ -6322,6 +6404,9 @@ button, input, optgroup, select, textarea{
 .mb-96{
   margin-bottom: 24rem;
 }
+.mb-500{
+  margin-bottom: 500px;
+}
 .mb-auto{
   margin-bottom: auto;
 }
@@ -6460,6 +6545,9 @@ button, input, optgroup, select, textarea{
 .-mb-96{
   margin-bottom: -24rem;
 }
+.-mb-500{
+  margin-bottom: -500px;
+}
 .-mb-px{
   margin-bottom: -1px;
 }
@@ -6595,6 +6683,9 @@ button, input, optgroup, select, textarea{
 .ml-96{
   margin-left: 24rem;
 }
+.ml-500{
+  margin-left: 500px;
+}
 .ml-auto{
   margin-left: auto;
 }
@@ -6733,6 +6824,9 @@ button, input, optgroup, select, textarea{
 .-ml-96{
   margin-left: -24rem;
 }
+.-ml-500{
+  margin-left: -500px;
+}
 .-ml-px{
   margin-left: -1px;
 }
@@ -6964,6 +7058,9 @@ button, input, optgroup, select, textarea{
 .h-96{
   height: 24rem;
 }
+.h-500{
+  height: 500px;
+}
 .h-auto{
   height: auto;
 }
@@ -7123,6 +7220,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 +7400,9 @@ button, input, optgroup, select, textarea{
 .w-96{
   width: 24rem;
 }
+.w-500{
+  width: 500px;
+}
 .w-auto{
   width: auto;
 }
@@ -7354,30 +7457,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 +7790,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 +8024,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 +8215,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 +8395,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 +8645,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 +8875,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 +9105,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 +9335,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 +10634,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 +10769,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 +10938,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 +11118,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 +11298,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 +11478,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 +11624,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 +11759,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 +11894,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 +12029,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 +12164,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 +12299,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 +12434,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 +12569,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 +12704,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 +12873,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 +13053,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 +13199,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 +13334,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 +13469,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 +13604,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 +14259,9 @@ button, input, optgroup, select, textarea{
 .gap-96{
   gap: 24rem;
 }
+.gap-500{
+  gap: 500px;
+}
 .gap-px{
   gap: 1px;
 }
@@ -14250,6 +14462,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 +14619,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 +14822,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 +15047,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 +15272,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 +15497,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 +31755,9 @@ button, input, optgroup, select, textarea{
 .p-96{
   padding: 24rem;
 }
+.p-500{
+  padding: 500px;
+}
 .p-px{
   padding: 1px;
 }
@@ -31681,6 +31924,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 +32104,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 +32250,9 @@ button, input, optgroup, select, textarea{
 .pt-96{
   padding-top: 24rem;
 }
+.pt-500{
+  padding-top: 500px;
+}
 .pt-px{
   padding-top: 1px;
 }
@@ -32131,6 +32385,9 @@ button, input, optgroup, select, textarea{
 .pr-96{
   padding-right: 24rem;
 }
+.pr-500{
+  padding-right: 500px;
+}
 .pr-px{
   padding-right: 1px;
 }
@@ -32263,6 +32520,9 @@ button, input, optgroup, select, textarea{
 .pb-96{
   padding-bottom: 24rem;
 }
+.pb-500{
+  padding-bottom: 500px;
+}
 .pb-px{
   padding-bottom: 1px;
 }
@@ -32395,6 +32655,9 @@ button, input, optgroup, select, textarea{
 .pl-96{
   padding-left: 24rem;
 }
+.pl-500{
+  padding-left: 500px;
+}
 .pl-px{
   padding-left: 1px;
 }
@@ -32545,6 +32808,9 @@ button, input, optgroup, select, textarea{
 .indent-96{
   text-indent: 24rem;
 }
+.indent-500{
+  text-indent: 500px;
+}
 .indent-px{
   text-indent: 1px;
 }
@@ -32677,6 +32943,9 @@ button, input, optgroup, select, textarea{
 .-indent-96{
   text-indent: -24rem;
 }
+.-indent-500{
+  text-indent: -500px;
+}
 .-indent-px{
   text-indent: -1px;
 }
@@ -48007,10 +48276,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 +48404,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;
@@ -48868,6 +49156,10 @@ body{
   right: 24rem;
 }
 
+[dir="ltr"] .ltr\:right-500{
+  right: 500px;
+}
+
 [dir="ltr"] .ltr\:right-auto{
   right: auto;
 }
@@ -49076,6 +49368,10 @@ body{
   left: 24rem;
 }
 
+[dir="ltr"] .ltr\:left-500{
+  left: 500px;
+}
+
 [dir="ltr"] .ltr\:left-auto{
   left: auto;
 }
@@ -49308,6 +49604,10 @@ body{
   margin: 24rem;
 }
 
+[dir="ltr"] .ltr\:m-500{
+  margin: 500px;
+}
+
 [dir="ltr"] .ltr\:m-auto{
   margin: auto;
 }
@@ -49562,6 +49862,10 @@ body{
   padding: 24rem;
 }
 
+[dir="ltr"] .ltr\:p-500{
+  padding: 500px;
+}
+
 [dir="ltr"] .ltr\:p-px{
   padding: 1px;
 }
@@ -49791,6 +50095,10 @@ body{
   right: 24rem;
 }
 
+[dir="rtl"] .rtl\:right-500{
+  right: 500px;
+}
+
 [dir="rtl"] .rtl\:right-auto{
   right: auto;
 }
@@ -49999,6 +50307,10 @@ body{
   left: 24rem;
 }
 
+[dir="rtl"] .rtl\:left-500{
+  left: 500px;
+}
+
 [dir="rtl"] .rtl\:left-auto{
   left: auto;
 }
@@ -50235,6 +50547,10 @@ body{
   margin: 24rem;
 }
 
+[dir="rtl"] .rtl\:m-500{
+  margin: 500px;
+}
+
 [dir="rtl"] .rtl\:m-auto{
   margin: auto;
 }
@@ -50499,6 +50815,10 @@ body{
   padding: 24rem;
 }
 
+[dir="rtl"] .rtl\:p-500{
+  padding: 500px;
+}
+
 [dir="rtl"] .rtl\:p-px{
   padding: 1px;
 }
@@ -50589,6 +50909,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 +50954,10 @@ body{
     grid-row: span 3 / span 3;
   }
 
+  .sm\:float-right{
+    float: right;
+  }
+
   .sm\:mt-12{
     margin-top: 3rem;
   }
@@ -50637,18 +50970,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 +51004,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 +51036,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 +51133,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 +51193,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 +51286,10 @@ body{
     height: 12rem;
   }
 
+  .lg\:h-28{
+    height: 7rem;
+  }
+
   .lg\:h-60{
     height: 15rem;
   }
@@ -51073,6 +51456,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 +51552,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 +51611,10 @@ body{
     line-height: 1.75rem;
   }
 
+    [dir="ltr"] .ltr\:lg\:right-0{
+    right: 0px;
+  }
+
     [dir="ltr"] .lg\:ltr\:right-0{
     right: 0px;
   }
@@ -51237,6 +51635,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..9d9614afc 100644
--- a/resources/assets/sass/app.css
+++ b/resources/assets/sass/app.css
@@ -480,9 +480,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 +597,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/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..109c50888 100644
--- a/resources/views/components/documents/template/classic.blade.php
+++ b/resources/views/components/documents/template/classic.blade.php
@@ -93,7 +93,7 @@
 
                             <br>
 
-                            {{ $document->document_number }}
+                            <p class="classic-invoice"> {{ $document->document_number }} </p>
                         </div>
                     @endif
                     @stack('invoice_number_input_end')
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/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/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/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/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