diff --git a/public/css/app.css b/public/css/app.css
index 15f73f653..7ccc52220 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -50831,6 +50831,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;
   }
@@ -50887,14 +50896,14 @@ body{
     margin-top: 0.5rem;
   }
 
-  .sm\:mt-0{
-    margin-top: 0px;
-  }
-
   .sm\:mb-5{
     margin-bottom: 1.25rem;
   }
 
+  .sm\:mt-0{
+    margin-top: 0px;
+  }
+
   .sm\:ml-8{
     margin-left: 2rem;
   }
@@ -50949,6 +50958,18 @@ body{
     width: 33.333333%;
   }
 
+  .sm\:w-60{
+    width: 15rem;
+  }
+
+  .sm\:w-auto{
+    width: auto;
+  }
+
+  .sm\:w-96{
+    width: 24rem;
+  }
+
   .sm\:flex-1{
     -webkit-box-flex: 1;
         -ms-flex: 1 1 0%;
@@ -51028,6 +51049,12 @@ body{
     margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
+  .sm\:space-y-8 > :not([hidden]) ~ :not([hidden]){
+    --tw-space-y-reverse: 0;
+    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+  }
+
   .sm\:divide-x-2 > :not([hidden]) ~ :not([hidden]){
     --tw-divide-x-reverse: 0;
     border-right-width: calc(2px * var(--tw-divide-x-reverse));
@@ -51039,6 +51066,11 @@ body{
     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;
@@ -51340,6 +51372,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;
@@ -51435,6 +51473,11 @@ body{
     padding-bottom: 0px;
   }
 
+    .lg\:px-0{
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
     .lg\:pl-24{
     padding-left: 6rem;
   }
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/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/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/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/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>