diff --git a/html/index.ts b/html/index.ts
index 422ba23..fc36f9c 100644
--- a/html/index.ts
+++ b/html/index.ts
@@ -1,10 +1,10 @@
 // dees tools
-import * as deesWccTools from '@designestate/dees-wcctools';
+import * as deesWccTools from '../ts_web';
 import * as deesDomTools from '@designestate/dees-domtools';
 
 // elements and pages
-import * as elements from '../ts_web/elements';
-import * as pages from '../ts_web/pages';
+import * as elements from '../test/elements';
+import * as pages from '../test/pages';
 
 deesWccTools.setupWccTools(elements as any, pages);
 deesDomTools.elementBasic.setup();
diff --git a/package-lock.json b/package-lock.json
index 8b490a4..548ce8f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1153,6 +1153,15 @@
         "sweet-scroll": "^4.0.0"
       }
     },
+    "@designestate/dees-element": {
+      "version": "1.0.6",
+      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-element/-/dees-element-1.0.6.tgz",
+      "integrity": "sha512-nYwFrXlDpm85fDDu9IkvrRWartgDabcxs3DDwNLKamd0DmL2EJjYrEpkme7V25gfw9TuwIPXmBcvpKpqrRtNcQ==",
+      "requires": {
+        "@designestate/dees-domtools": "^1.0.70",
+        "lit-element": "^2.4.0"
+      }
+    },
     "@gitzone/tsbuild": {
       "version": "2.1.25",
       "resolved": "https://verdaccio.lossless.one/@gitzone%2ftsbuild/-/tsbuild-2.1.25.tgz",
diff --git a/package.json b/package.json
index feff255..9931b42 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@designestate/dees-domtools": "^1.0.74",
+    "@designestate/dees-element": "^1.0.6",
     "@gitzone/tsrun": "^1.2.12",
     "@pushrocks/smartdelay": "^2.0.10",
     "@pushrocks/smartexpress": "^3.0.97",
diff --git a/ts_web/elements/wcc-dashboard.ts b/ts_web/elements/wcc-dashboard.ts
index dd87105..fa01e63 100644
--- a/ts_web/elements/wcc-dashboard.ts
+++ b/ts_web/elements/wcc-dashboard.ts
@@ -20,7 +20,10 @@ export class WccDashboard extends LitElement {
   public selectedType: TElementType;
 
   @property()
-  public selectedItem: TemplateResult | LitElement;
+  public selectedItemName: string;
+
+  @property()
+  public selectedItem: (() => TemplateResult) | LitElement;
 
   @property()
   public selectedViewport: plugins.deesDomtools.breakpoints.TViewport = 'desktop';
@@ -29,7 +32,7 @@ export class WccDashboard extends LitElement {
   public selectedTheme: TTheme = 'dark';
 
   @property()
-  public pages: { [key: string]: TemplateResult } = {};
+  public pages: { [key: string]: () => TemplateResult } = {};
 
   @property()
   public elements: { [key: string]: LitElement } = {};
@@ -39,7 +42,7 @@ export class WccDashboard extends LitElement {
 
   constructor(
     elementsArg?: { [key: string]: LitElement },
-    pagesArg?: { [key: string]: TemplateResult }
+    pagesArg?: { [key: string]: () => TemplateResult }
   ) {
     super();
     if (elementsArg) {
@@ -56,7 +59,6 @@ export class WccDashboard extends LitElement {
   public render(): TemplateResult {
     return html`
       <style>
-        @import url('https://fonts.googleapis.com/css?family=Roboto');
         :host {
           font-family: 'Roboto', sans-serif;
           background: #fcfcfc;
@@ -70,12 +72,15 @@ export class WccDashboard extends LitElement {
       <wcc-sidebar
         .dashboardRef=${this}
         .selectedItem=${this.selectedItem}
-        @selectedItem=${(eventArg) => {
-          this.selectedItem = eventArg.detail;
-        }}
         @selectedType=${(eventArg) => {
           this.selectedType = eventArg.detail;
         }}
+        @selectedItemName=${(eventArg) => {
+          this.selectedItemName = eventArg.detail;
+        }}
+        @selectedItem=${(eventArg) => {
+          this.selectedItem = eventArg.detail;
+        }}
       ></wcc-sidebar>
       <wcc-properties
         .dashboardRef=${this}
@@ -93,8 +98,8 @@ export class WccDashboard extends LitElement {
       ></wcc-properties>
       <wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
         ${(() => {
-          if (this.selectedItem instanceof TemplateResult) {
-            return this.selectedItem;
+          if (this.selectedType === 'page') {
+            return this.selectedItem();
           } else if (this.selectedItem) {
             // console.log(this.selectedItem);
             const anonItem: any = this.selectedItem;
@@ -166,7 +171,7 @@ export class WccDashboard extends LitElement {
 
   public buildUrl() {
     this.domtools.router.pushUrl(
-      `/${this.selectedType}/${(this.selectedItem as any).name}/${this.selectedViewport}/${
+      `/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${
         this.selectedTheme
       }`,
       0
diff --git a/ts_web/elements/wcc-defaultelement.ts b/ts_web/elements/wcc-defaultelement.ts
index be7c6c7..6ee4b69 100644
--- a/ts_web/elements/wcc-defaultelement.ts
+++ b/ts_web/elements/wcc-defaultelement.ts
@@ -16,7 +16,6 @@ export class WccDefaultElement extends LitElement {
   public render(): TemplateResult {
     return html`
       <style>
-        @import url('https://fonts.googleapis.com/css?family=Roboto');
         :host {
           font-family: 'Roboto', sans-serif;
           background: #333;
diff --git a/ts_web/elements/wcc-sidebar.ts b/ts_web/elements/wcc-sidebar.ts
index 3f3103b..84c1025 100644
--- a/ts_web/elements/wcc-sidebar.ts
+++ b/ts_web/elements/wcc-sidebar.ts
@@ -10,7 +10,7 @@ export class WccSidebar extends LitElement {
   public websites: string[] = [];
 
   @property({ attribute: false })
-  public selectedItem: LitElement | TemplateResult;
+  public selectedItem: LitElement | () => TemplateResult;
 
   @property({ attribute: false })
   public selectedType: TElementType;
@@ -112,7 +112,7 @@ export class WccSidebar extends LitElement {
                 class="selectOption ${this.selectedItem === item ? 'selected' : null}"
                 @click=${async () => {
                   const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
-                  this.selectItem('page', item);
+                  this.selectItem('page', pageName, item);
                 }}
               >
                 <i class="material-icons">insert_drive_file</i>
@@ -131,7 +131,7 @@ export class WccSidebar extends LitElement {
                 class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
                 @click=${async () => {
                   const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
-                  this.selectItem('element', item);
+                  this.selectItem('element', elementName, item);
                 }}
               >
                 <i class="material-icons">featured_video</i>
@@ -144,20 +144,26 @@ export class WccSidebar extends LitElement {
     `;
   }
 
-  public selectItem(typeArg: TElementType, itemArg: TemplateResult | LitElement) {
+  public selectItem(typeArg: TElementType, itemNameArg: string, itemArg: (() => TemplateResult) | LitElement) {
     console.log('selected item');
     this.selectedItem = itemArg;
     this.selectedType = typeArg;
-    this.dispatchEvent(
-      new CustomEvent('selectedItem', {
-        detail: itemArg
-      })
-    );
     this.dispatchEvent(
       new CustomEvent('selectedType', {
         detail: typeArg
       })
     );
+    this.dispatchEvent(
+      new CustomEvent('selectedItemName', {
+        detail: itemNameArg
+      })
+    );
+    this.dispatchEvent(
+      new CustomEvent('selectedItem', {
+        detail: itemArg
+      })
+    );
+    
     this.dashboardRef.buildUrl();
   }
 }