diff --git a/.browserslistrc b/.browserslistrc
index 342360874..b15c7fae5 100644
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -9,4 +9,4 @@
 last 2 versions
 Firefox ESR
 not dead
-IE 9-11 # For IE 9-11 support, remove 'not'.
\ No newline at end of file
+not IE 9-11 # For IE 9-11 support, remove 'not'.
diff --git a/.gitignore b/.gitignore
index ecdde8d2a..d08c23af6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -53,6 +53,7 @@ static/
 .vscode/
 
 package-lock.json
+yarn.lock
 src/config.json
 src/config-template.json
 src/assets/icons/*
diff --git a/.wvr-ud/static-assets/wud.js b/.wvr-ud/static-assets/wud.js
deleted file mode 100644
index 2476bfc0e..000000000
--- a/.wvr-ud/static-assets/wud.js
+++ /dev/null
@@ -1,238 +0,0 @@
-let componentManifest = JSON.parse($('#expamples-manifest').html());
-let editorElem = document.querySelector('#editor');
-let previewElem = document.querySelector('#preview');
-let desciptionElem = document.querySelector('#desciption');
-let templateElem = document.querySelector('#template');
-let activeExampleNameElem = document.querySelector('#active-component-name');
-let componentCollectionsList = document.querySelector('#component-collections');
-let componentCollectionTemplate = document.querySelector('#component-collection-template');
-let componentLinkTemplate = document.querySelector('#component-link-template');
-let editor;
-let scssEditor;
-let templateEditor;
-let sourceEditor;
-let components = [];
-let activeExample;
-let setupPromise;
-
-let setupEditor = () => {
-  editor = ace.edit("editor");
-  editor.getSession().setUseWorker(false);
-  editor.setTheme("ace/theme/monokai");
-  editor.getSession().setMode("ace/mode/html");
-  let debounce;
-  editor.getSession().on('change', function(e) {
-    if(debounce) clearTimeout(debounce);
-    document.querySelector("main").classList.add('loading');
-    debounce = setTimeout(function() {
-      if(activeExample.querySelector('snippet').rawHTML !== editor.getSession().getValue()) {
-        activeExample.querySelector('snippet').rawHTML = editor.getSession().getValue();
-        before = editor.selection.toJSON();
-        loadExample(activeExample);
-        editor.selection.fromJSON(before);
-      }
-      document.querySelector("main").classList.remove('loading');
-    }, 500);
-  });
-  templateEditor = ace.edit("template-editor");
-  templateEditor.setOptions({
-    readOnly: true,
-    highlightActiveLine: false,
-    highlightGutterLine: false,
-    theme: 'ace/theme/monokai',
-    mode: 'ace/mode/html'
-  });
-  templateEditor.renderer.$cursorLayer.element.style.opacity=0;
-  scssEditor = ace.edit("scss-editor");
-  scssEditor.setOptions({
-    readOnly: true,
-    highlightActiveLine: false,
-    highlightGutterLine: false,
-    theme: 'ace/theme/monokai',
-    mode: 'ace/mode/scss'
-  });
-  scssEditor.renderer.$cursorLayer.element.style.opacity=0;
-  sourceEditor = ace.edit("source-editor");
-  sourceEditor.setOptions({
-    readOnly: true,
-    highlightActiveLine: false,
-    highlightGutterLine: false,
-    theme: 'ace/theme/monokai',
-    mode: 'ace/mode/typescript'
-  });
-  sourceEditor.renderer.$cursorLayer.element.style.opacity=0;
-}
-
-let setupComponentLinks = ()=>{
-  setupPromise = new Promise((resolve, reject) => {
-    let componentManifestKeys = Object.keys(componentManifest);
-    interationCount = 0;
-    componentManifestKeys.forEach(componentName=>{
-      let componentUri = componentManifest[componentName];
-      let xhr = new XMLHttpRequest();
-      xhr.onload = function() {
-        let examples = [];
-        this.responseXML.querySelectorAll('example').forEach(example=>{
-          examples.push(example);
-        });
-        components.push({
-          name: componentName,
-          examples: examples
-        });
-        interationCount++;
-        if(interationCount===componentManifestKeys.length) {
-          resolve();
-        }
-      }
-      xhr.open( 'GET', componentUri );
-      xhr.responseType = 'document';
-      xhr.send();
-    });
-  });
-  document.querySelector('.expand-collapse-all').addEventListener('click', e=>{
-    e.preventDefault();
-
-    e.currentTarget.classList.contains('open') ?
-    $('.component-links').collapse('hide') :
-    $('.component-links').collapse('show')
-    e.currentTarget.classList.contains('open') ?
-    e.currentTarget.classList.remove('open') :
-    e.currentTarget.classList.add('open')
-  });
-}
-
-let loadExample = (example) => {
-  let snippet = example.querySelector('snippet').rawHTML;
-  let desciption = example.querySelector('desciption').innerHTML;
-  let componentScss = example.querySelector('component-scss').innerHTML;
-  let componentSource = example.querySelector('component-source').innerHTML;
-  let componentTemplate = example.querySelector('component-template').rawTemplateHTML;
-  document.querySelector('#copy-btn').setAttribute('data-clipboard-text', snippet);
-  activeExampleNameElem.innerText = example.getAttribute('name');
-  previewElem.innerHTML = snippet;
-  desciptionElem.innerHTML = desciption;
-  scssEditor.getSession().setValue(componentScss);
-  templateEditor.getSession().setValue(componentTemplate);
-  sourceEditor.getSession().setValue(componentSource);
-  editor.getSession().setValue(snippet);
-};
-
-let renderComponentLinks = componentsToRender => {
-  componentsToRender.sort();
-  componentsToRender.forEach(component=> {
-    let componentCollectionClone = componentCollectionTemplate.content.cloneNode(true);
-    let componentLinksElem = componentCollectionClone.querySelector('ul.component-links');
-    let componentCollectionLink = componentCollectionClone.querySelector('.component-collection-link')
-    componentCollectionClone.querySelector('.component-collection-name').innerText = component.name;
-    componentCollectionLink.setAttribute('href', `#${component.name}`);
-    $(document).on('show.bs.collapse hide.bs.collapse', componentCollectionLink, function (e) {
-        let ccl = e.target.closest('.nav-item');
-        e.type === 'hide' ?
-        ccl.classList.add('closed') :
-        ccl.classList.remove('closed');
-    });
-    componentCollectionClone.querySelector('.component-links').setAttribute('id', component.name);
-    component.examples.forEach(example=>{
-      let componentLinkTemplateClone = componentLinkTemplate.content.cloneNode(true);
-      componentLinkTemplateClone.querySelector('a.nav-link').setAttribute('href', `#${example.getAttribute('name').replace(/\s/g,'')}`);
-      componentLinkTemplateClone.querySelector('.component-link-name').innerText = example.getAttribute('name');
-      componentLinkTemplateClone.querySelector('a.nav-link').addEventListener('click', function(e) {
-        document.querySelectorAll('a.component-link').forEach(navLink=>navLink.classList.remove('active'));
-        e.target.closest('a.component-link').classList.add('active');
-        component.examples.forEach(example=>{
-          if(example.getAttribute('name').trim()===e.target.innerText.trim()) {
-            activeExample=example;
-            activeExample.querySelector('snippet').rawHTML = activeExample.querySelector('snippet').innerHTML;
-            activeExample.querySelector('component-template').rawTemplateHTML = activeExample.querySelector('component-template').innerHTML;
-            loadExample(example);
-          }
-        });
-      });
-      componentLinksElem.appendChild(componentLinkTemplateClone);
-      componentCollectionsList.appendChild(componentCollectionClone);
-    });
-  });
-}
-
-let loadInitialContent = () => {
-  let currentUrl = document.URL;
-  let urlParts   = currentUrl.split('#');
-  let anchor = (urlParts.length > 1) ? urlParts[1] : null;
-  if(anchor) {
-    let activeComponentLink = document.querySelector(`a.nav-link[href='#${anchor}']`);
-    $(activeComponentLink.closest('.component-links')).collapse('show');
-    activeComponentLink.click();
-  }
-}
-
-let setupClipboard = () => {
-  $('button').tooltip({
-    trigger: 'click',
-    placement: 'bottom'
-  });
-  function setTooltip(message) {
-    $('button').tooltip('hide')
-      .attr('data-original-title', message)
-      .tooltip('show');
-  }
-  function hideTooltip() {
-    setTimeout(function() {
-      $('button').tooltip('hide');
-    }, 1000);
-  }
-  var clipboard = new ClipboardJS('#copy-btn');
-  clipboard.on('success', function(e) {
-    setTooltip('Copied!');
-    hideTooltip();
-  });
-  clipboard.on('error', function(e) {
-    setTooltip('Failed!');
-    hideTooltip();
-  });
-}
-
-// Setup Tabs
-const setupTabs = () => {
-  // Tab funcitonality
-  $('#tabs a').on('click', function (e) {
-    e.preventDefault();
-    $(this).tab('show');
-    loadExample(activeExample, true);
-  });
-}
-
-// Setup Search
-const setUpSearch = () => {
-  let search = searchQuery => {
-    renderComponentLinks(components.filter(c=>{
-      match = false;
-      c.examples.forEach(e=>{
-        if(!match)
-          match = e.getAttribute('name').toLowerCase().includes(searchQuery.toLowerCase());
-      });
-      return match;
-    }));
-    if($('.component-links').length !== components.length) {
-      $('.component-links').collapse('show');
-    } else {
-      $('.component-links').collapse('hide');
-      loadInitialContent();
-    }
-  }
-
-  $('.search').on("keyup", $.debounce(500, e=>{
-    componentCollectionsList.innerHTML = '';
-    search(e.target.value);
-  }));
-}
-
-setupEditor();
-setupComponentLinks();
-setupClipboard();
-setupTabs();
-setUpSearch();
-
-setupPromise.then(()=>{
-  renderComponentLinks(components);
-  loadInitialContent();
-});
diff --git a/angular.json b/angular.json
index 3678f4657..08024220d 100644
--- a/angular.json
+++ b/angular.json
@@ -15,7 +15,7 @@
       "prefix": "tl",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "ngx-build-plus:browser",
           "options": {
             "preserveSymlinks": true,
             "outputPath": "dist/tl-components",
@@ -33,14 +33,10 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": [
-              {
-                "input": "node_modules/document-register-element/build/document-register-element.js",
-                "inject": true
-              }
-            ],
+            "scripts": [],
             "allowedCommonJsDependencies": [
-              "css-element-queries"
+              "css-element-queries",
+              "handlebars/dist/cjs/handlebars"
             ]
           },
           "configurations": {
@@ -63,20 +59,15 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "2.2mb",
+                  "maximumWarning": "3mb",
                   "maximumError": "4mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "250kb",
-                  "maximumError": "500kb"
                 }
               ]
             }
           }
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "ngx-build-plus:dev-server",
           "options": {
             "browserTarget": "tamu-library-components:build"
           },
@@ -93,7 +84,7 @@
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "ngx-build-plus:karma",
           "options": {
             "main": "src/test.ts",
             "polyfills": "src/polyfills.ts",
diff --git a/package.json b/package.json
index f988b168c..d7c62c307 100755
--- a/package.json
+++ b/package.json
@@ -1,12 +1,12 @@
 {
   "name": "tamu-library-components",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "private": true,
   "config": {
     "DOCKER_SERVER": "10.55.134.48/weaver/tl-components"
   },
   "scripts": {
-    "build": "ng build --prod --output-hashing none",
+    "build": "ng build --prod --single-bundle --output-hashing none",
     "build:clean": "npm run clean && npm run build",
     "build:docs-development": "compodoc --output ./static/tamu-library-components/docs/development -p ./src/tsconfig.docs.json",
     "build:docs-setup": "node scripts/build-tl-components-docs.js",
@@ -40,66 +40,66 @@
     "test:watch": "ng test"
   },
   "dependencies": {
-    "@angular/animations": "^11.0.2",
-    "@angular/common": "^11.0.2",
-    "@angular/compiler": "^11.0.2",
-    "@angular/core": "^11.0.2",
-    "@angular/elements": "^11.0.2",
-    "@angular/forms": "^11.0.2",
-    "@angular/localize": "^11.0.2",
-    "@angular/platform-browser": "^11.0.2",
-    "@angular/platform-browser-dynamic": "^11.0.2",
-    "@angular/router": "^11.0.2",
-    "@ng-bootstrap/ng-bootstrap": "^7.0.0",
-    "@ngrx/effects": "^10.0.1",
-    "@ngrx/entity": "^10.0.1",
-    "@ngrx/store": "^10.0.1",
-    "@ngrx/store-devtools": "^10.0.1",
-    "@wvr/elements": "1.7.1",
-    "bootstrap": "^4.5.2",
-    "classlist.js": "^1.1.20150312",
-    "console-stamp": "^0.2.9",
+    "@angular/animations": "^11.0.3",
+    "@angular/common": "^11.0.3",
+    "@angular/compiler": "^11.0.3",
+    "@angular/core": "^11.0.3",
+    "@angular/elements": "^11.0.3",
+    "@angular/forms": "^11.0.3",
+    "@angular/localize": "^11.0.3",
+    "@angular/platform-browser": "^11.0.3",
+    "@angular/platform-browser-dynamic": "^11.0.3",
+    "@angular/router": "^11.0.3",
+    "@ng-bootstrap/ng-bootstrap": "^8.0.0",
+    "@ngrx/effects": "^10.1.0",
+    "@ngrx/entity": "^10.1.0",
+    "@ngrx/store": "^10.1.0",
+    "@ngrx/store-devtools": "^10.1.0",
+    "@wvr/elements": "1.7.2",
+    "bootstrap": "^4.5.3",
     "document-register-element": "^1.14.5",
     "handlebars": "^4.7.6",
-    "ie11-custom-properties": "^4.1.0",
     "jsdom": "^16.4.0",
     "karma-viewport": "^1.0.7",
-    "rxjs": "~6.6.2",
-    "tslib": "^2.0.0",
+    "ng-lazyload-image": "^9.1.0",
+    "ngx-build-plus": "^10.1.1",
+    "rxjs": "~6.6.3",
+    "tslib": "^2.0.3",
     "web-animations-js": "^2.3.2",
-    "zone.js": "~0.10.3"
+    "zone.js": "~0.11.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1100.2",
-    "@angular-devkit/schematics": "^11.0.2",
-    "@angular/cli": "^11.0.2",
-    "@angular/compiler-cli": "^11.0.2",
-    "@angular/language-service": "^11.0.2",
+    "@angular-devkit/build-angular": "~0.1100.3",
+    "@angular-devkit/schematics": "^11.0.3",
+    "@angular/cli": "^11.0.3",
+    "@angular/compiler-cli": "^11.0.3",
+    "@angular/language-service": "^11.0.3",
     "@compodoc/compodoc": "^1.1.11",
-    "@lhci/cli": "^0.5.0",
-    "@types/jasmine": "~3.6.0",
+    "@lhci/cli": "^0.6.1",
+    "@types/jasmine": "~3.6.2",
     "@types/jasminewd2": "~2.0.8",
-    "@types/node": "^14.6.0",
+    "@types/node": "^14.14.10",
     "angular-tslint-rules": "^1.20.4",
-    "codelyzer": "^6.0.0",
+    "codelyzer": "^6.0.1",
     "concat": "^1.0.3",
+    "console-stamp": "^0.2.9",
     "coveralls": "^3.1.0",
-    "dotenv-override-true": "^6.2.1",
+    "dotenv-override-true": "^6.2.2",
     "glob": "^7.1.6",
     "jasmine-core": "~3.6.0",
-    "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~5.1.1",
+    "jasmine-spec-reporter": "~6.0.0",
+    "karma": "~5.2.3",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.3",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
-    "lighthouse": "^6.2.0",
-    "lighthouse-badges": "^1.0.33",
+    "karma-jasmine": "~4.0.1",
+    "karma-jasmine-html-reporter": "^1.5.4",
+    "lighthouse": "^6.5.0",
+    "lighthouse-badges": "^1.0.37",
     "protractor": "~7.0.0",
     "rimraf": "^3.0.2",
     "shelljs": "^0.8.4",
     "static-server": "^2.2.1",
-    "ts-node": "~9.0.0",
+    "ts-node": "~9.1.0",
     "tslint": "~6.1.3",
     "typescript": "~4.0.5"
   }
diff --git a/scripts/build-tl-components-configuration.js b/scripts/build-tl-components-configuration.js
index 3624706e1..a3428ffd3 100644
--- a/scripts/build-tl-components-configuration.js
+++ b/scripts/build-tl-components-configuration.js
@@ -26,7 +26,7 @@ if(fs.existsSync('./dist')) {
 
 if(fs.existsSync('./static')) {
   fs.writeFile('./static/config.json', configTemplate);
-  // fs.writeFile('./static/tamu-library-components/docs/usage/config.json', configTemplate);
+  fs.writeFile('./static/tamu-library-components/docs/usage/config.json', configTemplate);
 }
 
 fs.writeFile('./src/config.json', configTemplate);
\ No newline at end of file
diff --git a/scripts/build-tl-components.js b/scripts/build-tl-components.js
index 743b00d7c..b4a3517e9 100644
--- a/scripts/build-tl-components.js
+++ b/scripts/build-tl-components.js
@@ -4,25 +4,28 @@ const fs = require('fs-extra');
 const concat = require('concat');
 const cp = require('child_process');
 
+const componentsPath = 'dist/tl-components';
+
 const assetPath = 'dist/tl-components';
 const bundlePath = 'dist/bundle';
 
 cp.fork(__dirname + '/build-tl-config-template.js');
 
 (async function build() {
+
+  // options: es5 and es2015
+  const esv = 'es2015';
+
   const files = [
-    'dist/tl-components/runtime-es5.js',
-    'dist/tl-components/polyfills-es5.js',
-    'dist/tl-components/styles-es5.js',
-    'dist/tl-components/scripts.js',
-    // 'dist/tl-components/vendor-es5.js',
-    'dist/tl-components/main-es5.js'
+    `${componentsPath}/polyfills-${esv}.js`,
+    `${componentsPath}/styles-${esv}.js`,
+    `${componentsPath}/main-${esv}.js`
   ];
 
   fs.ensureDir(bundlePath);
 
   await concat(files, `${bundlePath}/tl-components.js`);
-  fs.copy('dist/tl-components/assets', "dist/static/docs/usage/assets");
+  fs.copy(`${assetPath}/assets`, "dist/static/docs/usage/assets");
   fs.copy(`${assetPath}/assets`, `${bundlePath}/assets`);
 
 })();
diff --git a/src/app/shared/styles/tl-encapsulated.scss b/src/app/shared/styles/tl-encapsulated.scss
index e88de0f2a..cc2036fac 100644
--- a/src/app/shared/styles/tl-encapsulated.scss
+++ b/src/app/shared/styles/tl-encapsulated.scss
@@ -1,8 +1,5 @@
-@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
-
-@import '~bootstrap/scss/bootstrap.scss';
-
+@import "~bootstrap/scss/bootstrap.scss";
 
 .wvr-hidden {
-  display: none!important;
+  display: none !important;
 }
diff --git a/src/app/tl-alert/tl-alert.component.ts b/src/app/tl-alert/tl-alert.component.ts
index f36c71b47..411d232a1 100644
--- a/src/app/tl-alert/tl-alert.component.ts
+++ b/src/app/tl-alert/tl-alert.component.ts
@@ -1,10 +1,11 @@
-import { Component, Injector, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Injector, Input } from '@angular/core';
 import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';
 
 @Component({
   selector: 'tl-alert-component',
   templateUrl: './tl-alert.component.html',
-  styleUrls: ['./tl-alert.component.scss']
+  styleUrls: ['./tl-alert.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Default
 })
 export class TlAlertComponent extends TamuAbstractBaseComponent {
 
diff --git a/src/app/tl-button/tl-button.component.ts b/src/app/tl-button/tl-button.component.ts
index 60eeb854d..9585b125e 100644
--- a/src/app/tl-button/tl-button.component.ts
+++ b/src/app/tl-button/tl-button.component.ts
@@ -1,10 +1,11 @@
-import { Component, Injector, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Injector, Input } from '@angular/core';
 import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';
 
 @Component({
   selector: 'tl-button-component',
   templateUrl: './tl-button.component.html',
-  styleUrls: ['./tl-button.component.scss']
+  styleUrls: ['./tl-button.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Default
 })
 export class TlButtonComponent extends TamuAbstractBaseComponent {
 
diff --git a/src/app/tl-card/tl-card.component.html b/src/app/tl-card/tl-card.component.html
index 55c40e104..b7fbb5171 100644
--- a/src/app/tl-card/tl-card.component.html
+++ b/src/app/tl-card/tl-card.component.html
@@ -1,7 +1,7 @@
 <wvr-card-component
-[themeVariant]="themeVariant"
-[panelFormat]="panelFormat"
-[selectorPrefix]="'tl'">
+  [themeVariant]="themeVariant"
+  [panelFormat]="panelFormat"
+  [selectorPrefix]="'tl'">
   <ng-content></ng-content>
   <ng-content select="tl-card-header" ngProjectAs="wvre-card-header"></ng-content>
   <ng-content select="tl-card-title" ngProjectAs="wvre-card-title"></ng-content>
diff --git a/src/app/tl-card/tl-card.component.ts b/src/app/tl-card/tl-card.component.ts
index 0d280b3ac..f90dd48ee 100644
--- a/src/app/tl-card/tl-card.component.ts
+++ b/src/app/tl-card/tl-card.component.ts
@@ -1,10 +1,11 @@
-import { Component, Injector, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Injector, Input } from '@angular/core';
 import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';
 
 @Component({
   selector: 'tl-card-component',
   templateUrl: './tl-card.component.html',
-  styleUrls: ['./tl-card.component.scss']
+  styleUrls: ['./tl-card.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Default
 })
 export class TlCardComponent extends TamuAbstractBaseComponent {
 
diff --git a/src/app/tl-drop-down/tl-drop-down.component.ts b/src/app/tl-drop-down/tl-drop-down.component.ts
index 4be234c85..75f15d229 100644
--- a/src/app/tl-drop-down/tl-drop-down.component.ts
+++ b/src/app/tl-drop-down/tl-drop-down.component.ts
@@ -1,10 +1,11 @@
-import { Component, HostBinding, Injector, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostBinding, Injector, Input } from '@angular/core';
 import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';
 
 @Component({
   selector: 'tl-drop-down-component',
   templateUrl: './tl-drop-down.component.html',
-  styleUrls: ['./tl-drop-down.component.scss']
+  styleUrls: ['./tl-drop-down.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Default
 })
 export class TlDropDownComponent extends TamuAbstractBaseComponent {
 
diff --git a/src/app/tl-footer/tl-footer.component.ts b/src/app/tl-footer/tl-footer.component.ts
index 8cd54cc34..d8902eaee 100644
--- a/src/app/tl-footer/tl-footer.component.ts
+++ b/src/app/tl-footer/tl-footer.component.ts
@@ -1,4 +1,4 @@
-import { Component, Injector, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Injector, ViewEncapsulation } from '@angular/core';
 import { Link } from '../shared/link';
 import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';
 
@@ -10,7 +10,8 @@ import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component'
   selector: 'tl-footer-component',
   templateUrl: './tl-footer.component.html',
   styleUrls: ['./tl-footer.component.scss'],
-  encapsulation: ViewEncapsulation.ShadowDom
+  encapsulation: ViewEncapsulation.ShadowDom,
+  changeDetection: ChangeDetectionStrategy.Default
 })
 export class TamuFooterComponent extends TamuAbstractBaseComponent {
 
diff --git a/src/app/tl-header/tl-header.component.html b/src/app/tl-header/tl-header.component.html
index 5e8396e21..553acf994 100644
--- a/src/app/tl-header/tl-header.component.html
+++ b/src/app/tl-header/tl-header.component.html
@@ -227,41 +227,41 @@
       <wvre-dropdown-menu>
           <wvre-dropdown-menu-item>
             <a href="http://askus.library.tamu.edu/">
-              <img alt="AskUs logo" height="80px" src="//library.tamu.edu/assets/images/askus.png">
+              <img alt="AskUs logo" height="80px" [lazyLoad]="askUsSrc">
             </a>
           </wvre-dropdown-menu-item>
           <wvre-dropdown-menu-item>
-            <tl-icon set="bootstrap" name="arrow-right-circle"></tl-icon>
+            <tl-icon set="bootstrap-icons" name="arrow-right-circle"></tl-icon>
             <a href="http://askus.library.tamu.edu/" class="helpLink">
               <wvr-text-component value=" Chat with us "></wvr-text-component>
             </a>
           </wvre-dropdown-menu-item>
           <wvre-dropdown-menu-item>
-            <tl-icon set="bootstrap" name="arrow-right-circle"></tl-icon>
+            <tl-icon set="bootstrap-icons" name="arrow-right-circle"></tl-icon>
             <a href="//library.tamu.edu/about/phone.html" class="helpLink">
               <wvr-text-component value=" Call us "></wvr-text-component>
             </a>
           </wvre-dropdown-menu-item>
           <wvre-dropdown-menu-item>
-            <tl-icon set="bootstrap" name="arrow-right-circle"></tl-icon>
+            <tl-icon set="bootstrap-icons" name="arrow-right-circle"></tl-icon>
             <a href="sms:9792561091" class="helpLink">
               <wvr-text-component value=" Text us @ 979-256-1091 "></wvr-text-component>
             </a>
           </wvre-dropdown-menu-item>
           <wvre-dropdown-menu-item>
-            <tl-icon set="bootstrap" name="arrow-right-circle"></tl-icon>
+            <tl-icon set="bootstrap-icons" name="arrow-right-circle"></tl-icon>
             <a href="https://askus.library.tamu.edu/contact/index" class="helpLink">
               <wvr-text-component value=" Email us "></wvr-text-component>
             </a>
           </wvre-dropdown-menu-item>
           <wvre-dropdown-menu-item>
-            <tl-icon set="bootstrap" name="arrow-right-circle"></tl-icon>
+            <tl-icon set="bootstrap-icons" name="arrow-right-circle"></tl-icon>
             <a href="http://askus.library.tamu.edu/" class="helpLink">
               <wvr-text-component value=" FAQs "></wvr-text-component>
             </a>
           </wvre-dropdown-menu-item>
           <wvre-dropdown-menu-item>
-            <tl-icon set="bootstrap" name="arrow-right-circle"></tl-icon>
+            <tl-icon set="bootstrap-icons" name="arrow-right-circle"></tl-icon>
             <a href="https://askus.library.tamu.edu/contact/index" class="helpLink">
               <wvr-text-component value=" Report a problem "></wvr-text-component>
             </a>
diff --git a/src/app/tl-header/tl-header.component.scss b/src/app/tl-header/tl-header.component.scss
index 7ed7b356d..89555913a 100644
--- a/src/app/tl-header/tl-header.component.scss
+++ b/src/app/tl-header/tl-header.component.scss
@@ -210,7 +210,7 @@
       :hover wvre-dropdown-btn {
         color: white;
         svg {
-          color: white;
+          color: white
         }
       }
 
diff --git a/src/app/tl-header/tl-header.component.ts b/src/app/tl-header/tl-header.component.ts
index 13747cc81..1398ea154 100644
--- a/src/app/tl-header/tl-header.component.ts
+++ b/src/app/tl-header/tl-header.component.ts
@@ -1,17 +1,19 @@
-import { Component, Inject, Injector, Input, ViewEncapsulation } from '@angular/core';
-import { AppConfig, APP_CONFIG } from '@wvr/elements';
+import { ChangeDetectionStrategy, Component, Injector, Input, ViewEncapsulation } from '@angular/core';
 import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';
 
 @Component({
   selector: 'tl-header-component',
   templateUrl: './tl-header.component.html',
   styleUrls: ['./tl-header.component.scss'],
-  encapsulation: ViewEncapsulation.ShadowDom
+  encapsulation: ViewEncapsulation.ShadowDom,
+  changeDetection: ChangeDetectionStrategy.Default
 })
 export class TamuHeaderComponent extends TamuAbstractBaseComponent {
 
   /** This is a URL pointing to the location of the logo. */
-  logoSrc =  `${this.appConfig.assetsUrl}/icons/tl/tamu-logo.svg`;
+  logoSrc = `${this.appConfig.assetsUrl}/icons/tl/tamu-logo.svg`;
+
+  askUsSrc = `${this.appConfig.assetsUrl}/images/askus.png`;
 
   /** The text value to be displayed beside the TAMU logo. */
   logoText = ' Texas A&M University Libraries';
diff --git a/src/app/tl-icon/tl-icon.component.ts b/src/app/tl-icon/tl-icon.component.ts
index 7b5376e2a..23abc2cba 100644
--- a/src/app/tl-icon/tl-icon.component.ts
+++ b/src/app/tl-icon/tl-icon.component.ts
@@ -1,10 +1,11 @@
-import { AfterContentInit, Component, Injector, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Injector, Input } from '@angular/core';
 import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';
 
 @Component({
   selector: 'tl-icon-component',
   templateUrl: './tl-icon.component.html',
-  styleUrls: ['./tl-icon.component.scss']
+  styleUrls: ['./tl-icon.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Default
 })
 export class TlIconComponent extends TamuAbstractBaseComponent {
 
diff --git a/src/app/tl-icon/tl-icon.component.ud-examples.html b/src/app/tl-icon/tl-icon.component.ud-examples.html
index 486d1abed..b2e782b9d 100644
--- a/src/app/tl-icon/tl-icon.component.ud-examples.html
+++ b/src/app/tl-icon/tl-icon.component.ud-examples.html
@@ -6,7 +6,7 @@
     
     <tl-icon set="tl" name="weaver-w" color="#500000" size="34px" hidden-in-mobile="true"></tl-icon>
     
-    <tl-icon set="bootstrap" name="arrow-right-circle" size="32px" animate="{click: 'rotateToggle'}"></tl-icon>
+    <tl-icon set="bootstrap-icons" name="arrow-right-circle" size="32px" animate="{click: 'rotateToggle'}"></tl-icon>
 
   </snippet>
 </example>
diff --git a/src/app/tl-it-works/tl-it-works.component.ts b/src/app/tl-it-works/tl-it-works.component.ts
index 86646d3f5..9e9ec3c30 100644
--- a/src/app/tl-it-works/tl-it-works.component.ts
+++ b/src/app/tl-it-works/tl-it-works.component.ts
@@ -1,11 +1,12 @@
-import { Component, Injector, Input, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Injector, Input, ViewEncapsulation } from '@angular/core';
 import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';
 
 @Component({
   selector: 'tl-it-works-component',
   templateUrl: './tl-it-works.component.html',
   styleUrls: ['./tl-it-works.component.scss'],
-  encapsulation: ViewEncapsulation.ShadowDom
+  encapsulation: ViewEncapsulation.ShadowDom,
+  changeDetection: ChangeDetectionStrategy.Default
 })
 export class TamuItWorksComponent extends TamuAbstractBaseComponent {
 
diff --git a/src/app/tl-lib.module.ts b/src/app/tl-lib.module.ts
index 8d6a4541c..265f722e1 100644
--- a/src/app/tl-lib.module.ts
+++ b/src/app/tl-lib.module.ts
@@ -1,7 +1,7 @@
 import { CUSTOM_ELEMENTS_SCHEMA, Injector, NgModule } from '@angular/core';
-import { createCustomElement } from '@angular/elements';
 import { BrowserModule } from '@angular/platform-browser';
-import { WvrLibModule } from '@wvr/elements';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { registerCustomElements, showHiddentContent, WvrColorPreviewComponent, WvrCoreModule, WvrListComponent, WvrListItemComponent, WvrManifestComponent, WvrManifestEntryComponent, WvrNavLiComponent, WvrSharedModule, WvrTextComponent, WvrThemeComponent, wvrTimeout } from '@wvr/elements';
 import { TlAlertComponent } from './tl-alert/tl-alert.component';
 import { TlButtonComponent } from './tl-button/tl-button.component';
 import { TlCardComponent } from './tl-card/tl-card.component';
@@ -13,11 +13,21 @@ import { TamuItWorksComponent } from './tl-it-works/tl-it-works.component';
 import { TlMegaMenuSectionComponent } from './tl-mega-menu/tl-mega-menu-section/tl-mega-menu-section.component';
 import { TlMegaMenuComponent } from './tl-mega-menu/tl-mega-menu.component';
 import { TamuNavListComponent } from './tl-nav-list/tl-nav-list.component';
-import { TlTabsComponent } from './tl-tabs/tl-tabs.component';
 import { TlTabComponent } from './tl-tabs/tl-tab/tl-tab.component';
+import { TlTabsComponent } from './tl-tabs/tl-tabs.component';
 
 /** This property contains a list of TAMU components and the selector tags. */
-const elements = [
+const TL_ELEMENTS = [
+  // required weaver elements
+  { component: WvrColorPreviewComponent, selector: 'wvre-color-preview' },
+  { component: WvrListComponent, selector: 'wvre-list' },
+  { component: WvrListItemComponent, selector: 'wvre-list-item' },
+  { component: WvrNavLiComponent, selector: 'wvre-nav-li' },
+  { component: WvrManifestComponent, selector: 'wvre-manifest' },
+  { component: WvrManifestEntryComponent, selector: 'wvre-manifest-entry' },
+  { component: WvrTextComponent, selector: 'wvre-text' },
+  { component: WvrThemeComponent, selector: 'wvre-theme' },
+  // tamu library elements
   { component: TlAlertComponent, selector: 'tl-alert' },
   { component: TlButtonComponent, selector: 'tl-button' },
   { component: TlCardComponent, selector: 'tl-card' },
@@ -34,7 +44,7 @@ const elements = [
 ];
 
 /** This property contains a list of TAMU components classes. */
-const components = [
+const TL_COMPONENTS = [
   TlAlertComponent,
   TlButtonComponent,
   TlCardComponent,
@@ -53,20 +63,18 @@ const components = [
 /** The main module for the TAMU Compnent library. */
 @NgModule({
   imports: [
+    BrowserAnimationsModule,
     BrowserModule,
-    WvrLibModule
-  ],
-  exports: [
-    ...components
+    WvrSharedModule,
+    WvrCoreModule
   ],
+  exports: [],
   providers: [],
   declarations: [
-    ...components
+    ...TL_COMPONENTS
   ],
   bootstrap: [],
-  entryComponents: [
-    ...components
-  ],
+  entryComponents: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class TamuLibModule {
@@ -76,16 +84,9 @@ export class TamuLibModule {
   }
 
   ngDoBootstrap(): void {
-    elements.forEach(element => {
-      try {
-        customElements.define(element.selector, createCustomElement(element.component, {
-          injector: this.injector
-         }));
-      } catch (e) {
-        console.warn(e);
-      }
-    });
-    setTimeout(() => {
+    registerCustomElements(this.injector, TL_ELEMENTS);
+    showHiddentContent(this.injector);
+    wvrTimeout(() => {
       document.querySelector('body').style.display = 'block';
     });
   }
diff --git a/src/app/tl-mega-menu/tl-mega-menu-section/tl-mega-menu-section.component.html b/src/app/tl-mega-menu/tl-mega-menu-section/tl-mega-menu-section.component.html
index c1d86a6f8..7d72b24df 100644
--- a/src/app/tl-mega-menu/tl-mega-menu-section/tl-mega-menu-section.component.html
+++ b/src/app/tl-mega-menu/tl-mega-menu-section/tl-mega-menu-section.component.html
@@ -2,10 +2,10 @@
   *ngIf="!viewAllHref"
   (click)="toggleOpenClose()">
   {{sectionTitle}}
-  <tl-icon *ngIf="isMobileLayout" set="bootstrap" name="chevron-right"></tl-icon>
+  <tl-icon *ngIf="isMobileLayout" set="bootstrap-icons" name="chevron-right"></tl-icon>
 </p>
 <a class="section-title" href="{{viewAllHref}}" *ngIf="viewAllHref">{{sectionTitle}}
-  <tl-icon *ngIf="isMobileLayout" set="bootstrap" name="chevron-right"></tl-icon>
+  <tl-icon *ngIf="isMobileLayout" set="bootstrap-icons" name="chevron-right"></tl-icon>
 </a>
 <wvr-nav-list-component
   vertical="true"
diff --git a/src/app/tl-mega-menu/tl-mega-menu-section/tl-mega-menu-section.component.ts b/src/app/tl-mega-menu/tl-mega-menu-section/tl-mega-menu-section.component.ts
index e63877285..27aef0b64 100644
--- a/src/app/tl-mega-menu/tl-mega-menu-section/tl-mega-menu-section.component.ts
+++ b/src/app/tl-mega-menu/tl-mega-menu-section/tl-mega-menu-section.component.ts
@@ -1,11 +1,12 @@
-import { AfterViewInit, Component, HostBinding, Injector, Input, OnInit } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, HostBinding, Injector, Input, OnInit } from '@angular/core';
 import { TamuAbstractBaseComponent } from '../../shared/tl-abstract-base.component';
 import { TlMegaMenuComponent } from '../tl-mega-menu.component';
 
 @Component({
   selector: 'tl-mega-menu-section-component',
   templateUrl: './tl-mega-menu-section.component.html',
-  styleUrls: ['./tl-mega-menu-section.component.scss']
+  styleUrls: ['./tl-mega-menu-section.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Default
 })
 export class TlMegaMenuSectionComponent extends TamuAbstractBaseComponent implements AfterViewInit, OnInit  {
 
@@ -31,10 +32,10 @@ export class TlMegaMenuSectionComponent extends TamuAbstractBaseComponent implem
   }
 
   ngOnInit(): void {
-    const elem = this._eRef.nativeElement as HTMLElement;
-    const parentElem = elem.closest('tl-mega-menu') as HTMLElement;
+    const elem = this.eRef.nativeElement as HTMLElement;
+    const parentElem = elem.closest('tl-mega-menu');
     if (parentElem) {
-      this.parent = this.componentRegistry.getComponentByElement(parentElem) as TlMegaMenuComponent;
+      this.parent = this.componentRegistry.getComponentByElement(parentElem as HTMLElement) as TlMegaMenuComponent;
     } else {
       console.warn(`TlMegaMenuSectionComponent (${this.id}) is not within a TLMegamMenuComponent`);
     }
@@ -68,11 +69,11 @@ export class TlMegaMenuSectionComponent extends TamuAbstractBaseComponent implem
   }
 
   getElementHeight(): number {
-    return (this._eRef.nativeElement as HTMLElement).clientHeight;
+    return (this.eRef.nativeElement as HTMLElement).clientHeight;
   }
 
   getExpandedHeight(): number {
-    const elem = (this._eRef.nativeElement as HTMLElement);
+    const elem = (this.eRef.nativeElement as HTMLElement);
     const lis = elem.querySelectorAll('tl-nav-li');
     const liHeight = lis.length ? lis[0].clientHeight : 0;
 
diff --git a/src/app/tl-mega-menu/tl-mega-menu.component.html b/src/app/tl-mega-menu/tl-mega-menu.component.html
index c3182da5e..451715d61 100644
--- a/src/app/tl-mega-menu/tl-mega-menu.component.html
+++ b/src/app/tl-mega-menu/tl-mega-menu.component.html
@@ -18,13 +18,13 @@
     <tl-icon-component
       class="x-icon"
       [hiddenInMobile]="true"
-      [set]="'bootstrap'"
+      [set]="'bootstrap-icons'"
       [name]="'caret-right-fill'"
       [size]="'11px'">
     </tl-icon-component>
     <tl-icon-component
       class="plus-icon"
-      [set]="'bootstrap'"
+      [set]="'bootstrap-icons'"
       [name]="'plus'"
       [size]="'24px'">
     </tl-icon-component>
diff --git a/src/app/tl-mega-menu/tl-mega-menu.component.ts b/src/app/tl-mega-menu/tl-mega-menu.component.ts
index d50d1d403..4850a0ad6 100644
--- a/src/app/tl-mega-menu/tl-mega-menu.component.ts
+++ b/src/app/tl-mega-menu/tl-mega-menu.component.ts
@@ -1,16 +1,17 @@
 /* istanbul ignore file */
 
-import { AfterViewInit, Component, HostBinding, HostListener, Injector, Input, OnInit } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectionStrategy, Component, HostBinding, HostListener, Injector, Input } from '@angular/core';
+import { debounce, wvrTimeout } from '@wvr/elements';
 import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';
-import { debounce } from '@wvr/elements';
 import { TlMegaMenuSectionComponent } from './tl-mega-menu-section/tl-mega-menu-section.component';
 
 @Component({
   selector: 'tl-mega-menu-component',
   templateUrl: './tl-mega-menu.component.html',
-  styleUrls: ['./tl-mega-menu.component.scss']
+  styleUrls: ['./tl-mega-menu.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Default
 })
-export class TlMegaMenuComponent extends TamuAbstractBaseComponent implements OnInit, AfterViewInit {
+export class TlMegaMenuComponent extends TamuAbstractBaseComponent implements AfterContentInit {
   /** The default text value to be displayed for tl-mega menu title. */
   @Input() menuTitle = 'Mega Menu';
 
@@ -36,7 +37,7 @@ export class TlMegaMenuComponent extends TamuAbstractBaseComponent implements On
   /** Allows for the override of the --tl-mobile-display-max-height variable. */
   @HostBinding('style.--tl-mobile-display-max-height') mobileDisplayMaxHeight = '0px';
 
-  private sections: Array<TlMegaMenuSectionComponent>;
+  private readonly sections: Array<TlMegaMenuSectionComponent>;
 
   private sectionTitleHeight = 0;
 
@@ -47,22 +48,27 @@ export class TlMegaMenuComponent extends TamuAbstractBaseComponent implements On
   }
 
   /** This adjusts the dropdown menu x offset on page load. */
-  ngAfterViewInit(): void {
-    this.calculateMenuXOffset();
+  ngAfterContentInit(): void {
+    super.ngAfterContentInit();
+    wvrTimeout(() => {
+      this.calculateMenuXOffset();
+    });
   }
 
   addSection(section: TlMegaMenuSectionComponent): void {
     this.sections.push(section);
     this.sectionTitleHeight = section.getElementHeight() > this.sectionTitleHeight ?
-                              section.getElementHeight() :
-                              this.sectionTitleHeight;
+      section.getElementHeight() :
+      this.sectionTitleHeight;
   }
 
   /** This toggles the display of mobile menu on click event. */
   toggleMobileMenuOpen(): void {
     this.mobileDisplayMaxHeight = `${this.sections.length * this.sectionTitleHeight}px`;
     if (this.active) {
-      this.sections.forEach(s => s.close());
+      this.sections.forEach(s => {
+        s.close();
+      });
       this.active = false;
     } else {
       this.active = true;
@@ -73,7 +79,7 @@ export class TlMegaMenuComponent extends TamuAbstractBaseComponent implements On
   @HostListener('window:resize') @debounce() calculateMenuXOffset(): void {
     /* istanbul ignore else*/
     if (!this.outOfHeader) {
-      const nativeElem = this._eRef.nativeElement as HTMLElement;
+      const nativeElem = this.eRef.nativeElement as HTMLElement;
       const header = document.querySelector('tl-header');
       const bottomNav = header.shadowRoot.querySelector('[bottom-navigation]');
       /* istanbul ignore else*/
diff --git a/src/app/tl-nav-list/tl-nav-list.component.ts b/src/app/tl-nav-list/tl-nav-list.component.ts
index 91796d495..5cb3c5045 100644
--- a/src/app/tl-nav-list/tl-nav-list.component.ts
+++ b/src/app/tl-nav-list/tl-nav-list.component.ts
@@ -1,4 +1,4 @@
-import { Component, Injector, Input, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Injector, Input, ViewEncapsulation } from '@angular/core';
 import { Alignment } from '@wvr/elements';
 import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';
 
@@ -10,7 +10,8 @@ import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component'
   selector: 'tl-nav-list-component',
   templateUrl: './tl-nav-list.component.html',
   styleUrls: ['./tl-nav-list.component.scss'],
-  encapsulation: ViewEncapsulation.ShadowDom
+  encapsulation: ViewEncapsulation.ShadowDom,
+  changeDetection: ChangeDetectionStrategy.Default
 })
 export class TamuNavListComponent extends TamuAbstractBaseComponent {
 
diff --git a/src/app/tl-tabs/tl-tab/tl-tab.component.ts b/src/app/tl-tabs/tl-tab/tl-tab.component.ts
index 9f94b0656..9fe44f0a4 100644
--- a/src/app/tl-tabs/tl-tab/tl-tab.component.ts
+++ b/src/app/tl-tabs/tl-tab/tl-tab.component.ts
@@ -1,10 +1,11 @@
-import { Component, Injector, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Injector, Input } from '@angular/core';
 import { TamuAbstractBaseComponent } from '../../shared/tl-abstract-base.component';
 
 @Component({
   selector: 'tl-tab-component',
   templateUrl: './tl-tab.component.html',
-  styleUrls: ['./tl-tab.component.scss']
+  styleUrls: ['./tl-tab.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Default
 })
 export class TlTabComponent extends TamuAbstractBaseComponent {
 
diff --git a/src/app/tl-tabs/tl-tabs.component.ts b/src/app/tl-tabs/tl-tabs.component.ts
index 5cfe9b9f4..f59e77def 100644
--- a/src/app/tl-tabs/tl-tabs.component.ts
+++ b/src/app/tl-tabs/tl-tabs.component.ts
@@ -1,11 +1,11 @@
-import { Component, Injector, OnInit } from '@angular/core';
-import { __extends } from 'tslib';
+import { ChangeDetectionStrategy, Component, Injector } from '@angular/core';
 import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';
 
 @Component({
   selector: 'tl-tabs-component',
   templateUrl: './tl-tabs.component.html',
-  styleUrls: ['./tl-tabs.component.scss']
+  styleUrls: ['./tl-tabs.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Default
 })
 export class TlTabsComponent extends TamuAbstractBaseComponent {
 
diff --git a/src/assets/images/askus.png b/src/assets/images/askus.png
new file mode 100644
index 000000000..ea94f6569
Binary files /dev/null and b/src/assets/images/askus.png differ
diff --git a/src/index.html b/src/index.html
index f5837444c..dd5db022d 100755
--- a/src/index.html
+++ b/src/index.html
@@ -1095,7 +1095,7 @@ <h4 class="alert-heading">
     <wvre-text value="Icon Component" text-decoration="underline"></wvre-text><br /><br />
     <tl-icon></tl-icon>
     <tl-icon set="tl" name="weaver-w" color="#500000" size="34px" hidden-in-mobile="true"></tl-icon>
-    <tl-icon set="bootstrap" name="arrow-right-circle" size="32px" animate="{click: 'rotateToggle'}"></tl-icon>
+    <tl-icon set="bootstrap-icons" name="arrow-right-circle" size="32px" animate="{click: 'rotateToggle'}"></tl-icon>
   </div>
   <br /><hr /><br />
   <!-- style="height: 700px;" -->
diff --git a/src/main.ts b/src/main.ts
index bb4ba0404..a556ceef2 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -8,5 +8,8 @@ if (environment.production) {
 }
 
 document.addEventListener('DOMContentLoaded', () => {
-  weaverBootstrap(TamuLibModule)(isDevMode() ? '/config.json' : undefined);
+  weaverBootstrap(TamuLibModule)(isDevMode() ? '/config.json' : undefined)
+    .catch(error => {
+      console.error(error);
+    });
 });
diff --git a/src/polyfills.ts b/src/polyfills.ts
index aa5100931..781245add 100644
--- a/src/polyfills.ts
+++ b/src/polyfills.ts
@@ -1,8 +1,10 @@
 /***************************************************************************************************
  * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
  */
+
 // tslint:disable-next-line:no-import-side-effect
 import '@angular/localize/init';
+
 /**
  * This file includes polyfills needed by Angular and is loaded before the app.
  * You can add your own extra polyfills to this file.
@@ -24,14 +26,16 @@ import '@angular/localize/init';
  */
 
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
-/* tslint:disable: no-import-side-effect */
-import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
 
 /**
  * Web Animations `@angular/platform-browser/animations`
  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
  */
+
+// tslint:disable-next-line:no-import-side-effect
 import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
 /**
@@ -62,11 +66,16 @@ import 'web-animations-js';  // Run `npm install --save web-animations-js`.
  * Zone JS is required by default for Angular itself.
  */
 
+(window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+(window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+(window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+
+// tslint:disable-next-line:no-import-side-effect
 import 'zone.js/dist/zone';  // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */
 
-import 'ie11-custom-properties';
-/* tslint:enable: no-import-side-effect */
+// tslint:disable-next-line:no-import-side-effect
+import 'document-register-element';
diff --git a/src/styles.scss b/src/styles.scss
index 2d7ab4726..78caee98e 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -4,13 +4,13 @@
 
 .wvr-bootstrap {
   @import '~@wvr/elements/styles/variables';
-  @import "~bootstrap/scss/bootstrap";
+  @import '~bootstrap/scss/bootstrap';
   @import '~@wvr/elements/styles/mixins';
   @import '~@wvr/elements/styles/overrides';
 }
 
 .wvr-hidden {
-  display: none!important;
+  display: none !important;
 }
 
 body {