diff --git a/index.html b/index.html
index 508412d..c61c1aa 100644
--- a/index.html
+++ b/index.html
@@ -24,9 +24,11 @@
             <tr></tr>
             <tr v-bind:class="{focused: focused=='sw'||focused=='sh'||focused=='sheet'}">
                 <td>Sheet Size:</td>
-                <td><input @focus="setFocus('sw')" @blur="resetFocus()" v-model="sw" v-bind:disabled="sheet>0" type="number" min="1" step="0.1"></td>
+                <td><input @focus="setFocus('sw')" @blur="resetFocus()" v-model="sw" v-bind:disabled="sheet>0"
+                           type="number" min="1" step="0.1"></td>
                 <td>×</td>
-                <td><input @focus="setFocus('sh')" @blur="resetFocus()" v-model="sh" v-bind:disabled="sheet>0" type="number" min="1" step="0.1"></td>
+                <td><input @focus="setFocus('sh')" @blur="resetFocus()" v-model="sh" v-bind:disabled="sheet>0"
+                           type="number" min="1" step="0.1"></td>
                 <td><small>cm</small></td>
                 <td>
                     <select v-model="sheet" @focus="setFocus('sheet')" @blur="resetFocus()">
@@ -44,19 +46,23 @@
             </tr>
             <tr v-bind:class="{focused: focused=='bw'||focused=='bh'}" v-if="!incomplete">
                 <td>Box size:</td>
-                <td><input @focus="setFocus('bw')" @blur="resetFocus()" id="bw" v-model="bw" v-bind:disabled="(finishedH && !bw) || fbw"
+                <td><input @focus="setFocus('bw')" @blur="resetFocus()" id="bw" v-model="bw"
+                           v-bind:disabled="(finishedH && !bw) || fbw"
                            type="number" min="0.1" step="0.1"></td>
                 <td>×</td>
-                <td><input @focus="setFocus('bh')" @blur="resetFocus()" id="bh" v-model="bh" v-bind:disabled="(finishedV && !bh) || fbh"
+                <td><input @focus="setFocus('bh')" @blur="resetFocus()" id="bh" v-model="bh"
+                           v-bind:disabled="(finishedV && !bh) || fbh"
                            type="number" min="0.1" step="0.1"></td>
                 <td><small>cm</small></td>
                 <td><span><input v-model="ratio" type="checkbox">Use ratio</span></td>
             </tr>
             <tr v-bind:class="{focused: focused=='rw'||focused=='rh'||focused==='ratio'}" v-if="ratio && !incomplete">
                 <td>Box ratio:</td>
-                <td><input @focus="setFocus('rw')" v-model="rw" v-bind:disabled="ratioId>0" type="number" min="0.1" step="0.1"></td>
+                <td><input @focus="setFocus('rw')" v-model="rw" v-bind:disabled="ratioId>0" type="number" min="1"
+                           step="1"></td>
                 <td>:</td>
-                <td><input @focus="setFocus('rh')" v-model="rh" v-bind:disabled="ratioId>0" type="number" min="0.1" step="0.1"></td>
+                <td><input @focus="setFocus('rh')" v-model="rh" v-bind:disabled="ratioId>0" type="number" min="1"
+                           step="1"></td>
                 <td></td>
                 <td>
                     <select v-model="ratioId" @focus="setFocus('ratio')" @blur="resetFocus()">
@@ -66,20 +72,24 @@
             </tr>
             <tr v-bind:class="{focused: focused=='mh'||focused=='mv'}" v-if="!incomplete">
                 <td>Box margin:</td>
-                <td><input @focus="setFocus('mh')" @blur="resetFocus()" id="mh" v-model="mh" v-bind:disabled="finishedH && !mh" type="number"
+                <td><input @focus="setFocus('mh')" @blur="resetFocus()" id="mh" v-model="mh"
+                           v-bind:disabled="finishedH && !mh" type="number"
                            min="0.1" step="0.1"></td>
                 <td><small>cm</small></td>
-                <td><input @focus="setFocus('mv')" @blur="resetFocus()" id="mv" v-model="mv" v-bind:disabled="finishedV && !mv" type="number"
+                <td><input @focus="setFocus('mv')" @blur="resetFocus()" id="mv" v-model="mv"
+                           v-bind:disabled="finishedV && !mv" type="number"
                            min="0.1" step="0.1"></td>
                 <td><small>cm</small></td>
                 <td><span><input v-model="padding" type="checkbox">Sheet padding</span></td>
             </tr>
             <tr v-bind:class="{focused: focused=='ph'||focused=='pv'}" v-if="padding && !incomplete">
                 <td>Sheet padding:</td>
-                <td><input @focus="setFocus('ph')" @blur="resetFocus()" id="ph" v-model="ph" v-bind:disabled="finishedH && !ph" type="number"
+                <td><input @focus="setFocus('ph')" @blur="resetFocus()" id="ph" v-model="ph"
+                           v-bind:disabled="finishedH && !ph" type="number"
                            min="0.1" step="0.1"></td>
                 <td><small>cm</small></td>
-                <td><input @focus="setFocus('pv')" @blur="resetFocus()" id="pv" v-model="pv" v-bind:disabled="finishedV && !pv" type="number"
+                <td><input @focus="setFocus('pv')" @blur="resetFocus()" id="pv" v-model="pv"
+                           v-bind:disabled="finishedV && !pv" type="number"
                            min="0.1" step="0.1"></td>
                 <td><small>cm</small></td>
                 <td></td>
@@ -96,7 +106,8 @@
     <br>
     <canvas id="preview"></canvas>
     <br>
-    <small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a href="https://github.com/klemek/sheet-divider" target="_blank">Github
+    <small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a
+            href="https://github.com/klemek/sheet-divider" target="_blank">Github
         Repository</a> - 2019</small>
 </main>
 </body>
diff --git a/main.js b/main.js
index bbcf331..55c0d81 100644
--- a/main.js
+++ b/main.js
@@ -60,19 +60,19 @@ const data = {
     {title: 'Demi-Raisin', w: 32.5, h: 50},
   ],
   ratios: [
-    {rw:1, rh:1},
-    {rw:2, rh:1},
-    {rw:1, rh:2},
-    {rw:3, rh:2},
-    {rw:2, rh:3},
-    {rw:4, rh:3},
-    {rw:3, rh:4},
-    {rw:4, rh:5},
-    {rw:5, rh:7},
-    {rw:16, rh:9},
-    {rw:9, rh:16},
-    {rw:21, rh:9},
-    {rw:9, rh:21},
+    {rw: 1, rh: 1},
+    {rw: 2, rh: 1},
+    {rw: 1, rh: 2},
+    {rw: 3, rh: 2},
+    {rw: 2, rh: 3},
+    {rw: 4, rh: 3},
+    {rw: 3, rh: 4},
+    {rw: 4, rh: 5},
+    {rw: 5, rh: 7},
+    {rw: 16, rh: 9},
+    {rw: 9, rh: 16},
+    {rw: 21, rh: 9},
+    {rw: 9, rh: 21},
   ]
 };
 
@@ -82,13 +82,13 @@ let app = {
   data: {
     focused: undefined,
     //inputs
-    sw: 21, sh: 29.7, //sheet size
+    sw: undefined, sh: undefined, //sheet size
     m: undefined, n: undefined, //boxes
     bw: undefined, bh: undefined, //box size
     rw: undefined, rh: undefined, //box ratio
     mh: undefined, mv: undefined, //margin
     ph: undefined, pv: undefined, //padding
-    sheet: 5,
+    sheet: 0,
     sheets: [
       {title: 'Custom'}
     ],
@@ -118,6 +118,13 @@ let app = {
       }
       this.refreshValues();
     },
+    ratio: function (v) {
+      if (!v && this.fbw)
+        this.bw = utils.round(this.bw, 1);
+      if (!v && this.fbh)
+        this.bh = utils.round(this.bh, 1);
+      this.refreshValues();
+    },
     padding: function (v) {
       if (!v && this.bw && this.mh)
         this.mh = undefined;
@@ -125,7 +132,6 @@ let app = {
         this.mv = undefined;
       this.refreshValues();
     },
-    ratio: 'refreshValues',
     sw: 'refreshValues',
     sh: 'refreshValues',
     m: 'refreshValues',
@@ -162,22 +168,18 @@ let app = {
         this.incomplete = true;
       } else {
         if (this.ratio && this.rw && this.rh) {
-          if (!this.fbw && !this.fbh) {
-            if (this.bh) {
-              this.fbw = true;
-              this.bw = utils.round(this.bh * this.rw / this.rh, 2);
-            } else if (this.bw) {
-              this.fbh = true;
-              this.bh = utils.round(this.bw * this.rh / this.rw, 2);
-            }
-          } else {
-            if (this.fbw && !this.bh) {
-              this.fbw = false;
-              this.bw = undefined;
-            } else if (this.fbh && !this.bw) {
-              this.fbh = false;
-              this.bh = undefined;
-            }
+          if (this.fbw && !this.bh) {
+            this.fbw = false;
+            this.bw = undefined;
+          } else if (this.fbh && !this.bw) {
+            this.fbh = false;
+            this.bh = undefined;
+          } else if (!this.fbw && this.bw) {
+            this.fbh = true;
+            this.bh = utils.round(this.bw * this.rh / this.rw, 2);
+          } else if (!this.fbh && this.bh) {
+            this.fbw = true;
+            this.bw = utils.round(this.bh * this.rw / this.rh, 2);
           }
         } else {
           this.fbw = false;