diff --git a/resources/assets/js/plugins/en.js b/resources/assets/js/plugins/en.js
index 64b09749..6bd34c4d 100644
--- a/resources/assets/js/plugins/en.js
+++ b/resources/assets/js/plugins/en.js
@@ -668,8 +668,13 @@ export default {
     },
     update_app: {
       title: 'Update App',
-      description: 'update app description',
-      update: 'Update'
+      description: 'You can easily update Crater by checking for a new update by clicking the button below',
+      check_update: 'Check for updates',
+      avail_update: 'New Update available',
+      next_version: 'Next version',
+      update: 'Update',
+      update_progress: 'Update in progress...',
+      progress_text: 'It will just take a few minutes. Please do not refresh the screen or close the window before the update finishes'
     }
   },
   wizard: {
diff --git a/resources/assets/js/views/settings/UpdateApp.vue b/resources/assets/js/views/settings/UpdateApp.vue
index 4c3183d2..787d066d 100644
--- a/resources/assets/js/views/settings/UpdateApp.vue
+++ b/resources/assets/js/views/settings/UpdateApp.vue
@@ -6,50 +6,89 @@
         <p class="page-sub-title">
           {{ $t('settings.update_app.description') }}
         </p>
-        <base-button size="large" icon="sync-alt" color="theme" @click="onUpdateApp">
-          {{ $t('settings.update_app.update') }}
+        <label class="input-label">Current version</label><br>
+        <label class="version">1.0.0</label>
+        <base-button :outline="true" size="large" color="theme" @click="checkUpdate">
+          <font-awesome-icon :class="{'update': isUpdateAvail}" style="margin-right: 5px;" icon="sync-alt" />
+          {{ $t('settings.update_app.check_update') }}
         </base-button>
-        <div v-if="isShowProgressBar" class="progress mt-4">
-          <div
-            :style="[{'width': progress+'%'}]"
-            class="progress-bar progress-bar-striped progress-bar-animated"
-            role="progressbar"
-            aria-valuenow="0"
-            aria-valuemin="0"
-            aria-valuemax="100"
-          />
+        <hr>
+        <div class="mt-4 content">
+          <h3 class="page-title">{{ $t('settings.update_app.avail_update') }}</h3>
+          <label class="input-label">{{ $t('settings.update_app.next_version') }}</label><br>
+          <label class="version">{{ updateData.version }}</label>
+          <p class="page-sub-title">
+            {{ description }}
+          </p>
+          <base-button size="large" color="theme" @click="onUpdateApp">
+            {{ $t('settings.update_app.update') }}
+          </base-button>
         </div>
+        <!-- <div>
+          <h3 class="page-title">{{ $t('settings.update_app.update_progress') }}</h3>
+          <p class="page-sub-title">
+            {{ $t('settings.update_app.progress_text') }}
+          </p>
+          <font-awesome-icon icon="spinner" class="fa-spin"/>
+        </div> -->
       </div>
     </div>
   </div>
 </template>
 <script>
-
+import { mapActions, mapGetters } from 'vuex'
 export default {
   data () {
     return {
       isShowProgressBar: false,
+      isUpdateAvail: false,
       progress: 10,
-      interval: null
+      interval: null,
+      description: '',
+      updateData: {
+        isMinor: Boolean,
+        installed: '',
+        version: ''
+      }
     }
   },
+  computed: {
+  },
   watch: {
   },
   mounted () {
   },
   methods: {
-    onUpdateApp () {
-      this.isShowProgressBar = true
-      this.interval = setInterval(() => {
-        if (this.progress >= 100) {
-          clearInterval(this.interval)
-          setTimeout(() => {
-            this.isShowProgressBar = false
-          }, 1000)
-        }
-        this.progress += 10
-      }, 250)
+    async onUpdateApp () {
+      const data = this.updateData
+      let response = await axios.post('/api/update', data)
+      console.log(response.data)
+    },
+    async checkUpdate () {
+      let response = await axios.get('/api/check/update')
+      console.log(response.data)
+      if (response.data) {
+        this.updateData.isMinor = response.data.is_minor
+        this.updateData.version = response.data.version.version
+        this.updateData.description = response.data.version.description
+      }
     }
   }
 }
 </script>
+
+<style scoped>
+.update {
+  transform: rotate(360deg);
+  animation: rotating 1s linear infinite;
+}
+
+@keyframes rotating {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/resources/assets/sass/pages/settings.scss b/resources/assets/sass/pages/settings.scss
index e6ece508..3e451271 100644
--- a/resources/assets/sass/pages/settings.scss
+++ b/resources/assets/sass/pages/settings.scss
@@ -150,6 +150,15 @@
             overflow: hidden;
         }
     }
+
+    .version {
+        background: #EAF1FB;
+        border: 1px solid #EAF1FB;
+        box-sizing: border-box;
+        border-radius: 5px;
+        padding: 10px;
+        margin-bottom: 15px;
+    }
 }
 
 @media(max-width: $x-small-breakpoint ) {
diff --git a/resources/views/app/pdf/estimate/estimate1.blade.php b/resources/views/app/pdf/estimate/estimate1.blade.php
index 716905dc..2be69f21 100644
--- a/resources/views/app/pdf/estimate/estimate1.blade.php
+++ b/resources/views/app/pdf/estimate/estimate1.blade.php
@@ -35,7 +35,7 @@
             width: 100%;
             height: 90px;
             left: 0px;
-            top: 0px;
+            top: -50px;
         }
 
         .header-logo {
@@ -69,10 +69,15 @@
             color: rgba(0, 0, 0, 0.5);
         }
 
+        @page {
+            margin-top: 60px !important;
+        }
+
         .wrapper {
            display: block;
-           padding-top: 60px;
-           padding-bottom: 60px;
+           margin-top: 0px;
+           padding-top: 16px;
+           padding-bottom: 20px;
         }
 
         .address {
@@ -343,6 +348,7 @@
             margin-left: 30px;
             width: 442px;
             text-align: left;
+            page-break-inside: avoid;
         }
 
         .notes-label {
@@ -375,8 +381,8 @@
                 </td>
             </tr>
         </table>
+        <hr class="header-line" style="border: 0.620315px solid #E8E8E8;" />
     </div>
-    <hr class="header-line" />
     <div class="wrapper">
         <div class="address">
             <div class="company">
@@ -413,7 +419,9 @@
             </div>
             <div style="clear: both;"></div>
         </div>
-        @include('app.pdf.estimate.partials.table')
+        <div style="position:relative">
+            @include('app.pdf.estimate.partials.table')
+        </div>
         @include('app.pdf.estimate.partials.notes')
     </div>
 </body>
diff --git a/resources/views/app/pdf/estimate/estimate2.blade.php b/resources/views/app/pdf/estimate/estimate2.blade.php
index e0098e38..895cb3ad 100644
--- a/resources/views/app/pdf/estimate/estimate2.blade.php
+++ b/resources/views/app/pdf/estimate/estimate2.blade.php
@@ -23,15 +23,17 @@
             display:inline-block;
             width:30%;
         }
+
+        @page {
+            margin-top: 60px !important;
+        }
         .header-table {
             background: #817AE3;
             position: absolute;
             width: 100%;
             height: 141px;
             left: 0px;
-            top: 0px;
-
-
+            top: -60px;
         }
         .header-logo {
             position: absolute;
@@ -73,8 +75,8 @@
 
         .wrapper {
            display: block;
-           padding-top: 110px;
-           padding-bottom: 60px;
+           margin-top: 60px;
+           padding-bottom: 20px;
         }
 
         .address {
@@ -371,6 +373,7 @@
             margin-left: 30px;
             width: 442px;
             text-align: left;
+            page-break-inside: avoid;
         }
 
         .notes-label {
diff --git a/resources/views/app/pdf/estimate/estimate3.blade.php b/resources/views/app/pdf/estimate/estimate3.blade.php
index fddcba17..329bef9c 100644
--- a/resources/views/app/pdf/estimate/estimate3.blade.php
+++ b/resources/views/app/pdf/estimate/estimate3.blade.php
@@ -19,7 +19,7 @@
         hr {
             color:rgba(0, 0, 0, 0.2);
             position: absolute;
-            top: 140px;
+            top: 80px;
             left: 0px;
             right: -70px;
             width: 100%;
@@ -37,9 +37,7 @@
             width: 100%;
             height: 150px;
             left: 0px;
-            top: 0px;
-
-
+            top: -60px;
         }
         .header-logo {
             position: absolute;
@@ -77,10 +75,14 @@
             color: rgba(0, 0, 0, 0.5);
         }
 
+        @page {
+            margin-top: 60px !important;
+        }
+
         .wrapper {
            display: block;
-           padding-top: 110px;
-           padding-bottom: 60px;
+           padding-top: 50px;
+           padding-bottom: 20px;
         }
 
         .address {
@@ -379,6 +381,7 @@
             margin-left: 30px;
             width: 442px;
             text-align: left;
+            page-break-inside: avoid;
         }
 
         .notes-label {
@@ -416,7 +419,7 @@
             </tr>
         </table>
     </div>
-    <hr>
+    <hr style="border: 0.620315px solid #E8E8E8;">
     <div class="wrapper">
         <div class="address">
             <div class="bill-add">
diff --git a/resources/views/app/pdf/invoice/invoice1.blade.php b/resources/views/app/pdf/invoice/invoice1.blade.php
index 635a5c0e..4b984bfb 100644
--- a/resources/views/app/pdf/invoice/invoice1.blade.php
+++ b/resources/views/app/pdf/invoice/invoice1.blade.php
@@ -70,10 +70,15 @@
             color: rgba(0, 0, 0, 0.5);
         }
 
+        @page {
+            margin-top: 60px !important;
+        }
+
         .wrapper {
            display: block;
+           margin-top: 0px;
            padding-top: 16px;
-           padding-bottom: 60px;
+           padding-bottom: 20px;
         }
 
         .address {
@@ -350,6 +355,7 @@
             margin-left: 30px;
             width: 442px;
             text-align: left;
+            page-break-inside: avoid;
         }
 
         .notes-label {
diff --git a/resources/views/app/pdf/invoice/invoice2.blade.php b/resources/views/app/pdf/invoice/invoice2.blade.php
index f7784c61..5f317bdc 100644
--- a/resources/views/app/pdf/invoice/invoice2.blade.php
+++ b/resources/views/app/pdf/invoice/invoice2.blade.php
@@ -23,15 +23,16 @@
             display:inline-block;
             width:30%;
         }
+        @page {
+            margin-top: 60px !important;
+        }
         .header-table {
             background: #817AE3;
             position: absolute;
             width: 100%;
             height: 141px;
             left: 0px;
-            top: 0px;
-
-
+            top: -60px;
         }
         .header-logo {
             position: absolute;
@@ -73,8 +74,8 @@
 
         .wrapper {
            display: block;
-           padding-top: 110px;
-           padding-bottom: 60px;
+           margin-top: 60px;
+           padding-bottom: 20px;
         }
 
         .address {
@@ -381,6 +382,7 @@
             margin-left: 30px;
             width: 442px;
             text-align: left;
+            page-break-inside: avoid;
         }
 
         .notes-label {
diff --git a/resources/views/app/pdf/invoice/invoice3.blade.php b/resources/views/app/pdf/invoice/invoice3.blade.php
index cc079eb0..7c75efc1 100644
--- a/resources/views/app/pdf/invoice/invoice3.blade.php
+++ b/resources/views/app/pdf/invoice/invoice3.blade.php
@@ -19,7 +19,7 @@
         hr {
             color:rgba(0, 0, 0, 0.2);
             position: absolute;
-            top: 140px;
+            top: 80px;
             left: 0px;
             right: -70px;
             width: 100%;
@@ -37,9 +37,7 @@
             width: 100%;
             height: 150px;
             left: 0px;
-            top: 0px;
-
-
+            top: -60px;
         }
         .header-logo {
             position: absolute;
@@ -77,10 +75,13 @@
             color: rgba(0, 0, 0, 0.5);
         }
 
+        @page {
+            margin-top: 60px !important;
+        }
         .wrapper {
            display: block;
-           padding-top: 110px;
-           padding-bottom: 60px;
+           padding-top: 50px;
+           padding-bottom: 20px;
         }
 
         .address {
@@ -390,6 +391,7 @@
             margin-left: 30px;
             width: 442px;
             text-align: left;
+            page-break-inside: avoid;
         }
 
         .notes-label {
@@ -427,7 +429,7 @@
             </tr>
         </table>
     </div>
-    <hr>
+    <hr style="border: 0.620315px solid #E8E8E8;">
     <div class="wrapper">
         <div class="address">
             <div class="bill-add">