diff --git a/index.html b/index.html
index 5a87adc..5799e69 100644
--- a/index.html
+++ b/index.html
@@ -43,7 +43,7 @@
                 <td>×</td>
                 <td><input v-model="n" type="number" min="1"></td>
             </tr>
-            <tr>
+            <tr v-if="!incomplete">
                 <td>Box size:</td>
                 <td><input id="bw" v-model="bw" v-bind:disabled="(finishedH && !bw) || fbw" type="number" min="0.1"></td>
                 <td>×</td>
@@ -51,13 +51,13 @@
                 <td><small>cm</small></td>
                 <td><span><input v-model="ratio" type="checkbox">Use ratio</span></td>
             </tr>
-            <tr v-if="ratio">
+            <tr v-if="ratio && !incomplete">
                 <td>Box ratio:</td>
                 <td><input v-model="rw" type="number" min="0.1" step="0.1"></td>
                 <td>/</td>
                 <td><input v-model="rh" type="number" min="0.1" step="0.1"></td>
             </tr>
-            <tr>
+            <tr v-if="!incomplete">
                 <td>Box margin:</td>
                 <td><input id="mh" v-model="mh" v-bind:disabled="finishedH && !mh" type="number" min="0.1" step="0.1"></td>
                 <td><small>cm</small></td>
@@ -65,7 +65,7 @@
                 <td><small>cm</small></td>
                 <td><span><input v-model="padding" type="checkbox">Sheet padding</span></td>
             </tr>
-            <tr v-if="padding">
+            <tr v-if="padding && !incomplete">
                 <td>Sheet padding:</td>
                 <td><input id="ph" v-model="ph" v-bind:disabled="finishedH && !ph" type="number" min="0.1"></td>
                 <td><small>cm</small></td>
@@ -78,6 +78,8 @@
             </tr>
         </table>
         <br>
+        <canvas id="preview"></canvas>
+        <br>
         <small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a href="" target="_blank">Github Repository</a> - 2019</small>
     </main>
 </body>
diff --git a/main.js b/main.js
index 5198af1..d8cd4ab 100644
--- a/main.js
+++ b/main.js
@@ -67,7 +67,7 @@ let app = {
   data: {
     //inputs
     sw: 21, sh: 29.7, //sheet size
-    m: 2, n: 3, //boxes
+    m: undefined, n: undefined, //boxes
     bw: undefined, bh: undefined, //box size
     rw: undefined, rh: undefined, //box ratio
     mh: undefined, mv: undefined, //margin
@@ -75,6 +75,7 @@ let app = {
     sheet: 5,
     ratio: false,
     padding: false,
+    incomplete: false,
     finishedH: false, finishedV: false, //finished h
     fbw: false, fbh: false, //forced width or height
     sheets: [
@@ -87,94 +88,101 @@ let app = {
         this.sw = this.sheets[v].w;
         this.sh = this.sheets[v].h;
       }
+      this.refreshValues();
     },
     padding: function (v) {
       if (!v && this.bw && this.mh)
         this.mh = undefined;
       if (!v && this.bh && this.mv)
         this.mv = undefined;
-      this.checkFinished();
+      this.refreshValues();
     },
-    ratio: 'checkFinished',
-    bw: 'checkFinished',
-    bh: 'checkFinished',
-    rw: 'checkFinished',
-    rh: 'checkFinished',
-    mh: 'checkFinished',
-    mv: 'checkFinished',
-    ph: 'checkFinished',
-    pv: 'checkFinished',
+    ratio: 'refreshValues',
+    sw: 'refreshValues',
+    sh: 'refreshValues',
+    m: 'refreshValues',
+    n: 'refreshValues',
+    bw: 'refreshValues',
+    bh: 'refreshValues',
+    rw: 'refreshValues',
+    rh: 'refreshValues',
+    mh: 'refreshValues',
+    mv: 'refreshValues',
+    ph: 'refreshValues',
+    pv: 'refreshValues',
   },
   methods: {
-    checkFinished: function () {
+    refreshValues: function () {
       const self = this;
       this.finishedH = false;
       this.finishedV = false;
+      this.incomplete = false;
       this.fbw = false;
       this.fbh = false;
-      if (!this.sw || !this.sh || !this.m || !this.n) return;
-      if (this.ratio && this.rw && this.rh) {
-        if (this.bh && !this.fbw) {
-          this.fbw = true;
-          this.bw = utils.round(this.bh * this.rw / this.rh, 2);
-        }
-        if (this.bw && !this.fbh) {
-          this.fbh = true;
-          this.bh = utils.round(this.bw * this.rh / this.rw, 2);
-        }
-      }
-      if (this.padding) {
-        const uh = !this.bw + !this.mh + !this.ph;
-        if (uh <= 1) {
-          this.finishedH = true;
-          if (!this.bw) setTimeout(() => {
-            self.finalValue('bw', (this.sw - this.ph * 2 - this.mh * (this.m - 1)) / this.m);
-          });
-          else if (!this.mh) setTimeout(() => {
-            self.finalValue('mh', (this.sw - this.ph * 2 - this.bw * this.m) / (this.m - 1));
-          });
-          else if (!this.ph) setTimeout(() => {
-            self.finalValue('ph', (this.sw - this.mh * (this.m - 1) - this.bw * this.m) / 2);
-          });
-        }
-        const uv = !this.bh + !this.mv + !this.pv;
-        if (uv <= 1) {
-          this.finishedV = true;
-          if (!this.bh) setTimeout(() => {
-            self.finalValue('bh', (this.sh - this.pv * 2 - this.mv * (this.n - 1)) / this.n);
-          });
-          else if (!this.mv) setTimeout(() => {
-            self.finalValue('mv', (this.sw - this.pv * 2 - this.bh * this.n) / (this.n - 1));
-          });
-          else if (!this.pv) setTimeout(() => {
-            self.finalValue('pv', (this.sw - this.mv * (this.m - 1) - this.bh * this.n) / 2);
-          });
-        }
+      if (!this.sw || !this.sh || !this.m || !this.n) {
+        this.incomplete = true;
       } else {
-        const uh = !this.bw + !this.mh;
-        if (uh <= 1) {
-          this.finishedH = true;
-          if (!this.bw) setTimeout(() => {
-            self.finalValue('bw', (this.sw - this.mh * (this.m + 1)) / this.m);
-          });
-          else if (!this.mh) setTimeout(() => {
-            self.finalValue('mh', (this.sw - this.bw * this.m) / (this.m + 1));
-          });
+        if (this.ratio && this.rw && this.rh) {
+          if (this.bh && !this.fbw) {
+            this.fbw = true;
+            this.bw = utils.round(this.bh * this.rw / this.rh, 2);
+          }
+          if (this.bw && !this.fbh) {
+            this.fbh = true;
+            this.bh = utils.round(this.bw * this.rh / this.rw, 2);
+          }
         }
-        const uv = !this.bh + !this.mv;
-        if (uv <= 1) {
-          this.finishedV = true;
-          if (!this.bh) setTimeout(() => {
-            self.finalValue('bh', (this.sh - this.mv * (this.n + 1)) / this.n);
-          });
-          else if (!this.mv) setTimeout(() => {
-            self.finalValue('mv', (this.sw - this.bh * this.n) / (this.n + 1));
-          });
+        if (this.padding) {
+          const uh = !this.bw + !this.mh + !this.ph;
+          if (uh <= 1) {
+            this.finishedH = true;
+            if (!this.bw) setTimeout(() => {
+              self.finalValue('bw', (this.sw - this.ph * 2 - this.mh * (this.m - 1)) / this.m);
+            });
+            else if (!this.mh) setTimeout(() => {
+              self.finalValue('mh', (this.sw - this.ph * 2 - this.bw * this.m) / (this.m - 1));
+            });
+            else if (!this.ph) setTimeout(() => {
+              self.finalValue('ph', (this.sw - this.mh * (this.m - 1) - this.bw * this.m) / 2);
+            });
+          }
+          const uv = !this.bh + !this.mv + !this.pv;
+          if (uv <= 1) {
+            this.finishedV = true;
+            if (!this.bh) setTimeout(() => {
+              self.finalValue('bh', (this.sh - this.pv * 2 - this.mv * (this.n - 1)) / this.n);
+            });
+            else if (!this.mv) setTimeout(() => {
+              self.finalValue('mv', (this.sw - this.pv * 2 - this.bh * this.n) / (this.n - 1));
+            });
+            else if (!this.pv) setTimeout(() => {
+              self.finalValue('pv', (this.sw - this.mv * (this.m - 1) - this.bh * this.n) / 2);
+            });
+          }
+        } else {
+          const uh = !this.bw + !this.mh;
+          if (uh <= 1) {
+            this.finishedH = true;
+            if (!this.bw) setTimeout(() => {
+              self.finalValue('bw', (this.sw - this.mh * (this.m + 1)) / this.m);
+            });
+            else if (!this.mh) setTimeout(() => {
+              self.finalValue('mh', (this.sw - this.bw * this.m) / (this.m + 1));
+            });
+          }
+          const uv = !this.bh + !this.mv;
+          if (uv <= 1) {
+            this.finishedV = true;
+            if (!this.bh) setTimeout(() => {
+              self.finalValue('bh', (this.sh - this.mv * (this.n + 1)) / this.n);
+            });
+            else if (!this.mv) setTimeout(() => {
+              self.finalValue('mv', (this.sw - this.bh * this.n) / (this.n + 1));
+            });
+          }
         }
       }
-      if(this.finishedH && this.finishedV){
-        //TODO draw
-      }
+      this.redraw();
     },
     finalValue: function (n, v) {
       v = utils.round(v, 2);
@@ -186,31 +194,57 @@ let app = {
       ['bw', 'bh', 'rw', 'rh', 'mh', 'mv', 'ph', 'pv'].forEach(name => {
         Vue.set(self, name, undefined);
       });
+    },
+    redraw: function () {
+      if (this.sw && this.sh) {
+        const maxWidth = 0.8 * this.$el.getBoundingClientRect().width;
+        let height = this.previewMaxHeight;
+        let width = height * this.sw / this.sh;
+        if (width > maxWidth) {
+          width = maxWidth;
+          height = width * this.sh / this.sw;
+        }
+        this.preview.setAttribute('width', width);
+        this.preview.style.width = `${width}px`;
+        this.preview.setAttribute('height', height);
+        this.preview.style.height = `${height}px`;
+
+        const ctx = this.preview.getContext('2d');
+        ctx.clearRect(0,0, width, height);
+
+        ctx.lineWidth = 4;
+        ctx.strokeStyle = '#424242';
+        ctx.strokeRect(0, 0, width, height);
+      } else {
+        this.preview.width = 1;
+        this.preview.height = 1;
+      }
     }
   },
   'mounted': function () {
     const self = this;
+    this.preview = document.getElementById('preview');
     data.papers.forEach(s => {
       self.sheets.push({
         title: `${s.title} (${s.w}×${s.h}cm)`,
-        w: s.w,
-        h: s.h
+        w: s.w, h: s.h
       });
     });
     data.papers.forEach(s => {
       self.sheets.push({
         title: `${s.title} landscape (${s.h}×${s.w}cm)`,
-        w: s.h,
-        h: s.w
+        w: s.h, h: s.w
       });
     });
     console.log('app mounted');
     setTimeout(() => {
       self.$el.setAttribute('style', '');
+      self.previewMaxHeight = this.preview.getBoundingClientRect().height;
+      self.refreshValues();
     });
   }
 };
 
 window.onload = () => {
   app = new Vue(app);
-};
+};
\ No newline at end of file
diff --git a/style.css b/style.css
index 0937830..112fca1 100644
--- a/style.css
+++ b/style.css
@@ -53,7 +53,7 @@ td:nth-child(2), td:nth-child(4) {
 }
 
 td:nth-child(3), td:nth-child(5) {
-    width: 1.1rem;
+    width: 1.8rem;
 }
 
 td:nth-child(6), td[colspan="5"]+td {
@@ -66,6 +66,12 @@ td[colspan="5"]{
     text-align: center;
 }
 
+canvas{
+    display:block;
+    margin:auto;
+    height:20rem;
+}
+
 @media only screen and (min-width: 768px) {
     main {
         max-width: 42rem;