diff --git a/index.html b/index.html
index 88404a7..a7cb3c5 100644
--- a/index.html
+++ b/index.html
@@ -1,47 +1,26 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vaderjs v1.3.3</title>
-    <meta name="description" content="Vader.js is a modern web framework for building web applications.">
-    <link rel="shortcut icon" href="https://raw.githubusercontent.com/Postr-Inc/Vader.js/main/logo.png" type="image/x-icon">
-    <link rel="stylesheet" href="./public//styles.css">
- 
-                
-                
-                <link rel="modulepreload" href="//vader.js">
-                <link rel="preload" href="//vader.js" as="script">
-                
-                <link rel="modulepreload" href="/src/button.js">
-                <link rel="preload" href="/src/button.js" as="script">
-                
-                <link rel="modulepreload" href="/src/Nav.js">
-                <link rel="preload" href="/src/Nav.js" as="script">
-                
-                <link rel="modulepreload" href="/src/examples/component.js">
-                <link rel="preload" href="/src/examples/component.js" as="script">
-                
-                <link rel="modulepreload" href="/src/pages/docs/overview/index.js">
-                <link rel="preload" href="/src/pages/docs/overview/index.js" as="script">
-                
-                <link rel="modulepreload" href="/src/search.js">
-                <link rel="preload" href="/src/search.js" as="script">
-                
-                <link rel="modulepreload" href="/src/pages/docs/routing/index.js">
-                <link rel="preload" href="/src/pages/docs/routing/index.js" as="script">
-                
-                <link rel="modulepreload" href="/src/pages/docs/deployment/index.js">
-                <link rel="preload" href="/src/pages/docs/deployment/index.js" as="script">
-                </head>
-<body>
-    <div id="root"></div>
-    <script type="module">
-        import VaderRouter from './router.js' 
-        const router = new VaderRouter('/', 3000)
-        window.router = router
-        await import('./app.js')
-        router.listen(3000)
-    </script> 
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vaderjs v1.3.3</title>
+    <meta name="description" content="Vader.js is a modern web framework for building web applications.">
+    <link rel="shortcut icon" href="https://raw.githubusercontent.com/Postr-Inc/Vader.js/main/logo.png"
+        type="image/x-icon">
+    <link rel="stylesheet" href="./public//styles.css">
+
+<link rel="modulepreload" href="/vader.js"><link rel="preload" href="/vader.js" as="script"><link rel="modulepreload" href="./src/button.js"><link rel="preload" href="./src/button.js" as="script"><link rel="modulepreload" href="./src/Nav.js"><link rel="preload" href="./src/Nav.js" as="script"><link rel="modulepreload" href="./src/examples/component.js"><link rel="preload" href="./src/examples/component.js" as="script"><link rel="modulepreload" href="./src/pages/docs/overview/index.js"><link rel="preload" href="./src/pages/docs/overview/index.js" as="script"><link rel="modulepreload" href="./src/search.js"><link rel="preload" href="./src/search.js" as="script"><link rel="modulepreload" href="./src/pages/docs/routing/index.js"><link rel="preload" href="./src/pages/docs/routing/index.js" as="script"><link rel="modulepreload" href="./src/pages/docs/deployment/index.js"><link rel="preload" href="./src/pages/docs/deployment/index.js" as="script"><link rel="modulepreload" href="../src/button.js"><link rel="preload" href="../src/button.js" as="script"><link rel="modulepreload" href="../src/search.js"><link rel="preload" href="../src/search.js" as="script"><link rel="modulepreload" href="../src/Nav.js"><link rel="preload" href="../src/Nav.js" as="script"><link rel="modulepreload" href="../src/examples/component.js"><link rel="preload" href="../src/examples/component.js" as="script"><link rel="modulepreload" href="../src/pages/docs/overview/index.js"><link rel="preload" href="../src/pages/docs/overview/index.js" as="script"><link rel="modulepreload" href="../src/pages/docs/routing/index.js"><link rel="preload" href="../src/pages/docs/routing/index.js" as="script"><link rel="modulepreload" href="../src/pages/docs/deployment/index.js"><link rel="preload" href="../src/pages/docs/deployment/index.js" as="script"><link rel="modulepreload" href="/src/button.js"><link rel="preload" href="/src/button.js" as="script"><link rel="modulepreload" href="/src/Nav.js"><link rel="preload" href="/src/Nav.js" as="script"><link rel="modulepreload" href="/src/examples/component.js"><link rel="preload" href="/src/examples/component.js" as="script"><link rel="modulepreload" href="/src/pages/docs/overview/index.js"><link rel="preload" href="/src/pages/docs/overview/index.js" as="script"><link rel="modulepreload" href="/src/search.js"><link rel="preload" href="/src/search.js" as="script"><link rel="modulepreload" href="/src/pages/docs/routing/index.js"><link rel="preload" href="/src/pages/docs/routing/index.js" as="script"><link rel="modulepreload" href="/src/pages/docs/deployment/index.js"><link rel="preload" href="/src/pages/docs/deployment/index.js" as="script"></head>
+
+<body>
+    <div id="root"></div>
+    <script type="module">
+        import VaderRouter from './router.js'
+        const router = new VaderRouter('/', 3000)
+        window.router = router
+        await import('./app.js')
+        router.listen(3000)
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/pages/docs/index.js b/pages/docs/index.js
index 4861a80..3b30488 100644
--- a/pages/docs/index.js
+++ b/pages/docs/index.js
@@ -1,6 +1,6 @@
-let { Component, useState } = 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')
+import { Component, useState } from '/vader.js'
+import { Nav }from '/src/Nav.js' 
+import { Home } from '/src/pages/docs/overview/index.js'
   
 window.Vader['docs'] = {
     'overview': {
@@ -22,8 +22,8 @@ class Index extends Component {
         let p = this.request.query.page ? `/docs/${this.request.query.page}` : '/docs/getting-started'
         this.request.query.subpage ? p = p + '/' + this.request.query.subpage : ''
 
-        let [/** @type {*} */path, setPath] = this.useState('path', p)
-         
+        let [/** @type {*} */path, setPath] = this.useState('path', p)
+         
           
 
         
@@ -40,14 +40,14 @@ class Index extends Component {
 
                                 <li><a
                                     class='font-semibold'
-                                    onClick="${this.bind(`this.response.setQuery({ page: 'getting-started' }); `, false, false, '7e9ft6xt9zw', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="7e9ft6xt9zw", 
+                                    onClick="${this.bind(`this.response.setQuery({ page: 'getting-started' }); `, false, false, 'lgaio93c1r', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="lgaio93c1r", 
                                 >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, 't6nuo93rhdg', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="t6nuo93rhdg", 
+                                    onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'installation' }); `, false, false, 'g4tui6eln5e', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="g4tui6eln5e", 
                                 >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, 'cs717gicbe4', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="cs717gicbe4", 
+                                    onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'project-structure' }); `, false, false, 'kppmx8v250h', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="kppmx8v250h", 
                                 >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, 'tylzvx3x4a', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="tylzvx3x4a", 
+                                        onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'routing' }); `, false, false, 'sm2v4o8jye', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="sm2v4o8jye", 
                                     >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, 'j6191rzrjgk', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="j6191rzrjgk", 
+    onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'deployment' }); `, false, false, 'oujyks732ca', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="oujyks732ca", 
 >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, 'gunqq3kan57', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="gunqq3kan57", 
+                                onClick="${this.bind(`this.response.setQuery({ page: 'getting-started' }); `, false, false, '6u08pl58qsb', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="6u08pl58qsb", 
                                 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, 'xxmioatfrfb', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="xxmioatfrfb", 
+                                        onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'installation' }); `, false, false, 'ylkff5b9rdm', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="ylkff5b9rdm", 
                                         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, 'fs48mk0m2fo', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="fs48mk0m2fo", 
+                                        onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'project-structure' }); `, false, false, 'ycqalqda2b', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="ycqalqda2b", 
                                         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, 'yfzkf135nd', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="yfzkf135nd", 
+                                        onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'routing' }); `, false, false, 'xr72h5amff', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="xr72h5amff", 
                                         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, '0mvl52irugjq', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="0mvl52irugjq", 
+                                        onClick="${this.bind(`this.response.setQuery({ page: 'getting-started', subpage: 'deployment' }); `, false, false, 'ti01q2pec9', "setPath,", setPath)}", usesEvent="true", eventType="onClick",data-ref="ti01q2pec9", 
                                         class='cursor-pointer'
                                     >
                                         <a class='flex gap-2 hero'>
@@ -259,6 +259,6 @@ class Index extends Component {
 
 }
  
-export default Index
-
- //wascompiled
+export default Index
+
+ //wascompiled
\ No newline at end of file
diff --git a/pages/index.js b/pages/index.js
index b682a2e..bade64e 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,7 +1,8 @@
-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')
+import { Component, useState, strictMount, useRef } from '/vader.js'
+import  {Button} from '/src/button.js' 
+import {Nav }from '/src/Nav.js' 
+import { ComponentExample} from '/src/examples/component.js'
+
 export default class Index extends Component {
     constructor(props) {
         super(props);
@@ -10,11 +11,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)
          
@@ -78,7 +79,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, 'w5xo1rydzs', "setView,view,embedref,", setView, view, embedref)}", usesEvent="true", eventType="onClick",data-ref="w5xo1rydzs", 
+                            onClick="${this.bind(`setView(view === 'index' ? 'stackblitz' : 'index'); console.log(view); `, false, false, 'mvu8bmt205r', "setView,view,embedref,", setView, view, embedref)}", usesEvent="true", eventType="onClick",data-ref="mvu8bmt205r", 
                         >
                             ${
                                 view === 'index' ? 'Click to View Code' : 'Click to View Example Component'
@@ -96,7 +97,7 @@ export default class Index extends Component {
                                     : `
                                         <embed
                                             ref="${embedref.bind}",
-                                            onLoad="${this.bind(``, false, false, '8cd1g6vi6fb', "setLoaded,loaded,", setLoaded, loaded)}", usesEvent="true", eventType="onLoad",data-ref="8cd1g6vi6fb", 
+                                            onLoad="${this.bind(``, false, false, 'vdiezdk332', "setLoaded,loaded,", setLoaded, loaded)}", usesEvent="true", eventType="onLoad",data-ref="vdiezdk332", 
                                             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%' }}
@@ -119,6 +120,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 b655ce6..b116132 100644
--- a/src/Nav.js
+++ b/src/Nav.js
@@ -1,5 +1,5 @@
-let { Component } = await import(Vader.root + '//vader.js')
-let {SearchBar} = await import(Vader.root + '/src/search.js') 
+import { Component } from '/vader.js'
+import {SearchBar}  from '/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, 's7eifr793j', "", null)}", usesEvent="true", eventType="onClick",data-ref="s7eifr793j", 
+                    onClick="${this.bind(`this.response.redirect('/'); `, false, false, 'y857duf5vcm', "", null)}", usesEvent="true", eventType="onClick",data-ref="y857duf5vcm", 
                 >
 
                     <img
diff --git a/src/button.js b/src/button.js
index 5946fcf..f0ed299 100644
--- a/src/button.js
+++ b/src/button.js
@@ -1,4 +1,4 @@
-let { Component } = await import(Vader.root + '//vader.js')
+import { Component } from '/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, 'm7xtffjzn6m', "", null)}", usesEvent="true", eventType="onClick",data-ref="m7xtffjzn6m", 
+            onClick="${this.bind(`console.log(this); this.parentNode.response.redirect(this.props?.redirect); `, false, false, 'v6vbojpfgi', "", null)}", usesEvent="true", eventType="onClick",data-ref="v6vbojpfgi", 
            >${this.props?.children}</button>
 
         `
diff --git a/src/collapse.js b/src/collapse.js
index 3bddb67..2c9ba7d 100644
--- a/src/collapse.js
+++ b/src/collapse.js
@@ -1,4 +1,4 @@
-let { Component, useState } = await import(Vader.root + '//vader.js')
+import { Component, useState } from 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, '00cj3rqug8xqk', "setOpen,open,", setOpen, open)}", usesEvent="true", eventType="onClick",data-ref="00cj3rqug8xqk", >
+                 onClick="${this.bind(`setOpen(!open); this.props?.click(this.props?.redirectTo); `, false, false, 'xjmx81350jm', "setOpen,open,", setOpen, open)}", usesEvent="true", eventType="onClick",data-ref="xjmx81350jm", >
                     ${this.props?.title}
                  </button>
                 <div 
diff --git a/src/examples/component.js b/src/examples/component.js
index 51fb361..929eca6 100644
--- a/src/examples/component.js
+++ b/src/examples/component.js
@@ -1,4 +1,4 @@
-let {Component, useState, strictMount, useRef} = await import(Vader.root + '//vader.js')
+import {Component, useState, strictMount, useRef}  from '/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, '9toqkdxafxq', "setLiked,,liked,likedRef,event,", setLiked, liked, likedRef, event)}", usesEvent="true", eventType="onClick",data-ref="9toqkdxafxq", 
+                        onClick="${this.bind(`setLiked(!liked, likedRef.bind); `, false, false, '578mifidckd', "setLiked,,liked,likedRef,event,", setLiked, liked, likedRef, event)}", usesEvent="true", eventType="onClick",data-ref="578mifidckd", 
                         >
                             <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, '4aylv5n28wx', "e, test", event, videos)}", usesEvent="true", eventType="onInput",data-ref="4aylv5n28wx",       
+                    onInput="${this.bind(filterVideos, true, false, 'vxjzrak1hwn', "e, test", event, videos)}", usesEvent="true", eventType="onInput",data-ref="vxjzrak1hwn",       
                     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 27c18ae..fcb7b1f 100644
--- a/src/pages/docs/deployment/index.js
+++ b/src/pages/docs/deployment/index.js
@@ -1,4 +1,4 @@
-let { Component } = await import(Vader.root + '//vader.js')
+import { Component } from '/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, 'rx6arbdtdej', "", null)}", usesEvent="true", eventType="onClick",data-ref="rx6arbdtdej", 
+              onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, '0g8c8vjvjlq', "", null)}", usesEvent="true", eventType="onClick",data-ref="0g8c8vjvjlq", 
             >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 27297c8..2a0324a 100644
--- a/src/pages/docs/hooks/index.js
+++ b/src/pages/docs/hooks/index.js
@@ -1,4 +1,4 @@
-let {useState, useRef, Component} = await import(Vader.root + '//vader.js')
+import {useState, useRef, Component} from '/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, 'btjfb6edb5', "", null)}", usesEvent="true", eventType="onClick",data-ref="btjfb6edb5", >
+               onClick="${this.bind(`this.props?.click('/docs/hooks/useState'); `, false, false, '3mbn21kf4a5', "", null)}", usesEvent="true", eventType="onClick",data-ref="3mbn21kf4a5", >
                   useState
                 </a>  
               </li>
diff --git a/src/pages/docs/overview/index.js b/src/pages/docs/overview/index.js
index d3fa312..b725a61 100644
--- a/src/pages/docs/overview/index.js
+++ b/src/pages/docs/overview/index.js
@@ -1,6 +1,6 @@
-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') 
+import { Component, useState, useRef } from '/vader.js'
+import {Routing}  from '/src/pages/docs/routing/index.js' 
+import { Deployment } from '/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, '8it00hbw1cu', "", null)}", usesEvent="true", eventType="onClick",data-ref="8it00hbw1cu", 
+              onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, 'wo4torj75dc', "", null)}", usesEvent="true", eventType="onClick",data-ref="wo4torj75dc", 
             >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, 'nc9ejc8joz8', "setSaved,saved,copiedRef,", setSaved, saved, copiedRef)}", usesEvent="true", eventType="onClick",data-ref="nc9ejc8joz8", 
+                onClick="${this.bind(`navigator.clipboard.writeText('npx vaderjs@latest --build'); setSaved(!saved, copiedRef.bind); setTimeout(() => {; setSaved(false, copiedRef.bind); }, 1000); `, false, false, 's6z4gozp33n', "setSaved,saved,copiedRef,", setSaved, saved, copiedRef)}", usesEvent="true", eventType="onClick",data-ref="s6z4gozp33n", 
               >
                 <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, 'k4gddg9jjs', "setSaved,saved,copiedRef,", setSaved, saved, copiedRef)}", usesEvent="true", eventType="onClick",data-ref="k4gddg9jjs", 
+                onClick="${this.bind(`navigator.clipboard.writeText(examples['1']); setSaved(!saved, copiedRef.bind); setTimeout(() => {; setSaved(false, copiedRef.bind); }, 1000); `, false, false, '50id2529hc4', "setSaved,saved,copiedRef,", setSaved, saved, copiedRef)}", usesEvent="true", eventType="onClick",data-ref="50id2529hc4", 
               >
                 <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, 'rx5j1nxi81', "", null)}", usesEvent="true", eventType="onClick",data-ref="rx5j1nxi81", 
+            onClick="${this.bind(`console.log(this); this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, '38ryhr59pzn', "", null)}", usesEvent="true", eventType="onClick",data-ref="38ryhr59pzn", 
           >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, 'qwgem193ll', "", null)}", usesEvent="true", eventType="onClick",data-ref="qwgem193ll", 
+            onClick="${this.bind(`console.log(this); this.props?.swapPage({ page: 'getting-started', subpage: 'project-structure' }); `, false, false, '4ymyje0habb', "", null)}", usesEvent="true", eventType="onClick",data-ref="4ymyje0habb", 
           >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, 'oalcl0qcp17', "", null)}", usesEvent="true", eventType="onClick",data-ref="oalcl0qcp17", 
+              onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, '1y7zafs9566', "", null)}", usesEvent="true", eventType="onClick",data-ref="1y7zafs9566", 
             >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, '8j00dyq1w3e', "", null)}", usesEvent="true", eventType="onClick",data-ref="8j00dyq1w3e", 
+            onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, 'b5whqymws1j', "", null)}", usesEvent="true", eventType="onClick",data-ref="b5whqymws1j", 
           >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, 'wn815fmh8no', "", null)}", usesEvent="true", eventType="onClick",data-ref="wn815fmh8no", 
+            onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: 'routing' }); `, false, false, 'rmia074dibq', "", null)}", usesEvent="true", eventType="onClick",data-ref="rmia074dibq", 
           >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, 'zk7yxn2o18m', "", null)}", usesEvent="true", eventType="onClick",data-ref="zk7yxn2o18m", 
+                    onClick="${this.bind(`this.props?.click('getting-started', 'installation'); `, false, false, '1slv42hv0rs', "", null)}", usesEvent="true", eventType="onClick",data-ref="1slv42hv0rs", 
                   >Installation  </span>
                 </div>
               </div>
diff --git a/src/pages/docs/routing/index.js b/src/pages/docs/routing/index.js
index 717fd8e..d9ce483 100644
--- a/src/pages/docs/routing/index.js
+++ b/src/pages/docs/routing/index.js
@@ -1,4 +1,4 @@
-let { Component, useRef, useState } = await import(Vader.root + '//vader.js')
+import { Component, useRef, useState } from '/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, '9nlu25a1g04', "", null)}", usesEvent="true", eventType="onClick",data-ref="9nlu25a1g04", 
+              onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: '' }); `, false, false, '7hnii6tp54', "", null)}", usesEvent="true", eventType="onClick",data-ref="7hnii6tp54", 
             >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, '0lmpsjghgu1h', "", null)}", usesEvent="true", eventType="onClick",data-ref="0lmpsjghgu1h",  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, 'lxy6g1jm8n', "", null)}", usesEvent="true", eventType="onClick",data-ref="lxy6g1jm8n",  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, 'wj3xz3qwi58', "setSaved,saved,copiedRef,", setSaved, saved, copiedRef)}", usesEvent="true", eventType="onClick",data-ref="wj3xz3qwi58", 
+              onClick="${this.bind(`setSaved(true, copiedRef.bind); `, false, false, '70g2xebkfh', "setSaved,saved,copiedRef,", setSaved, saved, copiedRef)}", usesEvent="true", eventType="onClick",data-ref="70g2xebkfh", 
             >
               <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, '2bun5onxvsh', "setSaved,saved,copiedRef,", setSaved, saved, copiedRef)}", usesEvent="true", eventType="onClick",data-ref="2bun5onxvsh", 
+                onClick="${this.bind(`navigator.clipboard.writeText(examples['1']); setSaved(!saved, copiedRef.bind); setTimeout(() => {; setSaved(false, copiedRef.bind); }, 1000); `, false, false, '2lx3fmhz4mb', "setSaved,saved,copiedRef,", setSaved, saved, copiedRef)}", usesEvent="true", eventType="onClick",data-ref="2lx3fmhz4mb", 
               >
                 
               </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, 'm50aw5izhuq', "", null)}", usesEvent="true", eventType="onClick",data-ref="m50aw5izhuq", 
+            onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: 'project-structure' }); `, false, false, 'cspmj2b7gds', "", null)}", usesEvent="true", eventType="onClick",data-ref="cspmj2b7gds", 
           >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, '47ewfsf6ier', "", null)}", usesEvent="true", eventType="onClick",data-ref="47ewfsf6ier", 
+            onClick="${this.bind(`this.props?.swapPage({ page: 'getting-started', subpage: 'deployment' }); `, false, false, 'k2bxt3hjh7h', "", null)}", usesEvent="true", eventType="onClick",data-ref="k2bxt3hjh7h", 
           >Deployment  </span>
         </div>
      </div>
diff --git a/src/search.js b/src/search.js
index 750b623..521638b 100644
--- a/src/search.js
+++ b/src/search.js
@@ -1,9 +1,9 @@
-let { Component, strictMount, useReducer } = await import(Vader.root + '//vader.js')
+import { Component, strictMount, useReducer } from '/vader.js'
 
 let data = await fetch('src/searchData/search.json').then(res => res.json())
  
 
-let { Button } = await import(Vader.root + '/src/button.js')
+import { Button } from '/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, '1r7h0m24khv', "", null)}", usesEvent="true", eventType="onClick",data-ref="1r7h0m24khv", 
+                    onClick="${this.bind(`document.getElementById('my_modal_5').showModal(); `, false, false, 'i0pif3w9hw', "", null)}", usesEvent="true", eventType="onClick",data-ref="i0pif3w9hw", 
                      
                     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, '8ibc46yas5h', "", null)}", usesEvent="true", eventType="onClick",data-ref="8ibc46yas5h", 
+            <div onClick="${this.bind(`document.getElementById('my_modal_5').showModal(); `, false, false, 'xfstfr6ntk', "", null)}", usesEvent="true", eventType="onClick",data-ref="xfstfr6ntk", 
                 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" />
