diff --git a/README.MD b/README.MD
index cd58251..5a94d5c 100755
--- a/README.MD
+++ b/README.MD
@@ -4,9 +4,10 @@
 [![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/poly-glot/tensorflowjs-remove-background)
 [![Cypress.io Dashboard](https://img.shields.io/badge/cypress-dashboard-brightgreen.svg)](https://dashboard.cypress.io/projects/jp2thc/runs)
 [![DeepScan grade](https://deepscan.io/api/teams/8408/projects/10623/branches/149386/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=8408&pid=10623&bid=149386)
+[![Maintainability](https://api.codeclimate.com/v1/badges/e9ab18c4667689e347de/maintainability)](https://codeclimate.com/github/poly-glot/tensorflowjs-remove-background/maintainability)
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/poly-glot/tensorflowjs-remove-background)
 
-Remove Background from picture using WebAssembly & TensorFlow.js
+Remove Background from the picture using WebAssembly & TensorFlow.js
 
 # Getting Started
 ```
@@ -14,51 +15,40 @@ npm install
 npm start
 ```
 
-## Manual Review Guidelines
+# How it is pieced together
+<img src="https://removebg.junaid.eu/assets/diagram.svg" alt="Flow diagram" />
+
+## Demonstration
 <table width="100%">
     <tr>
-        <td width="100">CSS</td>
-        <td>Use BEM naming convention </td>
+        <td width="100">Canvas</td>
+        <td>How to manipulate <a href="https://developer.mozilla.org/en-US/docs/Web/API/ImageData" target="_blank">ImageData</a> to build a new image.</td>
     </tr>
     <tr>
-        <td width="100">JS</td>
-        <td>Prefix DOM Element class name or ID with "js-" to indicate element is linked to Javascript</td>
+        <td width="100">Canvas</td>
+        <td><a href="https://github.com/poly-glot/tensorflowjs-remove-background/blob/00b6333c660ea1ecf7d1562dae56b68eea137041/src/component/output/events.js#L42" target="_blank">Save Canvas image.</a></td>
     </tr>    
     <tr>
-        <td width="100">JS</td>
-        <td>Use Async/Await over promises</td>
+        <td width="100">SEO</td>
+        <td><a href="https://support.google.com/gsa/answer/6329153?hl=en#82542">Excluding Unwanted Text from the Google Index</a> <code>&lt;!--googleoff: index--&gt;</code></td>
     </tr>        
     <tr>
-        <td width="100">JS</td>
-        <td>Keep Code branching to one level and reduce nested if/else statements</td>
+        <td width="100">HTML</td>
+        <td>Use <code>referrerpolicy="no-referrer"</code> to disable hotlink protection.</td>
     </tr>
+    <tr>
+        <td width="100">HTML</td>
+        <td>Use accept attribute e.g. <code>accept=".jpg,.png,.jpeg"</code> to allow users to select required file type.</td>
+    </tr>  
     <tr>
         <td width="100">JS</td>
-        <td>Leverage Modern Browser API's instead of bloated libraries or framework e.g. use fetch instead of axios</td>
-    </tr>                            
+        <td>Handle events using <a href="https://javascript.info/bubbling-and-capturing">Event Bubbling</a>.</td>
+    </tr>                                
+    <tr>
+        <td width="100">Accessibility</td>
+        <td>A small &amp; Accessible Collapse implementation.</td>
+    </tr>                                    
 </table>
 
-# Local Development
-
-### Running Github Action
-```
-# https://github.com/nektos/act
-curl https://raw.githubusercontent.com/nektos/act/master/install.sh | sudo bash
-act pull_request
-act --job ci
-```
-
-### Running Sonar
-```
-docker run -d --name sonarqube -p 9000:9000 -p 9092:9092 sonarqube
-docker run -ti -v $(pwd)/src:/root/src --link sonarqube newtmitch/sonar-scanner
-```
-
-### Docker
-```
-docker build -t tensorflowjs-remove-background .
-docker run -it --rm -p 5000:5000 tensorflowjs-remove-background
-```
-
 # Browser Support
 2 most recent versions of Chrome, Firefox, Safari & MS Edge.
diff --git a/docs/control-flow.drawio b/docs/control-flow.drawio
new file mode 100644
index 0000000..b2dbdbf
--- /dev/null
+++ b/docs/control-flow.drawio
@@ -0,0 +1 @@
+<mxfile host="app.diagrams.net" modified="2020-04-07T03:51:43.486Z" agent="5.0 (Macintosh)" etag="AtO8hbI7gnz9pmPdEX8B" version="12.9.8" type="device"><diagram name="Page-1" id="74e2e168-ea6b-b213-b513-2b3c1d86103e">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</diagram></mxfile>
\ No newline at end of file
diff --git a/public/assets/diagram.svg b/public/assets/diagram.svg
new file mode 100644
index 0000000..352d9aa
--- /dev/null
+++ b/public/assets/diagram.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" style="background-color: rgb(255, 255, 255);" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="801px" height="751px" viewBox="-0.5 -0.5 801 751" content="&lt;mxfile host=&quot;app.diagrams.net&quot; modified=&quot;2020-04-07T03:53:31.883Z&quot; agent=&quot;5.0 (Macintosh)&quot; etag=&quot;CTLiPJGamKQfLZacMGVW&quot; version=&quot;12.9.8&quot; type=&quot;device&quot;&gt;&lt;diagram name=&quot;Page-1&quot; id=&quot;74e2e168-ea6b-b213-b513-2b3c1d86103e&quot;&gt;7VtZc9s2EP41nmkfmuEhHn6sHNv11Gk9lpM2Tx2IhCg0IMEBoau/vgAJigdAiTIlS06bmWS4i4PkfrvfLpbKlX0Tr+8pSOefSAjxlWWE6yv745VlXY9c/q9QbAqFY1qFIqIoLFRmpZigf6BUGlK7QCHMGhMZIZihtKkMSJLAgDV0gFKyak6bEdy8awoiqCgmAcCq9g8UsrnUmoZRDfwCUTSXt/YdOTAFwbeIkkUi73dl2bP8TzEcg3IvOT+bg5Csair79sq+oYSw4ipe30AsTFuarVh31zG6fW4KE9ZngedBN7j2Zua1GwLft3+SOywBXsDyFVzM9xozMOXmsdxICFvllHCM20qqaMK2ZqrM4Q+pTntHC4VSO1NnIqFv2jP3BrYpPTBboRiDhEvjOYsxV5r8MpgjHD6CDVkIdDPGva2UxlyiTIYSR90e524IBdBC2nqaEDCYQjze+uoNwYTyoYTkN8wYJd+2ji/uOyMJuwMxwiKev0AaggRItbyjz0WAUZTw64A7H6Tbt6p7Y+lekDK4rqmkd95DEkNGubmMcnQkI0UySSmuqrD0y6ic1yLSKyMSSCqItltX4cAvZET0jA5LiY6HJOXWt4wJWdAA9oRRgUo1VGdg7rectJSlWsp0dZayd1hK7v7MSRYkkfDXHdvbfXYHmPtGAhgcC8/LFDi2L/I6hK5VhGJO1pkwLyVLJAKC07Sw02QR8QGGSMIF7u0RZAp+VQwJ3FZzxOAkBYEYXfHM14L1IkKs02l7x5zVDDnT0XiSpcHaPUXI+XpAuWqRYgJqeH7OuEX+B1AF0NXgZ2rwG50CP1vB7wYkSyAC8omSAGYZSqKL4M1y1G1a7yg82td86MX59XFlBNh9QYvfvsQRNO9KTquZB3KymkiRUDYnEUkAvq20reRfzXkkJJXW/BsytpHWBAtGmraGa8T+FMs/OFL6Whv5uJY758KmFBL+urVFQvxaH6uW5VK5rhUjxeuKd+ysarvcLCvScLct5cGEO5Kg++55vt5HKMSAoWXzwY4OuKvEzDOMyVKQ3lgcbgTPGROQhFOy5lfPPItRFMhMlnNhgEmSx5UxQ3nWRgkH2DIePt0L02IYC1MOIkstaEqY9YFtCI/p8tAxeKzbKRq4kCTPRo8yEbXtOSfxdJFdhC1bdbSpLaRVW/qnyAkjxY5Vni2z+wTSJbqQilqO2talZQbTGZQazFemhhrNu9YhRJ9LT5Ai/vqi+jkW+496sn/ZhtpL/+bonPxfPqaSAH74cRhnn6/APZTMOuxf7tAMRNvQROLoLTODqVJaSmHIk7J4UbSGWBS8ZCaeZxGDPE/nbSGemJtHU1TwX5v15iAVl2lRMu9HumpE/r5gGAlIj5dpdoPjNbHxNdjoOgW2cyJsLDWabki6yc2eQ5TbfQvSjJJYYEVRhDgrVpBwqIpej6QZ0ZMWpRaJU5IJEfC/CVx9FyCadgPFkW+9HYrKozoKgC8wyQi9w5zMLqhAGPlnLBDUetAdXBzUDLgvW3Dz/iy+vLR0d0g8cNGBrkFQHA/DckWAQZah4GXO2TAfkMuKaiOsLdJUJtoK5nXpa79POGoBofZrDG0NM6CakEufCBKnttLdWt7mWi0vKnhKLhrUZtXnPE8Jy78yGImTJS/xMnEY/W/UKs5OUmgdGmzP++C8XbWiPKzaW+C5pchrTxQuEbwoRnVHl8SoppqIPqchYLDLcu/E4Xdi5h6Kmd3qNOjaNrpPdicrzi31o3YBW93njQdtzfZOEDyUstxDKMvRlfBv2njzBlUyAzvg5XXe4Nh2w/d1wBttkaod3tEY0RYM/ci03vTo+nq2t9/R4Q9v1O4wzgLvK6E6QruqD3LXPZE764cK0x+E3Cv7j6dBYGdfZ3/D0DsnDtbZ+8Bv/LmvN35eT/yKJtHQIxo/z4JNbUIqzl5ZbefWCc7xWr9u8lo/12vNt6/9XfP5RfEERz3nWcP7CO+ennc2Fvc711HO/4c6V9tZyv7AaZ1lWKn2/TqLphLrOF+eLYmcJZlfVhLpPPLvLwDOkkC89idpZ3cCGRk75x/KCVysfqteTK/+P4B9+y8=&lt;/diagram&gt;&lt;/mxfile&gt;"><defs/><g><path d="M 0 20 L 0 0 L 800 0 L 800 20" fill="#ffffff" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/><path d="M 0 20 L 0 750 L 800 750 L 800 20" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 0 20 L 800 20" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 10px; margin-left: 400px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Verdana; color: #000000; line-height: 1.2; pointer-events: none; font-weight: bold; white-space: nowrap; "><table><tbody><tr><td><br /></td><td><br /></td><td><br /></td><td><br /></td></tr></tbody></table></div></div></div></foreignObject><text x="400" y="12" fill="#000000" font-family="Verdana" font-size="8px" text-anchor="middle" font-weight="bold"></text></switch></g><path d="M 0 40 L 0 20 L 160 20 L 160 40" fill="#ffffff" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 0 40 L 0 750 L 160 750 L 160 40" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 0 40 L 160 40" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 30px; margin-left: 80px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; font-weight: bold; white-space: nowrap; ">Input Source</div></div></div></foreignObject><text x="80" y="34" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">Input Source</text></switch></g><rect x="20" y="170" width="120" height="60" rx="9" ry="9" fill="#ffffff" stroke="#000000" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 200px; margin-left: 21px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Verdana; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">Images provided by Suggestion Widget</div></div></div></foreignObject><text x="80" y="202" fill="#000000" font-family="Verdana" font-size="8px" text-anchor="middle">Images provided by Suggestion...</text></switch></g><rect x="20" y="80" width="110" height="40" rx="6" ry="6" fill="#ffffff" stroke="#000000" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 108px; height: 1px; padding-top: 100px; margin-left: 21px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Verdana; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">Image uploaded by User</div></div></div></foreignObject><text x="75" y="102" fill="#000000" font-family="Verdana" font-size="8px" text-anchor="middle">Image uploaded by User</text></switch></g><path d="M 160 40 L 160 20 L 320 20 L 320 40" fill="#ffffff" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 160 40 L 160 750 L 320 750 L 320 40" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 160 40 L 320 40" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 30px; margin-left: 240px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; font-weight: bold; white-space: nowrap; ">Canvas Processing</div></div></div></foreignObject><text x="240" y="34" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">Canvas Processing</text></switch></g><path d="M 240 120 L 240 153.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 240 158.88 L 236.5 151.88 L 240 153.63 L 243.5 151.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><rect x="180" y="80" width="120" height="40" rx="6" ry="6" fill="#ffffff" stroke="#000000" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 100px; margin-left: 181px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">Remove Browser Sandbox Restriction by cloning file into IMG element</div></div></div></foreignObject><text x="240" y="102" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">Remove Browser Sandbox Restri...</text></switch></g><path d="M 240 160 L 280 200 L 240 240 L 200 200 Z" fill="#ffffff" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 200px; margin-left: 201px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">onImageLoaded</div></div></div></foreignObject><text x="240" y="202" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">onImageLoaded</text></switch></g><path d="M 320 40 L 320 20 L 480 20 L 480 40" fill="#ffffff" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 320 40 L 320 750 L 480 750 L 480 40" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 320 40 L 480 40" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 30px; margin-left: 400px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; font-weight: bold; white-space: nowrap; ">BackgroundImage Service</div></div></div></foreignObject><text x="400" y="34" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">BackgroundImage Service</text></switch></g><path d="M 400 360 L 400 370 Q 400 380 400.04 386.82 L 400.07 393.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 400.06 398.88 L 396.58 391.88 L 400.07 393.63 L 403.58 391.89 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><rect x="330" y="320" width="140" height="40" rx="6" ry="6" fill="#ffffff" stroke="#000000" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 138px; height: 1px; padding-top: 340px; margin-left: 331px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Verdana; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">Remove()</div></div></div></foreignObject><text x="400" y="342" fill="#000000" font-family="Verdana" font-size="8px" text-anchor="middle">Remove()</text></switch></g><rect x="327" y="400" width="130" height="35" fill="#ffffff" stroke="#000000" pointer-events="none"/><path d="M 340 400 L 340 435 M 444 400 L 444 435" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 102px; height: 1px; padding-top: 418px; margin-left: 341px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">predict pixels of human body in provided image</div></div></div></foreignObject><text x="392" y="420" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">predict pixels of human b...</text></switch></g><rect x="333" y="502" width="130" height="35" fill="#ffffff" stroke="#000000" pointer-events="none"/><path d="M 346 502 L 346 537 M 450 502 L 450 537" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 102px; height: 1px; padding-top: 520px; margin-left: 347px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">Copy predicted pixels from original image input source to compose a new image</div></div></div></foreignObject><text x="398" y="522" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">Copy predicted pixels fro...</text></switch></g><path d="M 480 40 L 480 20 L 640 20 L 640 40" fill="#ffffff" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 480 40 L 480 750 L 640 750 L 640 40" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 480 40 L 640 40" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 30px; margin-left: 560px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; font-weight: bold; white-space: nowrap; ">TensorFlow</div></div></div></foreignObject><text x="560" y="34" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">TensorFlow</text></switch></g><rect x="500" y="397.5" width="140" height="40" rx="6" ry="6" fill="#ffffff" stroke="#000000" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 138px; height: 1px; padding-top: 418px; margin-left: 501px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Verdana; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">_segmentPerson</div></div></div></foreignObject><text x="570" y="420" fill="#000000" font-family="Verdana" font-size="8px" text-anchor="middle">_segmentPerson</text></switch></g><path d="M 640 40 L 640 20 L 800 20 L 800 40" fill="#ffffff" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 640 40 L 640 750 L 800 750 L 800 40" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 640 40 L 800 40" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 30px; margin-left: 720px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; font-weight: bold; white-space: nowrap; ">Output Preview</div></div></div></foreignObject><text x="720" y="34" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">Output Preview</text></switch></g><rect x="670" y="180" width="100" height="40" rx="6" ry="6" fill="#ffffff" stroke="#000000" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 200px; margin-left: 671px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Verdana; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">UpdatePreview</div></div></div></foreignObject><text x="720" y="202" fill="#000000" font-family="Verdana" font-size="8px" text-anchor="middle">UpdatePreview</text></switch></g><rect x="660" y="600" width="120" height="40" rx="6" ry="6" fill="#ffffff" stroke="#000000" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 620px; margin-left: 661px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Verdana; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">Update Preview Image</div></div></div></foreignObject><text x="720" y="622" fill="#000000" font-family="Verdana" font-size="8px" text-anchor="middle">Update Preview Image</text></switch></g><path d="M 130 100 L 173.63 100" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 178.88 100 L 171.88 103.5 L 173.63 100 L 171.88 96.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 140 200 L 193.63 200" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 198.88 200 L 191.88 203.5 L 193.63 200 L 191.88 196.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 457 417.5 L 493.63 417.5" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 498.88 417.5 L 491.88 421 L 493.63 417.5 L 491.88 414 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 570 437.5 L 570 460 Q 570 470 560 470 L 408 470 Q 398 470 398 480 L 398 495.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 398 500.88 L 394.5 493.88 L 398 495.63 L 401.5 493.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 398 537 L 398 610 Q 398 620 408 620 L 653.63 620" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 658.88 620 L 651.88 623.5 L 653.63 620 L 651.88 616.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 280 200 L 663.63 200" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 668.88 200 L 661.88 203.5 L 663.63 200 L 661.88 196.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 720 220 L 720 240 Q 720 250 710 250 L 410 250 Q 400 250 400 260 L 400 313.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 400 318.88 L 396.5 311.88 L 400 313.63 L 403.5 311.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://desk.draw.io/support/solutions/articles/16000042487" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>
\ No newline at end of file
diff --git a/public/assets/social.jpg b/public/assets/social.jpg
new file mode 100644
index 0000000..c1d2005
Binary files /dev/null and b/public/assets/social.jpg differ
diff --git a/public/index.html b/public/index.html
index f1088c9..0b14557 100755
--- a/public/index.html
+++ b/public/index.html
@@ -3,31 +3,28 @@
 <head>
     <meta charset="UTF-8">
 
-    <title>Usual title</title>
-    <meta name="description" content="Usual description">
+    <title>Remove Background from the picture using WebAssembly &amp; TensorFlow.js</title>
+    <meta name="description" content="Open source vanilla js project demonstrating TDD and power of Tensorflow in the browser.">
 
     <!-- Facebook Meta Tags
     ================================================== -->
-    <meta property="og:title"           content="Usual title">
-    <meta property="og:url"             content="">
-    <meta property="og:image"           content="">
+    <meta property="og:title"           content="Remove Background from the picture using WebAssembly&amp; TensorFlow.js">
+    <meta property="og:url"             content="https://removebg.junaid.eu/">
+    <meta property="og:image"           content="https://removebg.junaid.eu/assets/social.jpg">
     <meta property="og:image:type"      content="image/jpg">
     <meta property="og:image:width"     content="1200">
     <meta property="og:image:height"    content="630">
-    <meta property="og:description"     content="Usual description">
-    <meta property="og:site_name"       content="Usual title">
+    <meta property="og:description"     content="Open source vanilla js project demonstrating TDD and power of Tensorflow in the browser.">
     <meta property="og:locale"          content="en_GB">
     <meta property="og:type"            content="website">
 
     <!-- Twitter Cards
     ================================================== -->
     <meta name="twitter:card"           content="summary_large_image">
-    <meta name="twitter:site"           content="">
-    <meta name="twitter:creator"        content="">
-    <meta name="twitter:url"            content="">
-    <meta name="twitter:title"          content="Usual title">
-    <meta name="twitter:description"    content="Usual description">
-    <meta name="twitter:image"          content="">
+    <meta name="twitter:url"            content="https://removebg.junaid.eu/">
+    <meta name="twitter:title"          content="Remove Background from the picture using WebAssembly&amp; TensorFlow.js">
+    <meta name="twitter:description"    content="Open source vanilla js project demonstrating TDD and power of Tensorflow in the browser.">
+    <meta name="twitter:image"          content="https://removebg.junaid.eu/assets/social.jpg">
 
 
     <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
@@ -37,7 +34,8 @@
 </head>
 <body class="site">
     <header class="site__header" aria-label="Main Header">
-        <p>Usual header notice</p>
+        <p>Remove Background</p>
+        <a href="https://github.com/poly-glot/tensorflowjs-remove-background" target="_blank" rel="noopener">Github</a>
     </header>
 
     <main class="site__body" aria-label="Main View">
diff --git a/src/component/core-css/site.css b/src/component/core-css/site.css
index a095f83..3c4f23f 100644
--- a/src/component/core-css/site.css
+++ b/src/component/core-css/site.css
@@ -1,5 +1,7 @@
 .site__header {
   border-bottom: 1px solid var(--borderColor);
+  display: flex;
+  justify-content: space-between;
   padding: 15px;
 }