diff --git a/index.html b/index.html
index f0ee999..33151f2 100644
--- a/index.html
+++ b/index.html
@@ -5,75 +5,458 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Librarie.js sample page</title>
-    <style>
-        body {
-            padding: 0;
-            margin: 0;
-        }
-    </style>
-    </style>
-</head>
+    <!-- overflow-x setting is to disable unnecessary horizontal scroll bar -->
+<!-- input::-ms-clear setting is to disable unnecessary close button of search bar -->
+<style>
+
+    body {
+        padding: 0;
+        margin: 0;
+        background-color: #353535;
+        overflow-x: hidden;
+        -webkit-user-drag: none;
+        -khtml-user-drag: none;
+        -moz-user-drag: none;
+        -o-user-drag: none;
+        -webkit-touch-callout: none; /* iOS Safari */
+        -webkit-user-select: none; /* Chrome/Safari/Opera */
+        -khtml-user-select: none; /* Konqueror */
+        -moz-user-select: none; /* Firefox */
+        -ms-user-select: none; /* Internet */
+        user-select: none;
+        scrollbar-base-color: #353535;
+        scrollbar-highlight-color: #202020;
+        scrollbar-track-color: #202020;
+        scrollbar-arrow-color: #353535;
+        scrollbar-shadow-color: #202020;
+        scrollbar-width: thin;
+    }
+
+    input::-ms-clear {
+        display: none;
+    }
+
+    #glow_active {
+        border: 3px;
+        background-color: transparent;
+        box-shadow: 0px 0px 20px 2px orange;
+        transition: box-shadow 2s ease-in-out;
+        border-style: solid;
+        border-color: rgba(239, 147, 98, 0.7);
+    }
+
+    #glow_inactive {
+        border: 3px;
+        background-color: transparent;
+        box-shadow: 0px 0px 2px 0px orange;
+        transition: box-shadow 2s ease-in-out;
+        border-style: solid;
+        border-color: rgba(239, 147, 98, 0.7);
+    }
 
-<body>
+    .overlay {
+        background-color: black;
+        pointer-events: none;
+        opacity: 0.5;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        border: 2px;
+    }
 
-    <div id="libraryContainerPlaceholder"></div>
+    .hole {
+        background-color: transparent;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
+    /* 
+        The below style aligns texts in IE
+        as it adds some offset to text when using Artifakt Element font
+    */
+    .LibraryItemHeader .LibraryItemGroupText, 
+    .LibrarySectionHeader .LibraryItemGroupText,
+    .LibraryItemContainerCategory .LibraryItemText {
+        padding-top: 0.5rem;
+    }
 
+    .SearchFilterPanel label.Category > * {
+        margin-top: 0.15rem;
+        vertical-align: top !important;
+    }
+
+    #overlay {
+        position: fixed;
+        display: none;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(0,0,0,0.5);
+        z-index: 2;
+    }
+</style>
+</head>
+
+<body onresize="bodyResizeEvent()">
+    <div id="overlay"></div>
+    <!-- Placeholders must exist before all other scripts that try to access them -->
+    <div class="OuterMostContainer" id="libraryContainerPlaceholder"></div>
+    <!-- The main library view component -->
+    <script>
+        LIBPLACEHOLDER
+    </script>
     <!-- The main library view compoment -->
-    <script src='./dist/build/librarie.js'></script>
+    <script src='./dist/build/librarie.min.js'></script>
     <!-- uncomment to debug in IE11 (polyfill fetch and promise)
     <script src="//cdn.jsdelivr.net/npm/bluebird@3.7.2/js/browser/bluebird.min.js"></script>
     <script src='https://unpkg.com/whatwg-fetch@3.6.2/dist/fetch.umd.js'></script>
     -->
     <script>
         let jsonUrls = ["loadedTypes", "layoutSpecs"];
-        let downloader = LibraryEntryPoint.CreateJsonDownloader(jsonUrls, function (jsonUrl, jsonObject) {
+        let libController = LibraryEntryPoint.CreateLibraryController();
+        LibraryEntryPoint.CreateJsonDownloader(jsonUrls, function (jsonUrl, jsonObject) {
 
-            let downloaded = downloader.getDownloadedJsonObjects();
+            let downloaded = this.getDownloadedJsonObjects();
             let loadedTypesJson = downloaded["loadedTypes"];
             let layoutSpecsJson = downloaded["layoutSpecs"];
 
-
             if (!loadedTypesJson || (!layoutSpecsJson)) {
                 return; // Not fully downloaded yet, bail.
             }
 
-            let libController = LibraryEntryPoint.CreateLibraryController();
-            libController.on(libController.ItemClickedEventName, function (item) {
-                console.log(item);
+            libController.createLibraryByElementId(
+                "libraryContainerPlaceholder", layoutSpecsJson, loadedTypesJson);
+        });
+
+        var replaceImageDelayTime = 100;
+        let intervalId;
+
+        // Disable the context menu
+        document.oncontextmenu = function () {
+        return false;
+        }
+
+        // Disable zoom by keyboard
+        document.addEventListener("keydown",
+            function(event) {
+                if ((event.ctrlKey === true || event.metaKey === true) &&
+                    (event.which === 61 ||
+                    event.which === 107 ||
+                    event.which === 173 ||
+                    event.which === 109 ||
+                    event.which === 187 ||
+                    event.which === 189)) {
+                        event.preventDefault();
+                    }
+            },
+            false
+        );
+
+        // Disable zoom by mouse wheel
+        document.addEventListener("mousewheel",
+            function(event) {
+                if (event.ctrlKey === true || event.metaKey) {
+                    event.preventDefault();
+                }
+            },
+            false
+        );
+        
+        if(window.chrome.webview) {
+            // //Create library view
+            var libContainer = libController.createLibraryByElementId("libraryContainerPlaceholder");
+            if(refreshLibraryView) {
+                refreshLibraryView(libController);
+            }
+
+            async function replaceImages() {
+                var allimages = document.getElementsByTagName("img");
+                for(const element of allimages){
+                    let currentImage = element;
+                    var src = element.src
+                    if (element.orgSrc != null) {
+                        src = element.orgSrc;
+                    }
+                    //the icon is already set - bail.
+                    if (src.startsWith("data:image")) {
+                        continue;
+                    }
+                    //request the icon from the extension.
+                    var base64String = await window.chrome.webview.hostObjects.bridgeTwoWay.GetBase64StringFromPath(src);
+                    if (currentImage != null) {
+                        currentImage.src = base64String;
+                    }
+                }
+            }
+
+            function refreshLibraryView(libraryController) {
+                window.chrome.webview.postMessage("RefreshLibrary");
+            }
+
+            //set a custom search handler
+            libController.searchLibraryItemsHandler = function (text, callback) {
+                var encodedText = encodeURIComponent(text);
+                //save the callback so we can access from our completion function
+                searchCallback = callback;
+                window.chrome.webview.postMessage(JSON.stringify({"func":"performSearch","data":encodedText}));
+                window.chrome.webview.postMessage(JSON.stringify({"func":"logEventsToInstrumentation","data":["Search",encodedText]}));
+            }
+
+            // Register event handlers for various events on library controller and package controller.
+            libController.on(libController.ItemClickedEventName, function (nodeCreationName) {
+                console.log('Library Node Clicked: ' + nodeCreationName);
+                window.chrome.webview.postMessage(JSON.stringify({"func":"createNode","data":nodeCreationName}));
             });
 
+            //if the user clicks anywhere - reload the images to ensure they are up to date after interactions
+            //which update the currently displayed libraryItems.
+            document.body.addEventListener('click', function () {
+                setTimeout(function () {
+                    replaceImages();
+                }, replaceImageDelayTime);
+                setTimeout(function () {
+                    replaceImages();
+                }, replaceImageDelayTime*5);
+            }, true);
+
             libController.on(libController.ItemMouseEnterEventName, function (arg) {
-                console.log("Data: " + arg.data);
-                console.log("Rect(top, left, bottom, right): " + arg.rect.top + "," + arg.rect.left + "," + arg.rect.bottom + "," + arg.rect.right);
+                window.chrome.webview.postMessage(JSON.stringify({"func":"showNodeTooltip","data":[arg.data,arg.rect.top]}));
             });
 
             libController.on(libController.ItemMouseLeaveEventName, function (arg) {
-                console.log("Data: " + arg.data);
-                console.log("Rect(top, left, bottom, right): " + arg.rect.top + "," + arg.rect.left + "," + arg.rect.bottom + "," + arg.rect.right);
+                window.chrome.webview.postMessage(JSON.stringify({"func":"closeNodeTooltip","data":true}));
             });
 
-            libController.on(libController.ItemSummaryExpandedEventName, function (arg) {
-                console.log(arg.data);
-            });
+            libController.on(libController.SectionIconClickedEventName, function (section) {
+                console.log("Section clicked: " + section);
+                if (section == "Add-ons") {
+                    window.chrome.webview.postMessage(JSON.stringify({"func":"importLibrary","data":""}));
+                }
+            });  
 
-            libController.on(libController.SearchTextUpdatedEventName, function (searchText) {
-                console.log(searchText);
-                return null;
+            libController.on(libController.FilterCategoryEventName, function (item) {
+                var categories = [];
+                item.forEach(function(elem) {
+                        var catString = elem.name + ":" + (elem.checked ? "Selected" : "Unselected");
+                        categories.push(catString);
+                    });
+                    window.chrome.webview.postMessage(JSON.stringify({"func":"logEventsToInstrumentation","data":["Filter-Categories",categories.join(",")]}));
             });
 
-            libController.on(libController.SectionIconClickedEventName, function (sectionText) {
-                console.log(sectionText, "icon clicked");
-                return null;
-            });
-            libController.on(libController.FilterCategoryEventName, function (item) {
-                console.log(item);
+            //This will call the NextStep() function located in the LibraryViewController
+            function nextStepInGuide() {
+                window.chrome.webview.postMessage(JSON.stringify({ "func": "NextStep", "data": "" }));
+            }
+
+        }
+
+        function refreshLibViewFromData(loadedTypes,layoutSpec){
+            var append = false; // Replace existing contents instead of appending.
+            libController.setLoadedTypesJson(JSON.parse(loadedTypes) , append);
+            libController.setLayoutSpecsJson(JSON.parse(layoutSpec) , append);
+            libController?.refreshLibraryView(); // Refresh library view.
+
+            //update image src properties after dom is updated.
+            setTimeout(function () {
+                replaceImages();
+            }, replaceImageDelayTime);
+        }
+
+        var searchCallback = null;
+        function completeSearch(searchLoadedTypes){
+            searchCallback(JSON.parse(searchLoadedTypes));
+        }
+
+        function setLibraryFontSize(fontSize) {
+            document.getElementsByTagName('html')[0].style.fontSize = fontSize + 'px';
+        }
+
+        //This will find a specific div in the html and then it will apply the glow animation on it
+        function highlightLibraryItem(itemName, enableHighlight) {
+            var found_div = null;
+            var libraryItemsText = document.getElementsByClassName("LibraryItemText");
+            for (const libraryItem of libraryItemsText) {
+                if (libraryItem.textContent == itemName) {
+                    found_div = libraryItem.parentNode;
+                    break;
+                }
+            }
+            if (found_div != null) {
+                if (enableHighlight) {
+                    //Validates that the div is not already highlighted
+                    var currentAttibute = found_div.getAttribute("id");
+                    if (currentAttibute == null || !currentAttibute.includes("glow_")) {
+                        glowAnimation(found_div, true);
+                    }                  
+                }
+                else {
+                    glowAnimation(found_div, false);
+                }
+            }
+        }
+
+        //This will execute(or stop) the glow animation in a specific <div> based in the enable parameter
+        function glowAnimation(divElement, enable) {
+            if (enable) {
+                setIdAttribute(divElement);
+                intervalId = window.setInterval(setIdAttribute, 2000, divElement);
+            }
+            else {
+                window.clearInterval(intervalId);
+                divElement.setAttribute("id", "");
+            }
+        }
+
+        //This will change the id of the div that contains the package name so it will apply a glow effect in the border
+        function setIdAttribute(divElement) {
+            if (divElement.id == "glow_active") {
+                divElement.setAttribute("id", "glow_inactive");
+            }
+            else {
+                divElement.setAttribute("id", "glow_active");
+            }
+        }
+
+        //This will subscribe a handler to the div.click event, so when is clicked we will be moved to the next Step
+        function subscribePackageClickedEvent(packageName, enable) {
+            var found_div = findPackageDiv(packageName, "LibraryItemText");
+            if (found_div == null) {
+                return;
+            }
+            if (enable) {
+                found_div.parentNode.parentNode.addEventListener('click', nextStepInGuide);
+            }
+            else {
+                found_div.parentNode.parentNode.removeEventListener('click', nextStepInGuide);
+            }
+        }
+
+        //This will find the <div> that contains the package information
+        function findPackageDiv(packageName, libraryClassName) {
+            var found_div = null;
+            var libraryItemsText = document.getElementsByClassName(libraryClassName);
+            for (const libraryItem of libraryItemsText) {
+                if (libraryItem.textContent.toLowerCase() == packageName.toLowerCase()) {
+                    found_div = libraryItem;
+                    break;
+                }
+            }
+            return found_div;
+        }
+
+        //This will execute a click over a specific <div> that contains the package content
+        function expandPackageDiv(packageName, libraryClassName) {
+            var found_div = findPackageDiv(packageName, libraryClassName);
+            if (found_div == null) {
+                return;
+            }
+            var containerCatDiv = found_div.parentNode.parentNode;
+            var itemBodyContainer = containerCatDiv.getElementsByClassName(libraryClassName)[0];
+            if (!itemBodyContainer.parentElement.parentElement.className.includes('expanded')) {
+                itemBodyContainer.click();
+            }
+        }
+
+        function collapsePackageDiv(packageName, libraryClassName) {
+            var found_div = findPackageDiv(packageName, libraryClassName);
+            if (found_div == null) {
+                return;
+            }
+            var containerCatDiv = found_div.parentNode.parentNode;
+            var itemBodyContainer = containerCatDiv.getElementsByClassName(libraryClassName)[0];
+            if (itemBodyContainer.parentElement.parentElement.className.includes('expanded')) {
+                itemBodyContainer.click();
+            }
+        }
+
+        
+
+        //Set the overlay and the hole
+        function setOverlay(enable) {
+            var tools = document.getElementsByClassName("LibraryItemContainerSection")[0];
+            if (tools == null)
+                return;
+            var addons = document.getElementsByClassName("LibraryItemContainerSection")[1];
+            if (addons == null)
+                return;
+            var searchBar = document.getElementsByClassName("SearchBar")[0];
+            if (searchBar == null)
+                return;
+
+            let children = addons.childNodes;
+            if (children == null || children.lenght == 0)
+                return;
+
+            //Apply a specific style for the <div> depending if the parameter enable is true or false.
+            if (enable) {
+                tools.classList.add("overlay");
+                searchBar.classList.add("overlay");           
+                children[0].classList.add("hole");
+                children[1].classList.add("hole");   
+            }
+            else {
+                tools.classList.remove("overlay");
+                searchBar.classList.remove("overlay");
+                children[0].classList.remove("hole");
+                children[1].classList.remove("hole");
+            }          
+        }
+
+        //get information about the current position of a specific div element, if the WebBrowser is resized the values will change
+        function getDocumentClientRect(divElement) {
+            var targetDiv = findPackageDiv(divElement, "LibraryItemText");
+            if (targetDiv == null) return;
+            var rect = targetDiv.parentNode.getBoundingClientRect();
+            var clientRectDiv = {
+                "width": rect.width,
+                "height": rect.height,
+                "top": rect.top,
+                "bottom": rect.bottom
+            }
+            var documentSize = {
+                "width": document.body.clientWidth,
+                "height": document.body.clientHeight
+            }
+            var locationInfo = {
+                "document": documentSize,
+                "client": clientRectDiv
+            }     
+            return JSON.stringify(locationInfo);
+        }
+
+        //scroll down until the bottom of the page so the AddOns always be visible
+        function scrollToBottom() {
+            document.getElementsByClassName("LibraryItemContainer")[0].scroll(0, document.body.scrollHeight)
+        }
+
+        //This method will be executed when the WebBrowser change its size, so we can update the Popup vertical location that is over the library
+        function bodyResizeEvent() {
+            window.chrome.webview.postMessage(JSON.stringify({ "func": "ResizedEvent", "data": "" }));
+        }
+
+        //This function will be dispatching javaScript keydown events based on Dynamo keydown events
+        function eventDispatcher(eventKeyData) {
+            const kbEvent = new KeyboardEvent('keydown', {
+                bubbles: true,
+                cancelable: true,
+                ...eventKeyData
             });
 
-            libController.createLibraryByElementId(
-                "libraryContainerPlaceholder", layoutSpecsJson, loadedTypesJson);
-        });
-    </script>
+            document.dispatchEvent(kbEvent);
+        }
 
+        //This function will show the overlay over the Library when the Preferences/PackageManagerSearch are opened otherwiser is not visible
+        function fullOverlayVisible(enableOverlay) {
+            if (enableOverlay)
+                document.getElementById("overlay").style.display = "block";
+            else
+                document.getElementById("overlay").style.display = "none";
+        }
+    </script>
 </body>
-
 </html>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 8175f22..3147374 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@dynamods/librariejs",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@dynamods/librariejs",
-      "version": "1.0.1",
+      "version": "1.0.2",
       "license": "MIT",
       "dependencies": {
         "core-js": "^3.36.1",
diff --git a/package.json b/package.json
index 14f90f9..7a33330 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dynamods/librariejs",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Project that contains all hosted contents of Dynamo Windows client",
   "main": "index.js",
   "scripts": {
