diff --git a/pages/404/index.js b/pages/404/index.js
index 08a2936..f2acbb4 100644
--- a/pages/404/index.js
+++ b/pages/404/index.js
@@ -1,4 +1,4 @@
-let {Component, useParams} = await import('/vader.js')
+let {Component, useParams} = await await import(Vader.root + '//vader.js')
 
 class Index extends Component{
     constructor(props){
diff --git a/pages/docs/index.js b/pages/docs/index.js
index 0659e89..8a10c42 100644
--- a/pages/docs/index.js
+++ b/pages/docs/index.js
@@ -1,6 +1,6 @@
-let { Component, useState } = await import('/vader.js')
-import { Nav }from '/dist/src/Nav.js' 
-import { Home } from '/dist/src/pages/docs/overview/index.js'
+let { Component, useState } = await await import(Vader.root + '//vader.js')
+let { Nav } = await import(Vader.root + '/src/Nav.js') 
+let { Home } = await import(Vader.root + '/src/pages/docs/overview/index.js')
   
 window.Vader['docs'] = {
     'overview': {
@@ -40,14 +40,14 @@ class Index extends Component {
 
                                 <li><a
                                     class='font-semibold'
-                                    onClick="${this.bind(`this.response.setQuery({ page: 'getting-started' }); `, false, false, '2rkp1b05cbc', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="2rkp1b05cbc", 
+                                    onClick="${this.bind(`this.response.setQuery({ page: 'getting-started' }); `, false, false, 'ba4mq3dohq', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="ba4mq3dohq", 
                                 >Getting Started</a></li>
                                 <li class='p-1'><a
                                     class="${`
            ${path == '/docs/getting-started/installation' ? 'font-semibold text-blue-500 font-sans' : ''
                                         }
          `}",
-                                    onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'installation' }); `, false, false, 'ztyjefuzv1', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="ztyjefuzv1", 
+                                    onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'installation' }); `, false, false, '30lzaadjz0i', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="30lzaadjz0i", 
                                 >Installation</a></li>
                                 <li class='p-1'><a
                                     class="${`
@@ -55,20 +55,20 @@ class Index extends Component {
            ${path == '/docs/getting-started/project-structure' ? 'font-semibold  text-blue-500 font-sans' : ''
                                         }
          `}",
-                                    onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'project-structure' }); `, false, false, '08hs78caqoji', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="08hs78caqoji", 
+                                    onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'project-structure' }); `, false, false, 'ht7dppuhot', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="ht7dppuhot", 
                                 >Project Structure</a></li>
                                 
                                 <li class="p-1">
 
                                     <a
                                         class="${`${path == '/docs/getting-started/routing' ? 'font-semibold text-blue-500 font-sans' : ''}`}",
-                                        onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'routing' }); `, false, false, 'vnr0112rdlo', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="vnr0112rdlo", 
+                                        onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'routing' }); `, false, false, '0ye1yd81gmda', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="0ye1yd81gmda", 
                                     >Routing</a></li>
                                 <li class="p-1">
 
 <a
     class="${`${path == '/docs/getting-started/deployment' ? 'font-semibold text-blue-500 font-sans' : ''}`}",
-    onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'deployment' }); `, false, false, 'urq8uehj7qp', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="urq8uehj7qp", 
+    onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'deployment' }); `, false, false, 'vkqbif0zgua', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="vkqbif0zgua", 
 >Deployment</a></li> 
   
                                     
@@ -106,7 +106,7 @@ class Index extends Component {
 
                         <ul class='p-5     fixed    flex flex-col text-sm gap-5'>
                             <li
-                                onClick="${this.bind(`this.response.setQuery({ page: 'getting-started' }); `, false, false, 'ddtt7lvcjie', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="ddtt7lvcjie", 
+                                onClick="${this.bind(`this.response.setQuery({ page: 'getting-started' }); `, false, false, 'j6qmzevm17q', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="j6qmzevm17q", 
                                 class='cursor-pointer'
                             >
                                 <a class='flex gap-2 hero'>
@@ -177,7 +177,7 @@ class Index extends Component {
                             ${
                                 path.includes('getting-started') ? `
                                     <li
-                                        onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'installation' }); `, false, false, '9l302q84pxf', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="9l302q84pxf", 
+                                        onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'installation' }); `, false, false, 'wi3j5ir65vh', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="wi3j5ir65vh", 
                                         class='cursor-pointer'
                                     >
                                         <a
@@ -197,7 +197,7 @@ class Index extends Component {
                                         </a>
                                     </li>
                                     <li
-                                        onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'project-structure' }); `, false, false, '8qpbu8wrnbd', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="8qpbu8wrnbd", 
+                                        onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'project-structure' }); `, false, false, 'rv7cy0gzmud', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="rv7cy0gzmud", 
                                         class='cursor-pointer'
                                     >
                                         <a class='flex gap-2 hero'>
@@ -212,7 +212,7 @@ class Index extends Component {
                                         </a>
                                     </li>
                                     <li
-                                        onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'routing' }); `, false, false, 'kx9fnfuj5re', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="kx9fnfuj5re", 
+                                        onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'routing' }); `, false, false, 'jscxt805id', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="jscxt805id", 
                                         class='cursor-pointer'
                                     >
                                         <a class='flex gap-2 hero'>
@@ -229,7 +229,7 @@ class Index extends Component {
                                         </a>
                                     </li>
                                     <li
-                                        onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'deployment' }); `, false, false, 'kbtws7ioqf9', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="kbtws7ioqf9", 
+                                        onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'deployment' }); `, false, false, 'qx1qvlqu9mi', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="qx1qvlqu9mi", 
                                         class='cursor-pointer'
                                     >
                                         <a class='flex gap-2 hero'>
diff --git a/pages/index.js b/pages/index.js
index 59a6c6b..b682a2e 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,8 +1,7 @@
-import { Component, useState, strictMount, useRef } from "/vader.js"
-import  {Button} from "/dist/src/button.js" 
-import {Nav }from '/dist/src/Nav.js' 
-import { ComponentExample} from "/dist/src/examples/component.js"
-
+let { Component, useState, strictMount, useRef } = await import(Vader.root + '//vader.js')
+let {Button} = await import(Vader.root + '/src/button.js') 
+let {Nav } = await import(Vader.root + '/src/Nav.js') 
+let { ComponentExample} = await import(Vader.root + '/src/examples/component.js')
 export default class Index extends Component {
     constructor(props) {
         super(props);
@@ -11,11 +10,11 @@ export default class Index extends Component {
     }
     render() {
 
-        let [/** @type {String} */view, setView] = this.useState('view', 'index')
-         
+        let [/** @type {String} */view, setView] = this.useState('view', 'index')
+         
           
-        let [/** @type {Boolean} */loaded, setLoaded] = this.useState('loaded', false)
-         
+        let [/** @type {Boolean} */loaded, setLoaded] = this.useState('loaded', false)
+         
           
         let embedref = this.useRef('embedref', null)
          
@@ -79,7 +78,7 @@ export default class Index extends Component {
 
                         <button
                             class="btn btn-ghost  shadow border-slate-200 border  hover:bg-white btn-sm w-fit text-center align-middle mx-auto mt-5"
-                            onClick="${this.bind(`setView(view === 'index' ? 'stackblitz' : 'index'); console.log(view); `, false, false, 'pmq1yyr1prc', "setView,view,embedref,", setView, view, embedref)}", usesEvent="true", eventType="onClick",data-ref="pmq1yyr1prc", 
+                            onClick="${this.bind(`setView(view === 'index' ? 'stackblitz' : 'index'); console.log(view); `, false, false, 'w5xo1rydzs', "setView,view,embedref,", setView, view, embedref)}", usesEvent="true", eventType="onClick",data-ref="w5xo1rydzs", 
                         >
                             ${
                                 view === 'index' ? 'Click to View Code' : 'Click to View Example Component'
@@ -97,7 +96,7 @@ export default class Index extends Component {
                                     : `
                                         <embed
                                             ref="${embedref.bind}",
-                                            onLoad="${this.bind(``, false, false, '0kjdxrcfucjb', "setLoaded,loaded,", setLoaded, loaded)}", usesEvent="true", eventType="onLoad",data-ref="0kjdxrcfucjb", 
+                                            onLoad="${this.bind(``, false, false, '8cd1g6vi6fb', "setLoaded,loaded,", setLoaded, loaded)}", usesEvent="true", eventType="onLoad",data-ref="8cd1g6vi6fb", 
                                             class="h-[600px] w-[600px] rounded  "
                                             src="https://stackblitz.com/edit/web-platform-aanbgw?file=dev%2Fpages%2Findex.jsx&view=editor"
                                             style={{ width: '100%', height: '100%' }}
@@ -120,6 +119,6 @@ export default class Index extends Component {
 }
 
  
-
-
+
+
  //wascompiled
\ No newline at end of file
diff --git a/src/Nav.js b/src/Nav.js
index c430741..b655ce6 100644
--- a/src/Nav.js
+++ b/src/Nav.js
@@ -1,5 +1,5 @@
-import { Component } from '/vader.js'
-import {SearchBar}  from './search.js' 
+let { Component } = await import(Vader.root + '//vader.js')
+let {SearchBar} = await import(Vader.root + '/src/search.js') 
 export class Nav extends Component {
     constructor(props) {
         super(props)
@@ -8,7 +8,7 @@ export class Nav extends Component {
         return `
             <div class="navbar  sticky top-0 z-[9999]    bg-white ">
                 <div class="navbar-start"
-                    onClick="${this.bind(`this.response.redirect('/'); `, false, false, '88xzmtfqgv2', "", null)}", usesEvent="true", eventType="onClick",data-ref="88xzmtfqgv2", 
+                    onClick="${this.bind(`this.response.redirect('/'); `, false, false, 's7eifr793j', "", null)}", usesEvent="true", eventType="onClick",data-ref="s7eifr793j", 
                 >
 
                     <img
diff --git a/src/button.js b/src/button.js
index 14f08af..5946fcf 100644
--- a/src/button.js
+++ b/src/button.js
@@ -1,4 +1,4 @@
-import { Component } from "/vader.js"
+let { Component } = await import(Vader.root + '//vader.js')
  
 export class Button extends Component{
     constructor(props){
@@ -11,7 +11,7 @@ export class Button extends Component{
         return  `
            <button class="${this.props?.class}",
            name='button'
-            onClick="${this.bind(`console.log(this); this.parentNode.response.redirect(this.props?.redirect); `, false, false, 'lmfqp4vsa1n', "", null)}", usesEvent="true", eventType="onClick",data-ref="lmfqp4vsa1n", 
+            onClick="${this.bind(`console.log(this); this.parentNode.response.redirect(this.props?.redirect); `, false, false, 'm7xtffjzn6m', "", null)}", usesEvent="true", eventType="onClick",data-ref="m7xtffjzn6m", 
            >${this.props?.children}</button>
 
         `
diff --git a/src/collapse.js b/src/collapse.js
index 3b094f6..3bddb67 100644
--- a/src/collapse.js
+++ b/src/collapse.js
@@ -1,4 +1,4 @@
-import { Component, useState } from "/vader.js"
+let { Component, useState } = await import(Vader.root + '//vader.js')
 
 export class Collapse extends Component{
     constructor(props){
@@ -16,7 +16,7 @@ export class Collapse extends Component{
               
              >
                 <button class="${this.props?.class}",
-                 onClick="${this.bind(`setOpen(!open); this.props?.click(this.props?.redirectTo); `, false, false, '60jnfrlriyj', "setOpen,open,", setOpen, open)}", usesEvent="true", eventType="onClick",data-ref="60jnfrlriyj", >
+                 onClick="${this.bind(`setOpen(!open); this.props?.click(this.props?.redirectTo); `, false, false, '00cj3rqug8xqk', "setOpen,open,", setOpen, open)}", usesEvent="true", eventType="onClick",data-ref="00cj3rqug8xqk", >
                     ${this.props?.title}
                  </button>
                 <div 
diff --git a/src/examples/component.js b/src/examples/component.js
index f263e04..51fb361 100644
--- a/src/examples/component.js
+++ b/src/examples/component.js
@@ -1,4 +1,4 @@
-import {Component, useState, strictMount, useRef}  from '/vader.js'
+let {Component, useState, strictMount, useRef} = await import(Vader.root + '//vader.js')
 
 class Video extends Component{
     constructor(props){
@@ -27,7 +27,7 @@ class Video extends Component{
                         ref="${likedRef.bind}",
                         xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="${1.5}", stroke="currentColor" 
                         class="${`w-6 h-6 cursor-pointer ${liked ? 'fill-error stroke-error' : ''}`}",
-                        onClick="${this.bind(`setLiked(!liked, likedRef.bind); `, false, false, '9bhmzeuce0k', "setLiked,,liked,likedRef,event,", setLiked, liked, likedRef, event)}", usesEvent="true", eventType="onClick",data-ref="9bhmzeuce0k", 
+                        onClick="${this.bind(`setLiked(!liked, likedRef.bind); `, false, false, '9toqkdxafxq', "setLiked,,liked,likedRef,event,", setLiked, liked, likedRef, event)}", usesEvent="true", eventType="onClick",data-ref="9toqkdxafxq", 
                         >
                             <path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
                         </svg>
@@ -107,7 +107,7 @@ export class ComponentExample extends Component{
                    
                 
                     <input  
-                    onInput="${this.bind(filterVideos, true, false, 'gw856tfwt4w', "e, test", event, videos)}", usesEvent="true", eventType="onInput",data-ref="gw856tfwt4w",       
+                    onInput="${this.bind(filterVideos, true, false, '4aylv5n28wx', "e, test", event, videos)}", usesEvent="true", eventType="onInput",data-ref="4aylv5n28wx",       
                     type="text" class="input input-bordered rounded-full" placeholder="Search..." />
                 </div>
                 <h1   class='font-bold text-xl  mx-5 p-2' ref="${searchHook.bind}", >${videos.length} Videos</h1>
diff --git a/src/pages/docs/deployment/index.js b/src/pages/docs/deployment/index.js
index 5f374f8..27c18ae 100644
--- a/src/pages/docs/deployment/index.js
+++ b/src/pages/docs/deployment/index.js
@@ -1,4 +1,4 @@
-import { Component } from "/vader.js"
+let { Component } = await import(Vader.root + '//vader.js')
 
 export class Deployment extends Component {
   constructor(props) {
@@ -13,7 +13,7 @@ export class Deployment extends Component {
         <div class="text-sm breadcrumbs">
           <ul>
             <li><a class='no-underline'
-              onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, 'jyogbu1tvei', "", null)}", usesEvent="true", eventType="onClick",data-ref="jyogbu1tvei", 
+              onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, 'rx6arbdtdej', "", null)}", usesEvent="true", eventType="onClick",data-ref="rx6arbdtdej", 
             >Getting Started</a></li>
             <li><a class='font-semibold'>Deployment</a></li>
           </ul>
diff --git a/src/pages/docs/hooks/index.js b/src/pages/docs/hooks/index.js
index 738e0b4..27297c8 100644
--- a/src/pages/docs/hooks/index.js
+++ b/src/pages/docs/hooks/index.js
@@ -1,4 +1,4 @@
-import {useState, useRef, Component} from '/vader.js'
+let {useState, useRef, Component} = await import(Vader.root + '//vader.js')
 const data = {
   useState: `
   <div>
@@ -36,7 +36,7 @@ class Hooks extends Component {
              <li class='list-inside' >
                <a 
                class='text-blue-500 cursor-pointer hover:underline'
-               onClick="${this.bind(`this.props?.click('/docs/hooks/useState'); `, false, false, 'mgjfc6u94sl', "", null)}", usesEvent="true", eventType="onClick",data-ref="mgjfc6u94sl", >
+               onClick="${this.bind(`this.props?.click('/docs/hooks/useState'); `, false, false, 'btjfb6edb5', "", null)}", usesEvent="true", eventType="onClick",data-ref="btjfb6edb5", >
                   useState
                 </a>  
               </li>
diff --git a/src/pages/docs/overview/index.js b/src/pages/docs/overview/index.js
index 20ae969..d3fa312 100644
--- a/src/pages/docs/overview/index.js
+++ b/src/pages/docs/overview/index.js
@@ -1,6 +1,6 @@
-import { Component, useState, useRef } from '/vader.js'
-import {Routing}  from '/dist/src/pages/docs/routing/index.js' 
-import { Deployment } from '/dist/src/pages/docs/deployment/index.js' 
+let { Component, useState, useRef } = await import(Vader.root + '//vader.js')
+let {Routing} = await import(Vader.root + '/src/pages/docs/routing/index.js') 
+let { Deployment } = await import(Vader.root + '/src/pages/docs/deployment/index.js') 
 class Installation extends Component {
   constructor(props) {
     super(props)
@@ -16,7 +16,7 @@ class Installation extends Component {
         <div class="text-sm breadcrumbs">
           <ul>
             <li><a class='no-underline'
-              onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, 'k1k4xfhpyn', "", null)}", usesEvent="true", eventType="onClick",data-ref="k1k4xfhpyn", 
+              onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, '8it00hbw1cu', "", null)}", usesEvent="true", eventType="onClick",data-ref="8it00hbw1cu", 
             >Getting Started</a></li>
             <li><a class='font-semibold'>Installation</a></li>
           </ul>
@@ -48,7 +48,7 @@ class Installation extends Component {
               </svg>
               <div class="absolute end-5"
                 ref="${copiedRef.bind}",
-                onClick="${this.bind(`navigator.clipboard.writeText('npx vaderjs@latest --build'); setSaved(!saved, copiedRef.bind); setTimeout(() => {; setSaved(false, copiedRef.bind); }, 1000); `, false, false, '83g1pl2r0fj', "setSaved,saved,copiedRef,", setSaved, saved, copiedRef)}", usesEvent="true", eventType="onClick",data-ref="83g1pl2r0fj", 
+                onClick="${this.bind(`navigator.clipboard.writeText('npx vaderjs@latest --build'); setSaved(!saved, copiedRef.bind); setTimeout(() => {; setSaved(false, copiedRef.bind); }, 1000); `, false, false, 'nc9ejc8joz8', "setSaved,saved,copiedRef,", setSaved, saved, copiedRef)}", usesEvent="true", eventType="onClick",data-ref="nc9ejc8joz8", 
               >
                 <div class='hover:bg-base-200 px-[.4rem] py-[.4rem] rounded'>
                   ${
@@ -130,7 +130,7 @@ class Installation extends Component {
               </svg>
               <div class="absolute end-5"
                 ref="${copiedRef.bind}",
-                onClick="${this.bind(`navigator.clipboard.writeText(examples['1']); setSaved(!saved, copiedRef.bind); setTimeout(() => {; setSaved(false, copiedRef.bind); }, 1000); `, false, false, 'hc2kdrip4xc', "setSaved,saved,copiedRef,", setSaved, saved, copiedRef)}", usesEvent="true", eventType="onClick",data-ref="hc2kdrip4xc", 
+                onClick="${this.bind(`navigator.clipboard.writeText(examples['1']); setSaved(!saved, copiedRef.bind); setTimeout(() => {; setSaved(false, copiedRef.bind); }, 1000); `, false, false, 'k4gddg9jjs', "setSaved,saved,copiedRef,", setSaved, saved, copiedRef)}", usesEvent="true", eventType="onClick",data-ref="k4gddg9jjs", 
               >
                 <div class='hover:bg-base-200 px-[.4rem] py-[.4rem] rounded'>
                   ${
@@ -261,7 +261,7 @@ class Installation extends Component {
           <span
 
             class='font-bold mb-12 hover:opacity-100 cursor-pointer opacity-60 '
-            onClick="${this.bind(`console.log(this); this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, 'vg6jv5ryx8n', "", null)}", usesEvent="true", eventType="onClick",data-ref="vg6jv5ryx8n", 
+            onClick="${this.bind(`console.log(this); this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, 'rx5j1nxi81', "", null)}", usesEvent="true", eventType="onClick",data-ref="rx5j1nxi81", 
           >Getting Started  </span>
         </div>
         <div class='mt-12 absolute mb-6 end-5  flex flex-col gap-3'>
@@ -271,7 +271,7 @@ class Installation extends Component {
           <span
 
             class='font-bold mb-12 hover:opacity-100 cursor-pointer opacity-60 '
-            onClick="${this.bind(`console.log(this); this.props?.swapPage({ page: 'getting-started', subpage: 'project-structure' }); `, false, false, 'j4ju3y2zdh', "", null)}", usesEvent="true", eventType="onClick",data-ref="j4ju3y2zdh", 
+            onClick="${this.bind(`console.log(this); this.props?.swapPage({ page: 'getting-started', subpage: 'project-structure' }); `, false, false, 'qwgem193ll', "", null)}", usesEvent="true", eventType="onClick",data-ref="qwgem193ll", 
           >Project Structure </span>
         </div>
 
@@ -295,7 +295,7 @@ class ProjectStructure extends Component {
         <div class="text-sm breadcrumbs">
           <ul>
             <li><a class='no-underline'
-              onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, 'utqmg44gmld', "", null)}", usesEvent="true", eventType="onClick",data-ref="utqmg44gmld", 
+              onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, 'oalcl0qcp17', "", null)}", usesEvent="true", eventType="onClick",data-ref="oalcl0qcp17", 
             >Getting Started</a></li>
             <li><a class='font-semibold'>Page Structure</a></li>
           </ul>
@@ -377,7 +377,7 @@ class ProjectStructure extends Component {
           <span
 
             class='font-bold mb-12 hover:opacity-100 cursor-pointer opacity-60 '
-            onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, '754kq5lok34', "", null)}", usesEvent="true", eventType="onClick",data-ref="754kq5lok34", 
+            onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, '8j00dyq1w3e', "", null)}", usesEvent="true", eventType="onClick",data-ref="8j00dyq1w3e", 
           >Getting Started  </span>
         </div>
         <div class='mt-24 absolute mb-6 end-5  flex flex-col gap-3'>
@@ -387,7 +387,7 @@ class ProjectStructure extends Component {
           <span
 
             class='font-bold mb-12 hover:opacity-100 cursor-pointer opacity-60 '
-            onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: 'routing' }); `, false, false, 'lydu0owwqr', "", null)}", usesEvent="true", eventType="onClick",data-ref="lydu0owwqr", 
+            onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: 'routing' }); `, false, false, 'wn815fmh8no', "", null)}", usesEvent="true", eventType="onClick",data-ref="wn815fmh8no", 
           >Routing </span>
         </div>
      </div>
@@ -506,7 +506,7 @@ export class Home extends Component {
                   <span
 
                     class='font-bold cursor-pointer hover:opacity-100 opacity-60 '
-                    onClick="${this.bind(`this.props?.click('getting-started', 'installation'); `, false, false, 'o2oqurvmqz', "", null)}", usesEvent="true", eventType="onClick",data-ref="o2oqurvmqz", 
+                    onClick="${this.bind(`this.props?.click('getting-started', 'installation'); `, false, false, 'zk7yxn2o18m', "", null)}", usesEvent="true", eventType="onClick",data-ref="zk7yxn2o18m", 
                   >Installation  </span>
                 </div>
               </div>
diff --git a/src/pages/docs/routing/index.js b/src/pages/docs/routing/index.js
index 8225d16..717fd8e 100644
--- a/src/pages/docs/routing/index.js
+++ b/src/pages/docs/routing/index.js
@@ -1,4 +1,4 @@
-import { Component, useRef, useState } from '/vader.js'
+let { Component, useRef, useState } = await import(Vader.root + '//vader.js')
 
 export class Routing extends Component {
   constructor(props) {
@@ -17,7 +17,7 @@ export class Routing extends Component {
         <div class="text-sm breadcrumbs">
           <ul>
             <li><a class='no-underline'
-              onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, 'rs613olvz0b', "", null)}", usesEvent="true", eventType="onClick",data-ref="rs613olvz0b", 
+              onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, '9nlu25a1g04', "", null)}", usesEvent="true", eventType="onClick",data-ref="9nlu25a1g04", 
             >Getting Started</a></li>
             <li><a class='font-semibold'>Routing</a></li>
           </ul>
@@ -35,7 +35,7 @@ export class Routing extends Component {
         <h2 class='text-2xl font-bold'>Pages</h2>
         <p>
           Vaderjs uses a filesystem routing system. That automatically compiles code from the pages directory and appends the route in the main app.js file, based on the file structure.
-          <a onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: 'project-structure' }); `, false, false, 'mmtcc4chg9j', "", null)}", usesEvent="true", eventType="onClick",data-ref="mmtcc4chg9j",  class='text-blue-500 cursor-pointer hover:underline'>Learn more about project structure</a>
+          <a onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: 'project-structure' }); `, false, false, '0lmpsjghgu1h', "", null)}", usesEvent="true", eventType="onClick",data-ref="0lmpsjghgu1h",  class='text-blue-500 cursor-pointer hover:underline'>Learn more about project structure</a>
         </p>
         <ul class="menu  border border-slate-200 rounded" aria-label='file structure example' title='file structure example'>
           <li><a>index.jsx - <span class='badge bg-base-200 border border-slate-200 rounded'>acme.com#/</span></a></li>
@@ -79,7 +79,7 @@ export class Routing extends Component {
             </svg>
             <div class="absolute end-5 z-[9999]"
 
-              onClick="${this.bind(`setSaved(true, copiedRef.bind); `, false, false, 'l0ne052cavj', "setSaved,saved,copiedRef,", setSaved, saved, copiedRef)}", usesEvent="true", eventType="onClick",data-ref="l0ne052cavj", 
+              onClick="${this.bind(`setSaved(true, copiedRef.bind); `, false, false, 'wj3xz3qwi58', "setSaved,saved,copiedRef,", setSaved, saved, copiedRef)}", usesEvent="true", eventType="onClick",data-ref="wj3xz3qwi58", 
             >
               <div
                 ref="${copiedRef.bind}",
@@ -219,7 +219,7 @@ export class Routing extends Component {
               </svg>
               <div class="absolute end-5"
                 ref="${copiedRef.bind}",
-                onClick="${this.bind(`navigator.clipboard.writeText(examples['1']); setSaved(!saved, copiedRef.bind); setTimeout(() => {; setSaved(false, copiedRef.bind); }, 1000); `, false, false, 'gjs9q5eq1hk', "setSaved,saved,copiedRef,", setSaved, saved, copiedRef)}", usesEvent="true", eventType="onClick",data-ref="gjs9q5eq1hk", 
+                onClick="${this.bind(`navigator.clipboard.writeText(examples['1']); setSaved(!saved, copiedRef.bind); setTimeout(() => {; setSaved(false, copiedRef.bind); }, 1000); `, false, false, '2bun5onxvsh', "setSaved,saved,copiedRef,", setSaved, saved, copiedRef)}", usesEvent="true", eventType="onClick",data-ref="2bun5onxvsh", 
               >
                 
               </div>
@@ -332,7 +332,7 @@ export class Routing extends Component {
           <span
 
             class='font-bold mb-12 hover:opacity-100 cursor-pointer opacity-60 '
-            onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: 'project-structure' }); `, false, false, '9nq7eubv96', "", null)}", usesEvent="true", eventType="onClick",data-ref="9nq7eubv96", 
+            onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: 'project-structure' }); `, false, false, 'm50aw5izhuq', "", null)}", usesEvent="true", eventType="onClick",data-ref="m50aw5izhuq", 
           >Project Structure  </span>
         </div>
         <div class='mt-24 absolute mb-6 end-5  flex flex-col gap-3'>
@@ -342,7 +342,7 @@ export class Routing extends Component {
           <span
 
             class='font-bold mb-12 hover:opacity-100 cursor-pointer opacity-60 '
-            onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: 'deployment' }); `, false, false, 'sosyh6e4ju', "", null)}", usesEvent="true", eventType="onClick",data-ref="sosyh6e4ju", 
+            onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: 'deployment' }); `, false, false, '47ewfsf6ier', "", null)}", usesEvent="true", eventType="onClick",data-ref="47ewfsf6ier", 
           >Deployment  </span>
         </div>
      </div>
diff --git a/src/search.js b/src/search.js
index 4d81cf9..750b623 100644
--- a/src/search.js
+++ b/src/search.js
@@ -1,9 +1,9 @@
-import { Component, strictMount, useReducer } from '/vader.js'
+let { Component, strictMount, useReducer } = await import(Vader.root + '//vader.js')
 
 let data = await fetch('src/searchData/search.json').then(res => res.json())
  
 
-import { Button } from './button.js'
+let { Button } = await import(Vader.root + '/src/button.js')
 
 export class SearchBar extends Component {
     constructor(props) {
@@ -25,7 +25,7 @@ export class SearchBar extends Component {
         return `
             <div class='xl:flex lg:flex md:flex hidden'>
                 <div
-                    onClick="${this.bind(`document.getElementById('my_modal_5').showModal(); `, false, false, 'raaqme15ry8', "", null)}", usesEvent="true", eventType="onClick",data-ref="raaqme15ry8", 
+                    onClick="${this.bind(`document.getElementById('my_modal_5').showModal(); `, false, false, '1r7h0m24khv', "", null)}", usesEvent="true", eventType="onClick",data-ref="1r7h0m24khv", 
                      
                     class=' flex hero gap-2 rounded-box   input-sm      hover:bg-base-200  text-sm focus:outline-none border-slate-200 border' type='text'
 
@@ -35,7 +35,7 @@ export class SearchBar extends Component {
                     </svg>
                     Search Documentation</div>
             </div>
-            <div onClick="${this.bind(`document.getElementById('my_modal_5').showModal(); `, false, false, '2hn72cv0s3x', "", null)}", usesEvent="true", eventType="onClick",data-ref="2hn72cv0s3x", 
+            <div onClick="${this.bind(`document.getElementById('my_modal_5').showModal(); `, false, false, '8ibc46yas5h', "", null)}", usesEvent="true", eventType="onClick",data-ref="8ibc46yas5h", 
                 class='xl:hidden lg:hidden md:hidden'>
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="${1.5}", stroke="currentColor" class="w-6 h-6">
                     <path strokeLinecap="round" strokeLinejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
diff --git a/vader.js b/vader.js
index 6ea7d38..232bba5 100644
--- a/vader.js
+++ b/vader.js
@@ -1,5 +1,6 @@
 window.Vader = {
   version: "1.3.3", 
+  root:import.meta.url.split('/').slice(0, -1).join('/'),
 };
 
 let errors = {