diff --git a/build/index.html b/build/index.html
index c03fb24..3401265 100644
--- a/build/index.html
+++ b/build/index.html
@@ -56,7 +56,7 @@
     hideByEsc: true,
     saveByEnter: true,
     shadowScale: 1,
-    // backplateImgUrl: 'https://www.meme-arsenal.com/memes/50569ac974c29121ff9075e45a334942.jpg',
+    // backplateImgUrl: 'https://images.pexels.com/photos/4386297/pexels-photo-4386297.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
     //toolbarHeightPx: 50,
     //buttonSizePx: 42,
     // defaultTool: 'arrow',
@@ -86,7 +86,7 @@
     // fixMobilePageReloader: false,
     // defaultTool: 'line',
     //hiddenTools: ['line']
-  }).show() 
+  }).show('https://images.pexels.com/photos/4386297/pexels-photo-4386297.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940') 
   const ctx = window.p.ctx; 
 
 console.log(ctx);
diff --git a/css/icons/ptroiconfont.css b/css/icons/ptroiconfont.css
index beedb59..a6997da 100644
--- a/css/icons/ptroiconfont.css
+++ b/css/icons/ptroiconfont.css
@@ -67,6 +67,14 @@ url("ptroiconfont.svg?bf58900bc0f41f759214435220e5b3df#ptroiconfont") format("sv
 .ptro-icon-paste_extend_right:before {
 	content: "\f10f";
 }
+.ptro-icon-paste_extend_left:before {
+	content: "\f10f";
+	transform: rotate(-180deg);
+}
+.ptro-icon-paste_extend_top:before {
+	content: "\f10f";
+	transform: rotate(-90deg);
+}
 .ptro-icon-paste_fit:before {
 	content: "\f110";
 }
diff --git a/css/styles.css b/css/styles.css
index bfdbb22..2661fb5 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -451,7 +451,26 @@ select.ptro-input {
     line-height: normal;
     text-align: left;
 }
-
+.ptro-paster-wrappers-fits {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+.ptro-selector-extend {
+    height: 70px;
+    width: 70px !important;
+}
+.ptro-selector-extend div:last-child {
+    display: none;
+}
+.ptro-selector-fit {
+    height: 220px;
+    width: 220px !important;
+    margin: 0px !important;
+}
+.ptro-paster-fit {
+    margin-right: 46px !important;
+}
 .ptro-text-tool-buttons {
     display: flex;
     position: fixed;
@@ -546,7 +565,7 @@ input.ptro-pixel-size-input {
 
 .ptro-paster-select .ptro-in {
     background-color: rgba(0,0,0,0.7);
-    padding: 10px;
+    padding: 40px;
 }
 .ptro-paster-select-wrapper {
     position: absolute;
@@ -555,7 +574,26 @@ input.ptro-pixel-size-input {
     right: 0;
     bottom: 0;
 }
-
+.ptro-paster-select-wrapper-extends button:first-child {
+    display: block;
+    margin: 0 auto;
+}
+.ptro-paster-select-wrapper-extends button:last-child{
+    display: block;
+    margin: 0 auto;
+}
+.ptro-paster-select-wrapper-extends button:nth-child(2){
+    display: inline-block;
+    margin-right: 78px;
+}
+.ptro-paster-wrapper-label {
+    display: block; 
+    color: white;
+    font-size: 20px !important;
+    text-align: center;
+    margin-top: 10px;
+    text-transform: uppercase;
+}
 .ptro-paste-label {
     color: white;
     margin-bottom: 10px;
diff --git a/js/inserter.js b/js/inserter.js
index 7843531..813ac9b 100644
--- a/js/inserter.js
+++ b/js/inserter.js
@@ -3,16 +3,11 @@ import { genId, KEYS, imgToDataURL } from './utils';
 
 let instance = null;
 export default class Inserter {
-  constructor() {
-    this.pasteOptions = {
-      replace_all: {
-        internalName: 'fit',
-        handle: (img) => {
-          this.main.fitImage(img, this.mimetype);
-        },
-      },
-      extend_down: {
-        internalName: 'extend_down',
+  constructor(main) {
+    this.main = main;
+    const extendObj = {
+      extend_top: {
+        internalName: 'extend_top',
         handle: (img) => {
           this.tmpImg = img;
           const oldH = this.main.size.h;
@@ -22,18 +17,35 @@ export default class Inserter {
           const tmpData = this.ctx.getImageData(0, 0, this.main.size.w, this.main.size.h);
           this.main.resize(newW, newH);
           this.main.clearBackground();
-          this.ctx.putImageData(tmpData, 0, 0);
+          this.ctx.putImageData(tmpData, 0, img.naturalHeight);
           this.main.adjustSizeFull();
-          if (this.main.params.backplateImgUrl) {
-            this.main.tabelCell.style.backgroundPosition = 'top center';
-            this.main.tabelCell.style.backgroundSize = `auto ${this.main.substrate.style.width}`;
-            this.main.substrate.style.opacity = 0;
-          }
           if (img.naturalWidth < oldW) {
             const offset = Math.round((oldW - img.naturalWidth) / 2);
-            this.main.select.placeAt(offset, oldH, offset, 0, img);
+            this.main.select.placeAt(offset, 0, offset, oldH, img);
           } else {
-            this.main.select.placeAt(0, oldH, 0, 0, img);
+            this.main.select.placeAt(0, 0, 0, oldH, img);
+          }
+          this.worklog.captureState();
+        },
+      },
+      extend_left: {
+        internalName: 'extend_left',
+        handle: (img) => {
+          this.tmpImg = img;
+          const oldH = this.main.size.h;
+          const oldW = this.main.size.w;
+          const newW = oldW + img.naturalWidth;
+          const newH = Math.max(oldH, img.naturalHeight);
+          const tmpData = this.ctx.getImageData(0, 0, this.main.size.w, this.main.size.h);
+          this.main.resize(newW, newH);
+          this.main.clearBackground();
+          this.ctx.putImageData(tmpData, img.naturalWidth, 0);
+          this.main.adjustSizeFull();
+          if (img.naturalHeight < oldH) {
+            const offset = Math.round((oldH - img.naturalHeight) / 2);
+            this.main.select.placeAt(0, offset, oldW, offset, img);
+          } else {
+            this.main.select.placeAt(0, 0, oldW, 0, img);
           }
           this.worklog.captureState();
         },
@@ -51,12 +63,6 @@ export default class Inserter {
           this.main.clearBackground();
           this.ctx.putImageData(tmpData, 0, 0);
           this.main.adjustSizeFull();
-          if (this.main.params.backplateImgUrl) {
-            this.main.tabelCell.style.backgroundPosition = `${this.main.substrate.style.left} center`;
-            this.main.tabelCell.style.backgroundSize = `auto ${this.main.substrate.style.height}`;
-            this.main.tabelCell.style.width = this.main.substrate.style.width;
-            this.main.substrate.style.opacity = 0;
-          }
           if (img.naturalHeight < oldH) {
             const offset = Math.round((oldH - img.naturalHeight) / 2);
             this.main.select.placeAt(oldW, offset, 0, offset, img);
@@ -66,6 +72,46 @@ export default class Inserter {
           this.worklog.captureState();
         },
       },
+      extend_down: {
+        internalName: 'extend_down',
+        handle: (img) => {
+          this.tmpImg = img;
+          const oldH = this.main.size.h;
+          const oldW = this.main.size.w;
+          const newH = oldH + img.naturalHeight;
+          const newW = Math.max(oldW, img.naturalWidth);
+          const tmpData = this.ctx.getImageData(0, 0, this.main.size.w, this.main.size.h);
+          this.main.resize(newW, newH);
+          this.main.clearBackground();
+          this.ctx.putImageData(tmpData, 0, 0);
+          this.main.adjustSizeFull();
+          if (img.naturalWidth < oldW) {
+            const offset = Math.round((oldW - img.naturalWidth) / 2);
+            this.main.select.placeAt(offset, oldH, offset, 0, img);
+          } else {
+            this.main.select.placeAt(0, oldH, 0, 0, img);
+          }
+          this.worklog.captureState();
+        },
+      },
+    };
+    const fitObj = {
+      replace_all: {
+        internalName: 'fit',
+        handle: (img) => {
+          if (this.main.params.backplateImgUrl) {
+            this.main.params.backplateImgUrl = undefined;
+            this.main.tabelCell.style.background = '';
+            this.main.canvas.style.backgroundColor = `${this.main.params.backgroundFillColor}ff`;
+            this.pasteOptions = Object.assign({}, fitObj, extendObj);
+            this.activeOption = this.pasteOptions;
+            this.main.wrapper.querySelector('.ptro-paster-select-wrapper').remove();
+            this.main.wrapper.insertAdjacentHTML('beforeend', this.html());
+            this.init(main);
+          }
+          this.main.fitImage(img, this.mimetype);
+        },
+      },
       paste_over: {
         internalName: 'over',
         handle: (img) => {
@@ -88,6 +134,12 @@ export default class Inserter {
         },
       },
     };
+    if (this.main.params.backplateImgUrl) {
+      this.pasteOptions = Object.assign({}, fitObj);
+      this.activeOption = this.pasteOptions;
+      return;
+    }
+    this.pasteOptions = Object.assign({}, fitObj, extendObj);
     this.activeOption = this.pasteOptions;
   }
 
@@ -206,11 +258,11 @@ export default class Inserter {
     }
   }
 
-  static get() {
+  static get(main) {
     if (instance) {
       return instance;
     }
-    instance = new Inserter();
+    instance = new Inserter(main);
     return instance;
   }
 
@@ -229,23 +281,46 @@ export default class Inserter {
     });
     this.activeOption = this.pasteOptions;
   }
+  static controlObjToString(o, btnClassName = '') {
+    const tempObj = o;
+    tempObj.id = genId();
+    return `<button type="button" id="${o.id}" class="ptro-selector-btn ptro-color-control ${btnClassName}">` +
+    `<div><i class="ptro-icon ptro-icon-paste_${o.internalName}"></i></div>` +
+    `<div>${tr(`pasteOptions.${o.internalName}`)}</div>` +
+    '</button>';
+  }
 
   html() {
-    let buttons = '';
+    const bcklOptions = this.main.params.backplateImgUrl;
+    let fitControls = '';
+    let extendControls = '';
     Object.keys(this.pasteOptions).forEach((k) => {
-      const o = this.pasteOptions[k];
-      o.id = genId();
-      buttons += `<button type="button" id="${o.id}" class="ptro-selector-btn ptro-color-control">` +
-        `<div><i class="ptro-icon ptro-icon-paste_${o.internalName}"></i></div>` +
-        `<div>${tr(`pasteOptions.${o.internalName}`)}</div>` +
-      '</button>';
+      if (k === 'replace_all' || k === 'paste_over') {
+        fitControls += `<div class="ptro-paster-fit">
+          ${Inserter.controlObjToString(this.pasteOptions[k], 'ptro-selector-fit')}
+        <div class="ptro-paster-wrapper-label">
+          ${tr(`pasteOptions.${this.pasteOptions[k].internalName}`)}
+        </div></div>`;
+      } else {
+        extendControls += Inserter.controlObjToString(this.pasteOptions[k], 'ptro-selector-extend');
+      }
     });
     return '<div class="ptro-paster-select-wrapper" hidden><div class="ptro-paster-select ptro-v-middle">' +
       '<div class="ptro-in ptro-v-middle-in">' +
-      `<div class="ptro-paste-label">${tr('pasteOptions.how_to_paste')}</div>${
-        buttons}</div></div></div>`;
+      ` <div class="ptro-paster-wrappers-fits">
+        ${fitControls}
+          ${bcklOptions ? '' : `<div class="ptro-paster-select-wrapper-extends">
+          <div class="ptro-paster-extends-items">
+            ${extendControls}
+          </div>
+          <div class="ptro-paster-wrapper-label">extend</div>
+        </div>`}
+        </div>
+      </div></div></div>`;
   }
 }
+
 export function setActivePasteOptions(a) {
   return Inserter.get().activeOptions(a);
 }
+
diff --git a/js/main.js b/js/main.js
index f953ae8..24285c5 100644
--- a/js/main.js
+++ b/js/main.js
@@ -433,7 +433,7 @@ class PainterroProc {
       }
     });
 
-    this.inserter = Inserter.get();
+    this.inserter = Inserter.get(this);
 
     const cropper = '<div class="ptro-crp-el">' +
       `${PainterroSelecter.code()}${TextTool.code()}</div>`;
@@ -507,7 +507,10 @@ class PainterroProc {
       this.tabelCell.style.backgroundPosition = 'center center';
       const img = new Image();
       img.onload = () => {
-        this.fitImage(img);
+        this.resize(img.naturalWidth, img.naturalHeight);
+        this.adjustSizeFull();
+        this.worklog.captureState();
+        this.tabelCell.style.backgroundSize = `${window.getComputedStyle(this.substrate).width} ${window.getComputedStyle(this.substrate).height}`;
       };
       img.src = this.params.backplateImgUrl;
     }
@@ -1014,15 +1017,10 @@ class PainterroProc {
   fitImage(img, mimetype) {
     this.loadedImageType = mimetype;
     this.resize(img.naturalWidth, img.naturalHeight);
-    if (!this.params.backplateImgUrl) {
-      this.ctx.drawImage(img, 0, 0);
-      this.zoomFactor = (this.wrapper.documentClientHeight / this.size.h) - 0.2;
-    }
+    this.ctx.drawImage(img, 0, 0);
+    this.zoomFactor = (this.wrapper.documentClientHeight / this.size.h) - 0.2;
     this.adjustSizeFull();
     this.worklog.captureState();
-    if (this.params.backplateImgUrl) {
-      this.tabelCell.style.backgroundSize = `auto ${window.getComputedStyle(this.substrate).width}`;
-    }
   }
 
   loadImage(source, mimetype) {
@@ -1085,7 +1083,6 @@ class PainterroProc {
 
   adjustSizeFull() {
     const ratio = this.wrapper.documentClientWidth / this.wrapper.documentClientHeight;
-
     if (this.zoom === false) {
       if (this.size.w > this.wrapper.documentClientWidth ||
         this.size.h > this.wrapper.documentClientHeight) {
diff --git a/langs/en.lang.js b/langs/en.lang.js
index a62d5d5..7b280d1 100644
--- a/langs/en.lang.js
+++ b/langs/en.lang.js
@@ -73,6 +73,8 @@ export default {
     fit: 'Replace all',
     extend_down: 'Extend down',
     extend_right: 'Extend right',
+    extend_left: 'Extend left',
+    extend_top: 'Extend top',
     over: 'Paste over',
     how_to_paste: 'How to paste?',
   },