diff --git a/ElectronNET.WebApp/Views/DesktopCapturer/Index.cshtml b/ElectronNET.WebApp/Views/DesktopCapturer/Index.cshtml
index 5e22c04..ca7941b 100644
--- a/ElectronNET.WebApp/Views/DesktopCapturer/Index.cshtml
+++ b/ElectronNET.WebApp/Views/DesktopCapturer/Index.cshtml
@@ -22,104 +22,46 @@
             <button class="demo-button" id="screen-shot">View Demo</button>
             <span class="demo-response is-selectable" id="screenshot-path"></span>
           </div>
+          <img id="screenshot-image" style="width:100%; object-fit: contain"/>
           <p>This demo uses the <code>desktopCapturer</code> module to gather screens in use and select the entire screen and take a snapshot of what is visible.</p>
           <p>Clicking the demo button will take a screenshot of your current screen and open it in your default viewer.</p>
           <h5>Renderer Process (JavaScript)</h5>
-          <pre><code class="javascript">const electron = require('electron');
-const desktopCapturer = electron.desktopCapturer;
-const electronScreen = electron.screen;
-const shell = electron.shell;
+          <pre><code class="javascript">
+                  const screenshot = document.getElementById('screen-shot');
+    screenshot.addEventListener('click', function (event) {
+        const { desktopCapturer } = require('electron')
 
-const fs = require('fs');
-const os = require('os');
-const path = require('path');
-
-const screenshot = document.getElementById('screen-shot');
-const screenshotMsg = document.getElementById('screenshot-path');
-
-screenshot.addEventListener('click', function (event) {
-    screenshotMsg.textContent = 'Gathering screens...';
-    const thumbSize = determineScreenShotSize();
-    let options = { types: ['screen'], thumbnailSize: thumbSize }
-
-    desktopCapturer.getSources(options, function (error, sources) {
-        if (error) return console.log(error);
-
-        sources.forEach(function (source) {
-            if (source.name === 'Entire screen' || source.name === 'Screen 1') {
-                const screenshotPath = path.join(os.tmpdir(), 'screenshot.png');
-
-                fs.writeFile(screenshotPath, source.thumbnail.toPng(), function (error) {
-                if (error) return console.log(error);
-                shell.openExternal('file://' + screenshotPath);
-                const message = `Saved screenshot to: ${screenshotPath}`;
-                screenshotMsg.textContent = message;
-                });
+        desktopCapturer.getSources({ types: ['screen'], thumbnailSize: {
+            width: window.screen.width,
+            height: window.screen.height
+        }}).then(async sources => {
+            for (const source of sources) {
+                document.getElementById('screenshot-image').src = source.thumbnail.toDataURL();
+                return;
             }
-        })
-    })
-})
-
-function determineScreenShotSize () {
-    const screenSize = electronScreen.getPrimaryDisplay().workAreaSize;
-    const maxDimension = Math.max(screenSize.width, screenSize.height);
-    return {
-        width: maxDimension * window.devicePixelRatio,
-        height: maxDimension * window.devicePixelRatio
-    }
+        });
+    });
 }</code></pre>
         </div>
+        
       </div>
     </div>
 
     <script type="text/javascript">
-      (function(){
-          
-            const electron = require('electron');
-            const desktopCapturer = electron.desktopCapturer;
-            const electronScreen = electron.screen;
-            const shell = electron.shell;
+    const screenshot = document.getElementById('screen-shot');
+    screenshot.addEventListener('click', function (event) {
+        const { desktopCapturer } = require('electron')
 
-            const fs = require('fs');
-            const os = require('os');
-            const path = require('path');
-
-            const screenshot = document.getElementById('screen-shot');
-            const screenshotMsg = document.getElementById('screenshot-path');
-
-            screenshot.addEventListener('click', function (event) {
-                screenshotMsg.textContent = 'Gathering screens...';
-                const thumbSize = determineScreenShotSize();
-                let options = { types: ['screen'], thumbnailSize: thumbSize }
-
-                desktopCapturer.getSources(options, function (error, sources) {
-                    if (error) return console.log(error);
-
-                    sources.forEach(function (source) {
-                        if (source.name === 'Entire screen' || source.name === 'Screen 1') {
-                            const screenshotPath = path.join(os.tmpdir(), 'screenshot.png');
-
-                            fs.writeFile(screenshotPath, source.thumbnail.toPng(), function (error) {
-                            if (error) return console.log(error);
-                            shell.openExternal('file://' + screenshotPath);
-                            const message = `Saved screenshot to: ${screenshotPath}`;
-                            screenshotMsg.textContent = message;
-                            });
-                        }
-                    })
-                })
-            })
-
-            function determineScreenShotSize () {
-                const screenSize = electronScreen.getPrimaryDisplay().workAreaSize;
-                const maxDimension = Math.max(screenSize.width, screenSize.height);
-                return {
-                    width: maxDimension * window.devicePixelRatio,
-                    height: maxDimension * window.devicePixelRatio
-                }
+        desktopCapturer.getSources({ types: ['screen'], thumbnailSize: {
+            width: window.screen.width,
+            height: window.screen.height
+        }}).then(async sources => {
+            for (const source of sources) {
+                document.getElementById('screenshot-image').src = source.thumbnail.toDataURL();
+                return;
             }
-
-            }());
+        });
+    });
     </script>
 
   </section>