diff --git a/index.html b/index.html
index 3d2b9df..f0ee999 100644
--- a/index.html
+++ b/index.html
@@ -5,469 +5,75 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Librarie.js sample page</title>
-    <!-- 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);
-    }
-
-    .overlay {
-        background-color: black;
-        pointer-events: none;
-        opacity: 0.5;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        border: 2px;
-    }
-
-    .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;
-    }
+    <style>
+        body {
+            padding: 0;
+            margin: 0;
+        }
+    </style>
+    </style>
+</head>
 
-    .SearchFilterPanel label.Category > * {
-        margin-top: 0.15rem;
-        vertical-align: top !important;
-    }
+<body>
 
-    #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>
+    <div id="libraryContainerPlaceholder"></div>
 
-<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.min.js'></script>
+    <script src='./dist/build/librarie.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 libController = LibraryEntryPoint.CreateLibraryController();
-        LibraryEntryPoint.CreateJsonDownloader(jsonUrls, function (jsonUrl, jsonObject) {
+        let downloader = LibraryEntryPoint.CreateJsonDownloader(jsonUrls, function (jsonUrl, jsonObject) {
 
-            let downloaded = this.getDownloadedJsonObjects();
+            let downloaded = downloader.getDownloadedJsonObjects();
             let loadedTypesJson = downloaded["loadedTypes"];
             let layoutSpecsJson = downloaded["layoutSpecs"];
 
+
             if (!loadedTypesJson || (!layoutSpecsJson)) {
                 return; // Not fully downloaded yet, bail.
             }
 
-            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;
-                    }
-
-                    if(window.chrome.webview === undefined) return;
-                    //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) {
-                if(window.chrome.webview === undefined) return;
-                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;
-                if(window.chrome.webview === undefined) return;
-                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);
-                if(window.chrome.webview === undefined) return;
-                window.chrome.webview.postMessage(JSON.stringify({"func":"createNode","data":nodeCreationName}));
+            let libController = LibraryEntryPoint.CreateLibraryController();
+            libController.on(libController.ItemClickedEventName, function (item) {
+                console.log(item);
             });
 
-            //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) {
-                if(window.chrome.webview === undefined) return;
-                window.chrome.webview.postMessage(JSON.stringify({"func":"showNodeTooltip","data":[arg.data,arg.rect.top]}));
+                console.log("Data: " + arg.data);
+                console.log("Rect(top, left, bottom, right): " + arg.rect.top + "," + arg.rect.left + "," + arg.rect.bottom + "," + arg.rect.right);
             });
 
             libController.on(libController.ItemMouseLeaveEventName, function (arg) {
-                if(window.chrome.webview === undefined) return;
-                window.chrome.webview.postMessage(JSON.stringify({"func":"closeNodeTooltip","data":true}));
+                console.log("Data: " + arg.data);
+                console.log("Rect(top, left, bottom, right): " + arg.rect.top + "," + arg.rect.left + "," + arg.rect.bottom + "," + arg.rect.right);
             });
 
-            libController.on(libController.SectionIconClickedEventName, function (section) {
-                console.log("Section clicked: " + section);
-                if(window.chrome.webview === undefined) return;
-                if (section == "Add-ons") {
-                    window.chrome.webview.postMessage(JSON.stringify({"func":"importLibrary","data":""}));
-                }
-            });  
-
-            libController.on(libController.FilterCategoryEventName, function (item) {
-                var categories = [];
-                item.forEach(function(elem) {
-                        var catString = elem.name + ":" + (elem.checked ? "Selected" : "Unselected");
-                        categories.push(catString);
-                    });
-                    if(window.chrome.webview === undefined) return;
-                    window.chrome.webview.postMessage(JSON.stringify({"func":"logEventsToInstrumentation","data":["Filter-Categories",categories.join(",")]}));
+            libController.on(libController.ItemSummaryExpandedEventName, function (arg) {
+                console.log(arg.data);
             });
 
-            //This will call the NextStep() function located in the LibraryViewController
-            function nextStepInGuide() {
-                if(window.chrome.webview === undefined) return;
-                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() {
-            if(window.chrome.webview === undefined) return;
-            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.on(libController.SearchTextUpdatedEventName, function (searchText) {
+                console.log(searchText);
+                return null;
             });
 
-            document.dispatchEvent(kbEvent);
-        }
+            libController.on(libController.SectionIconClickedEventName, function (sectionText) {
+                console.log(sectionText, "icon clicked");
+                return null;
+            });
+            libController.on(libController.FilterCategoryEventName, function (item) {
+                console.log(item);
+            });
 
-        //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";
-        }
+            libController.createLibraryByElementId(
+                "libraryContainerPlaceholder", layoutSpecsJson, loadedTypesJson);
+        });
     </script>
+
 </body>
+
 </html>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index d2d6018..caaac8b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@dynamods/librariejs",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@dynamods/librariejs",
-      "version": "1.0.3",
+      "version": "1.0.4",
       "license": "MIT",
       "dependencies": {
         "core-js": "^3.36.1",
@@ -33,6 +33,7 @@
         "enzyme": "^3.11.0",
         "enzyme-adapter-react-16": "^1.15.5",
         "enzyme-to-json": "^3.6.1",
+        "file-loader": "^6.2.0",
         "jest": "^29.6.4",
         "jest-environment-jsdom": "^29.6.4",
         "jest-junit": "^16.0.0",
@@ -4075,6 +4076,58 @@
         "bser": "2.1.1"
       }
     },
+    "node_modules/file-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/file-loader/node_modules/loader-utils": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+      "dev": true,
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/file-loader/node_modules/schema-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
diff --git a/package.json b/package.json
index 6bbf3e7..23bf322 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dynamods/librariejs",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Project that contains all hosted contents of Dynamo Windows client",
   "main": "index.js",
   "scripts": {
@@ -10,7 +10,7 @@
     "build": "cross-env NODE_ENV=production --mode=development webpack",
     "bundle": "cross-env NODE_ENV=production --mode=production webpack",
     "copy": "cp package.json dist/ && cp README.md dist/ && cp -r license_output dist/",
-    "production": "npm run bundle && npm run copy",
+    "production": "npm run bundle && npm run copy && rm -r dist/build/resources",
     "serve": "npm run dev & node ./index.js",
     "lic_direct": "npx @adsk/adsk-npm-license-puller --path . --app-name 'librariejs' --verbose --about-box ./license_output/about-box_direct.html --about-box-type desktop --year 2022 --paos ./license_output/paos_direct.csv",
     "lic_transitive": "npx @adsk/adsk-npm-license-puller --path . --app-name 'librariejs' --verbose --about-box ./license_output/about-box_transitive.html --about-box-type desktop --transitive --year 2022 --paos ./license_output/paos_transitive.csv",
@@ -47,6 +47,7 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "enzyme-to-json": "^3.6.1",
+    "file-loader": "^6.2.0",
     "jest": "^29.6.4",
     "jest-environment-jsdom": "^29.6.4",
     "jest-junit": "^16.0.0",
diff --git a/webpack.config.js b/webpack.config.js
index a850e77..c4665d1 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -19,10 +19,11 @@ module.exports = {
     target: "web",
     output: {
         filename: productionBuild ? "librarie.min.js" : "librarie.js",
-        path: path.join(__dirname, '/dist/build'),
+        path: path.join(__dirname, '/dist/build/'),
         publicPath: "./dist/build/",
         libraryTarget: "umd",
         library: "LibraryEntryPoint",
+        clean:  true
     },
     optimization:{
         minimize: !!productionBuild,
